Hey guys,
I built this site before Motion.page was released: thelondontextilefair.co.uk, and as you can see, I'm using gsap on different sections.
I am using the same animate up effect on pretty much all sections throughout the site. I didn't find a way to do this without creating the same gsap animation for multiple classes like this, and adding each class to each section, because of the trigger needing to be from the particular section.:
gsap.from(".animate-up1", {
duration: 2,
ease: "power4.out",
y: 50,
opacity:0,
stagger: 0.2,
delay: 0,
scrollTrigger: {
trigger: ".animate-up1",
start: "top center",
end: "20px 80%",
scrub: 1,
}
})
gsap.from(".animate-up2", {
duration: 2,
ease: "power4.out",
y: 50,
opacity:0,
stagger: 0.2,
delay: 0,
scrollTrigger: {
trigger: ".animate-up2",
start: "top center",
end: "20px 80%",
scrub: 1,
}
})
And then the same for animate-up3, 4,5,6 ..... so that i had enough classes for each section.
I feel like I'm missing something - a more efficient way to do this. Is there a way to just use one gsap animation and then dynamically pick up the section to trigger it?
I have picked up motion.page to hopefully make my life easier. Can it do something similar to what I'm looking for, without manually creating an animation for each section?
Thank you :)