Cara Menganimasikan Bentuk SVG di Scroll
totosgp

Cara Menganimasikan Bentuk SVG di Scroll

Cara Menganimasikan Bentuk SVG di Scroll


Dari sponsor kami: Coba Mailchimp hari ini.

Menggulir bisa sangat menyenangkan! Mari kita lihat bagaimana membuat bentuk SVG dan clip-path bernyawa pada scroll untuk menambahkan sedikit drama dan waviness ke desain. Kita dapat mengubah satu jalur menjadi jalur lain dan kita akan melakukannya setelah sebuah bentuk memasuki area pandang.

Mari kita mulai!

Animasi Jalur pada Pemisah

Menganimasikan jalur pada gulir bisa sangat menarik untuk pemisah dan batas ke gambar layar penuh. Jadi, mari kita lihat contoh pertama ini, di mana kita hanya menganimasikan jalur SVG yang memiliki warna isian yang sama dengan latar belakang halaman:

Saat kita menggulir, kita akan menganimasikan jalur SVG dari persegi panjang ke bentuk gelombang.

Agar ini berfungsi, kita membutuhkan dua jalur: satu jalur awal yang berbentuk persegi panjang dan jalur terakhir yang berbentuk bergelombang. Saat kita membuat jalur yang akan dianimasikan, kita harus ingat bahwa semua titik yang ada di jalur akhir, juga harus ada di bentuk awal. Jadi cara terbaik untuk memastikan animasi jalur kita tidak berubah menjadi funky, adalah mulai membuat bentuk paling kompleks yang dalam kasus kita adalah jalur terakhir dengan kurva.

Membuat jalur SVG

Sayangnya, perangkat lunak desain grafis mungkin bukan pilihan terbaik untuk membuat jalur yang tepat dan dioptimalkan. Saya biasanya mulai membuat bentuk di Sketch dan kemudian saya mengoptimalkannya menggunakan SVGOMG. Kemudian, saya menyalin jalur dan menempelkannya ke SvgPathEditor. Langkah pengoptimalan tidak selalu diperlukan karena editor jalur menawarkan pembulatan, yang sangat bagus. Saya menggunakannya untuk jalur atau grup yang memiliki transformasi yang diterapkan oleh Sketch. SVGOMG dapat menghapusnya.

SVGOMG membersihkan SVG dan menghapus transformasi

Setelah kami memiliki SVG yang dioptimalkan dengan jalur “bersih”, kami dapat menggunakan editor untuk membuat bentuk awal dari yang lebih kompleks:

Meskipun bentuk ini tidak benar-benar terlihat, kita membutuhkan semua titik dari jalur akhir untuk hadir di jalur awal.

Saat melakukan ini, ini juga merupakan cara yang bagus untuk secara kasar memvisualisasikan bagaimana animasi akan terlihat dan terasa (tentu saja sebaliknya). Setelah kita memiliki kedua jalur, kita dapat menggunakannya dalam HTML kita.

Markup dan Gaya

<svg class="separator separator--up" width="100%" height="100%" viewBox="0 0 100 10" preserveAspectRatio="none">
	<path 
		class="separator__path path-anim" 
		d="M 0 0 C 40 0 60 0 100 0 L 0 0 Z" 
		data-path-to="M 0 0 C 40 10 60 10 100 0 L 0 0 Z" 
		vector-effect="non-scaling-stroke" 
	/>
</svg>

Menggunakan atribut data, kami menentukan jalur akhir yang kami inginkan untuk animasi awal. Sedikit CSS akan memastikan bahwa SVG kita ditempatkan dengan lebar penuh, di bagian atas gambar latar besar:

.separator 
	display: block;
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	width: 100%;
	height: 150px;
	fill: var(--color-bg);

Perhatikan bahwa Anda dapat meregangkan SVG ke ketinggian yang diinginkan, bergantung pada seberapa dramatis tampilan gelombang yang Anda inginkan saat menggulir.

