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 ?

Perfect! Thanks again.

I've updated my syntax to v3 and created a forked CodePen here - https://codepen.io/hintondesign/pen/mdOVXML 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

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

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

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.