Jump to content
Search Community

Start tween after loader which is a part of scrollTrigger

Gaurav Prabhu test
Moderator Tag

Recommended Posts

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.

 

  • Like 1
Link to comment
Share on other sites

Hey Zach,

Thanks for the reply. Really sorry for not attaching the pen before. I have created a pen below. I'm still not sure if you could understand what I want exactly. I'll describe it for you.

Once the loader animation is complete, I want to fade in the elements for the first section. I want the same fade in animations to happen for rest of the section elements on scroll whenever they are in the viewport. Right now I guess the first section animation doesn't happen because it is also controlled by the ScrollTrigger plugin. I'm using refs instead of classes as I'm using react. Help appreciated.

See the Pen PoNgQMP by gauravp15-the-encoder (@gauravp15-the-encoder) on CodePen

Link to comment
Share on other sites

Really thanks for the prompt reply. Will try that out. I was having another problem where all the elements were getting animated at once instead of animating when in the viewport. Could you please check the pen, look at the ScrollTrigger create function and tell me if there's anything wrong that I'm doing?

Link to comment
Share on other sites

1 hour ago, Gaurav Prabhu said:

I was having another problem where all the elements were getting animated at once instead of animating when in the viewport

You're targeting all of your boxes in the timeline and applying that same timeline to each ScrollTrigger. What you should do instead is create a timeline for each section and make the target just the boxes in that section. I talk more extensively about how to do that in my article about animating efficiently and also the common GSAP mistakes article.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...