Hello guys,
Just started my first gsap project using react js. There is a loader which is visible at the initial load and I pass a flag prop to the main component once the loader disappears. Once this flag is received by the main component, I play the timeline using the play method. In the timeline I'm fading in multiple elements present in the section.
I'm facing a problem where this timeline is a part of the ScrollTrigger animation which happens on every section scroll. So for the first screen, as soon as the loader disappears the animation is already complete as the ScrollTrigger considers it in the viewport.
//Main component
this.timeline = gsap.timeline().pause();
//sections, sectionRight, descriptions are refs of sections and elements which fade in.
sections.forEach((section, index) => {
const tl = gsap.timeline({ paused: true });
tl.to(sectionRight, {
autoAlpha: 1,
duration: 0.5
}).to(descriptions, {
autoAlpha: 1,
duration: 0.5,
y: 0
}, 1);
ScrollTrigger.create({
trigger: section,
animation: tl,
start: "top +=70",
end: "bottom top",
scrub: 0.5
});
});
//this.timeline is same as above tl which is played when the loader flag is received. But the animation is already played due to being in the viewport.
Also, I want the timeline (tl) to play on each section scroll when in viewport but doesn't work properly. Not able to figure out where is it going wrong. Help very much appreciated. Thanks in advance.