triggering next animation with scrollplugin resets starting point

[Lefthandmedia]

Hi,

I'm struggeling with the new scrolltrigger. I have a div with an SVG map in it. Upon scrolling I pin the container.

Now when i scroll 3 section DIV's pass by and i want upon entering of each section to tween the #map to a specific point. That all seems to work.

When i start the map resets to 0,0 .... when section 2 enters the map continues to the proper coordinates. BUT when section 3 enters the map seems to reset to 0,0 first before tweening to its proper location.

Why is it not using the current location (set by section2) as the starting point for this tween?

I made a pen to illustrate 

 

See the Pen abdrePP by Lefthandmedia (@Lefthandmedia) on CodePen

[ZachSaucier]

Hey lefthandmedia.

 

Your first tween/ScrollTrigger doesn't do anything because the position is already at top: 0, left: 0... What's your goal there?

 

As for your question, this is because the tween is initialized at the start when things are set up because in most cases that's what people generally want. So the start position for all of your tweens is 0,0. 

 

To do what you want it to do, you could either

• Set immediateRender: false on the tweens after the first one. Or
• Use .fromTo()s instead.

Misusing relative tweens is one of the most common GSAP mistakes