Итак, я только что создал несколько пользовательских анимаций, используя GSAP, но, по моему мнению, это не совсем чисто. Я не знаю, где и где мне не следует убивать анимацию и все такое.
useGSAP(() => {
if (!initialCard.current.length) return;
if (!finalCard.current.length) return;
let progress;
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".main",
start: "top top",
end: "5000 top",
pin: true,
scrub: true,
immediateRender: false,
onUpdate: (self) => {
progress = self.progress;
},
},
});
tl.from(initialCard.current, {
yPercent: 100,
opacity: 0,
ease: "power3.out",
stagger: 0.15,
onComplete: () => console.log("First animation finished"),
});
tl.fromTo(
finalCard.current,
{
scale: 0.5,
},
{
x: 0,
scale: 1,
stagger: 0.15,
duration: 1,
ease: "power1.out",
}
);
}, []);
Подробнее здесь: https://stackoverflow.com/questions/798 ... animations
