Animații în cod cu Claude, Modvia Academy, 2026
Lenis e librăria ușoară de smooth-scroll care alimentează majoritatea site-urilor de nivel agenție pe care le admiri (câștigători Awwwards, portofolii de studio).
import Lenis from 'lenis';
import { useEffect } from 'react';
export function useLenis() {
useEffect(() => {
const lenis = new Lenis({ duration: 1.2, easing: t => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
requestAnimationFrame(raf);
return () => lenis.destroy();
}, []);
}
Apelezi useLenis() în layout-ul rădăcină. Gata.
ScrollTrigger (un plugin GSAP) îți permite să legi orice animație GSAP de scroll. Fixezi secțiuni, scrub-uiești timeline-uri, faci snap la checkpoint-uri, totul cu un singur config.
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';
gsap.registerPlugin(ScrollTrigger);
export function PinnedHero() {
const ref = useRef(null);
useGSAP(() => {
gsap.timeline({
scrollTrigger: {
trigger: '.pin-section',
start: 'top top',
end: '+=200%',
scrub: 1,
pin: true,
},
})
.to('.bg', { scale: 1.4, ease: 'none' })
.to('.title', { yPercent: -100, opacity: 0, ease: 'none' }, 0)
.from('.next', { yPercent: 100, opacity: 0, ease: 'none' }, 0);
}, { scope: ref });
return (<section className='pin-section' ref={ref}>...</section>);
}
Dacă le folosești pe amândouă, GSAP trebuie să fie instruit să asculte de Lenis. Adaugă asta o singură dată,
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
Pentru un simplu 'fă-mă fade-in când sunt vizibil', Intersection Observer nativ e mai rapid și mai ușor decât orice librărie.
import { useEffect, useRef, useState } from 'react';
export function useInView(threshold = 0.2) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const obs = new IntersectionObserver(
([e]) => e.isIntersecting && (setInView(true), obs.disconnect()),
{ threshold }
);
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, [threshold]);
return [ref, inView];
}
Folosești: const [ref, inView] = useInView(); apoi aplici condiționat clasa ta CSS.
| Pattern | Unde l-ai văzut |
|---|---|
| Hero fixat cu scrub | Paginile de produs Apple, Stripe. |
| Scroll orizontal în interiorul celui vertical | Secțiunea de features Linear, plimbări prin galerii. |
| Fundal parallax | Site-uri editoriale, secțiuni hero. |
| Snap-to-section | Site-ul Apple Watch, prezentări. |
Obiectiv. Smooth scroll-ul schimbă tot vibe-ul fiecărei pagini.
Obiectiv. Folosește ScrollTrigger ca să fixezi o secțiune și să scrub-uiești o animație în 4 pași.
Obiectiv. Transformă lucrul cu scroll-ul într-un produs, ca add-on premium.