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

[samlinck]

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

[Xenex122]

@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.
 

[samlinck]

@Xenex122 Ok but the problem persists without xPercent: 
 

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

 

 

[Xenex122]

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. 

[Cassie]

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