ScrollTrigger: Losing/Resetting animated position

[hintondesign]

Hi,

 

I've created a simple ThreeJS scene animated using the GSAP ScrollTrigger plugin. 

 

Essentially the webpage is 3 x 100%vh, and .the cube-based animation has 3 stages (1 per 100vh).

 

I have a couple of issues that I can't find a solution to on there forums or StackOverflow:

 

1. The main issue is that between each stage/timeline-step the animated elements reset their state (position and rotation) rather than continuing from where the previous ScrollTrigger ended.

 

2. If I set the rotational values as degrees ScrollTrigger animates through countless 360 degree loops rapidly. For example in the first stage of the animation the cube simply rotates 90 degrees in the X and Y axis. However to get it functioning somewhat correctly I've had to set the starting values at 1.57 (rather than -90degs) and the end values at -0.75 (rather than 0degs). I suspect this is a ThreeJS setting/issue but if anyone spots what I'm doing wrong here please let me know.

 

I'm relatively new to GSAP and ScrollTrigger so if I've done something daft please just let me know, gently, heh.

See the Pen MWbKJWb by hintondesign (@hintondesign) on CodePen

[akapowl]

 

Hey @hintondesign - welcome to the forums  

 

Looks, like you are making two of the most common ScrollTrigger mistakes, a) creating .to() logic issues and b) nesting ScrollTriggers inside multiple timeline tweens. The sections in the article linked have suggestions on how you could tackle those.

 

Also it looks, like you are still using the old syntax - migrating to v3-syntax is recommended and easy to do.

Actually from what it looks to me it's just that one line for when you create the timeline - but still  

 

On a sidenote: I don't think you have to pass the values to the properties (on the tweens themselves, not on the scrollTriggers) in string-form; you could just pass them as integers, like: x: 1, y: 2, z: 3

 

There's a good chance, that when you tackle those things mentioned above (the common mistakes), your issues might resolve.

If not, we can see how we can help you further then.

 

Hope this helps.

Cheers

 

[hintondesign]

5 minutes ago, akapowl said:

Thanks for the quick reply and useful links. I'll run through everything tomorrow and update the CodePen.

Much appreciated :).

 

5 minutes ago, akapowl said:

Hey @hintondesign - welcome to the forums  

 

Looks, like you are making two of the most common ScrollTrigger mistakes, a) creating .to() logic issues and b) nesting ScrollTriggers inside multiple timeline tweens. The sections in the article linked have suggestions on how you could tackle those.

 

Also it looks, like you are still using the old syntax - migrating to v3-syntax is recommended and easy to do.

Actually from what it looks to me it's just that one line for when you create the timeline - but still  

 

On a sidenote: I don't think you have to pass the values to the properties (on the tweens themselves, not on the scrollTriggers) in string-form; you could just pass them as integers, like: x: 1, y: 2, z: 3

 

There's a good chance, that when you tackle those things mentioned above (the common mistakes), your issues might resolve.

If not, we can see how we can help you further then.

 

Hope this helps.

Cheers

 

 

[akapowl]

6 minutes ago, hintondesign said:

I'll run through everything tomorrow and update the CodePen

 

When you do, it would be awesome if you could not update the pen in your original post but use the fork button and apply the changes to the forked version. This way the context of the thread will remain understandable for future readers  

[hintondesign]

Absolutely, if my rookie mistakes are of any benefit to others in future it may save people some time. 

[hintondesign]

I've updated my syntax to v3 and created a forked CodePen here - 

See the Pen mdOVXML by hintondesign (@hintondesign) on CodePen

 

It's now functioning correctly. immediateRender: false was the main factor in the solution.

 

If there's a better way to code the animation than the line-by-line .to approach please let me know and I'll update the fork.

 

Thanks again

 

[akapowl]

 

Hey @hintondesign

 

You are still nesting ScrollTriggers inside multiple timeline tweens.

It may work as you expect for now, but further down the road you might run into problems.

 

Also;  you don't need the immediateRender on every single tween, only on those, that contain elements on which you have tweened on the same values before.

 

 

Here's how I would tackle it; creating an independent timeline for every section you have (and apply the scrollTrigger with a start of 'top top' and an end of '+=100%' to each of those timelines), using "<" in the position parameter for every tween but the first of a timeline, to make sure that everything in that timeline animates at the same time.

 

See the Pen 0c76c4979b8f045589938e16e42bbb26 by akapowl (@akapowl) on CodePen

 

[hintondesign]

Perfect! Thanks again.

[hintondesign]

Sorry, one final question just so I can fully understand the solution : What is the purpose of the "<" syntax at the end of every .to ?

[ZachSaucier]

Just now, hintondesign said:

What is the purpose of the "<" syntax at the end of every .to ?

It positions the tweens at the start of the previous tween in the timeline. See the position parameter post for more info.