JavaScript

Untuk pengguliran yang mulus, kami akan menggunakan perpustakaan Lenis baru oleh Studio Freight. Plugin ScrollTrigger GSAP akan memungkinkan kita untuk menganimasikan sebuah elemen saat elemen tersebut masuk atau keluar dari viewport.

Mari impor skrip yang kita butuhkan:

import Lenis from '@studio-freight/lenis'
import  gsap  from 'gsap';
import  preloader  from './preloader';
import  ScrollTrigger  from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

Mari kita pramuat gambar:

preloader();

Sekarang kita membutuhkan semua elemen path yang ingin kita animasikan (mereka memiliki kelas “path-anim”):

const paths = [...document.querySelectorAll('path.path-anim')];

Selanjutnya, kami menginisialisasi pengguliran halus:

const lenis = new Lenis(
    lerp: 0.1,
    smooth: true,
);
const scrollFn = () => 
    lenis.raf();
    requestAnimationFrame(scrollFn);
;
requestAnimationFrame(scrollFn);

Dan akhirnya, kami menganimasikan jalur kami saat mereka memasuki area pandang. Jalur terakhir didefinisikan dalam atribut data “data-path-to” di elemen jalur, seperti yang telah kita lihat sebelumnya.

Itu Mulailah dan akhir didefinisikan oleh bagian atas elemen SVG yang mencapai bagian bawah viewportdan bagian bawahnya mencapai atas viewport:

paths.forEach(el => 
    const svgEl = el.closest('svg');
    const pathTo = el.dataset.pathTo;

    gsap.timeline(
        scrollTrigger: 
            trigger: svgEl,
            start: "top bottom",
            end: "bottom top",
            scrub: true
        
    )
    .to(el, 
        ease: 'none',
        attr:  d: pathTo 
    );
);

Sekarang, kami memiliki jalur SVG yang berubah saat menggulir halaman!

Meskipun kita dapat menggunakan teknik animasi ini pada jalur dan “pemisah” yang hanya menutupi beberapa gambar latar belakang yang besar, kita juga dapat menganimasikan jalur klip pada gambar, seperti dalam contoh ini:

<svg class="image-clip" width="500px" height="750px" viewBox="0 0 500 750">
	<defs>
		<clipPath id="shape1">
			<path 
				class="path-anim" 
				d="M 0 0 L 500 0 C 500 599.6 500 677.1 500 750 L 0 750 C 0 205 0 105 0 0 Z"
				data-path-to="M 0 0 L 500 0 C 331 608 485 551 500 750 L 0 750 C 120 281 7 296 0 0 Z" 
			/>
		</clipPath>
	</defs>
	<image 
		clip-path="url(#shape1)" 
		xlink:href="img/2.jpg" 
		x="0" y="0" 
		width="500" 
		height="750"
	/>
</svg>
Kami dapat menganimasikan jalur klip pada gambar SVG

Hasil Akhir

Menggabungkan pengguliran halus dengan animasi jalur SVG dapat menambahkan tingkat kesejukan morf ekstra ke desain. Ini tidak terlalu rumit tetapi hasilnya bisa terlihat sangat dramatis. Teknik ini memberikan sentuhan organik pada pengalaman menggulir dan mungkin tidak perlu menggunakan WebGL untuk efek distorsi sederhana tertentu.

Saya sangat berharap Anda menikmati tutorial kecil ini dan merasa berguna untuk membuat animasi Anda sendiri!

Kumpulan Situs Web Inspirasional #38

Karena cuma mampu bergantung kepada pihak yang sediakan information togel. sidney saja yang mampu memperoleh knowledge sgp lengkap. Lantas bersama susah nya membuka situs togel singapore pools pada negara +62. Maka alangkah baiknya berlangganan terhadap halaman ini untuk menemukan data keluaran sgp hari ini live tercepat cuma disini.