Jump to content
GreenSock

samlinck

Scrolltrigger animation starts from a different position than the end of the first animation

Recommended Posts

I have an on load animation which works fine. But when i start scrolling, my right dot jumps to its start position (before the load animation). I guess it has something to do with using different kind of translates? Hope somebody can help.

See the Pen ExQdYWo by Samlinck (@Samlinck) on CodePen

Link to comment
Share on other sites

  • samlinck changed the title to Scrolltrigger animation starts from a different position than the end of the first animation

@samlinck I believe this is what you are looking for? 

See the Pen abqRzaJ by myth-vince (@myth-vince) on CodePen


 

        tl.add('start')
     
        .to('#dotLeft', {duration: 1, x: 32}, 'start')
        .to('#dotRight', {duration: 1, x: -32 }, 'start')
            });

        };

just change the #dotRight into "x:-32" so it won't back in initial position..xPercent and x has different roles.
 

Link to comment
Share on other sites

No, why did you change it in the last line of codes..I only talk about the top of your codes in which is before the scrollTl. 

Link to comment
Share on other sites

Hey there @samlinck, thanks for jumping in @Xenex122

This is actually common confusion!

 

ScrollTriggered timelines are rendered immediately - much like .from tweens, so if you're animating elements on load which are also ScrollTriggered you may want to add immediateRender:false to your scrollTrigger. then your scrollTrigger will wait and then use whatever position the elements are in when it starts

See the Pen gOvBPRz?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
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.
×