Tween issue while scrubbing (upwards)

[Dries 1 Likes (Newbie)]

I have the following setup:

A couple of viewport filling divs (panes) and a pinned webgl scene.
While scrolling down the panes, some animation happens in the webgl scene.
Each pane triggers an animation. E.g. move position of the cube in the webgl scene.

The scrolling down part works well.

But as soon as i scroll up, the cube jumps to the original start position from the current trigger.

I've already tried replacing the webgl animation with a simple css animation and the issue remains the same.
So i think the issue lies with the scrubbing... ?

I hope someone can help me. 😊

See the Pen WNgdYZb by insight-media (@insight-media) on CodePen

Edited March 11 by Dries
Updated the codepen

[elegantseagulls 1,443 Likes (Superhero)]

The issue is nesting multiple ScrollTriggers in a single timeline.
 

 

 

[Dries 1 Likes (Newbie)]

I'm affraid i'm still not following. 🤔
I've updated my codepen to remove the timeline. And there's no nesting in the scrolltriggers anymore (so i think).
Still the issue remains the same...

See the Pen WNgdYZb by insight-media (@insight-media) on CodePen

[Rodrigo 5,421 Likes (Superhero)]

Hi,

 

Have you tried giving start and end points to your ScrollTrigger instances? Also use markers for debugging and development. In your codepen example there's no clear indication of where each ScrollTrigger instance starts and end.

 

Finally immediate render is not something that makes any difference in to() instances, so that doesn't do much in their configuration objects.

 

Happy Tweening!

[GreenSock 18,591 Likes (Superhero)]

3 hours ago, Rodrigo said:

Finally immediate render is not something that makes any difference in to() instances, so that doesn't do much in their configuration objects.

It actually does make a difference in terms of ScrollTrigger because by default any ScrollTrigger-driven animation will render immediately to lock in the start/end values for very quick interpolation. It ensures things are locked & loaded ASAP so that when the scroll hits that spot, it can leap into action without wasting any resources reading values. This really only makes a difference when you've got multiple to() tweens that are attempting to control the same properties of the same object, and you're depending on subsequent ones to base their starting value on the earlier animations progress. Like if el.x is 0, and you have a to() tween that animates it to 100 and then ANOTHER one after that that animates it to 200...with immediateRender, that last one would animate el.x from 0 to 200 rather than 100 to 200. 

 

The problem with your setup, @Dries, is that you've created conflicting/overlapping animations. You're telling cube.position to go in two different directions simultaneously. Here's a fork where I log out the start/end positions of each ScrollTrigger: 

See the Pen oNPpRgj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Notice how they overlap? So it's a logic issue in your code. You should set things up so that you're not creating conflicting animations. 

 

It looks like you tried defining an end value of "end end" which is not valid - I assume you meant "bottom bottom"? The default start is "top bottom" and the default end is "bottom top", thus since you didn't define any, those are what's used. But the top of the next section would hit the bottom of the screen WHILE the current section is still centered in the viewport, so if that current one doesn't end until its bottom hits the top of the viewport, can you see why they overlap? My guess is you meant to do this:

See the Pen yLxpWYQ?editors=1010 by GreenSock (@GreenSock) on CodePen

[Dries 1 Likes (Newbie)]

That is very clear Jack!

Thank you for the elaborate response and guidance.

I now understand the cause of the issue and how to prevent it in the future!

 

Thanks!