If I would like to add more sections below the horizontal part, then should I create a new animation, or can I use it with the existing code? What's the best practice? Probably it's not a good solution to duplicate the code with different classes.
let sectionsArr = gsap.utils.toArray(".panel-vertical");
sectionsArr.forEach((element) => {
gsap.from(element, {
autoAlpha: 0,
ease: "power2",
scrollTrigger: {
trigger: element,
scrub: true,
pin: true,
start: "top top",
end: "+=100%"
}
});
});
Just to test it I added 2 more sections below, and it broke the layout: https://codepen.io/rryp111/pen/eYENyzb