The animation somehow only works properly only when "markers: true"

[eddiedev]

Hello community of GreenSock,

 

I'm back with another rather dumb question to which I can't find an answer myself. I'm currently trying to figure out how to get 2 or more canvases to play after each-other (as you can see in the pen, there are 2 identic canvases that play after each other, without any space between them). My approach seems a bit off but that's not the main issue here. Everything works fine (both the animations finish properly) when the "markers" property is set on "true", but, when set on "false", the second animation doesn't finish (it only goes to the 115th frame out of 147). 

 

Does anyone know why this is happening. Any explanation / response is welcome and appreciated, Thank you!

See the Pen KKZegoL by edi-bociu (@edi-bociu) on CodePen

[akapowl]

Heya Eddie,

 

I can't explain the why exactly, but I'm pretty sure it is related to the .canvas-container that you are pinning not having a height set and thus there not being enough calculated room made for scrolling by the pin-spacer (while the markers would make sure there will be). See how different it already behaves when you e.g. set a min-height of 100vh.

 

See the Pen RwxJGvy by akapowl (@akapowl) on CodePen

 

 

 

I'm on my way into the night, but I also additionaly want to mention, that nesting ScrollTriggers inside of individual tweens of a timeline as you are doing, is one of the most common ScrollTrigger mistakes. You'll notice when you scroll to the bottom and then back up to the top again, that (likely because of that wrong use) the first frame-animation does not run anymore. That is a very helpful article by the way with some more pitfalls to avoid in it:

 

 

 

 

Also, I don't think this is an actually valid value for the start:

 

start: "-=10"

 

Start and end generally should have two parameters; the first is with regard to the trigger element and the second with regard to the viewport.

 

While end can also have relative values like "+=100%" (relative to the start value), start can not - because: what should it be relative to 🤷‍♂️ Both can have single absolute values though, like "10000px" e.g. that would be absolute 10000px down the page then.

 

I hope this will help a bit, although I can not offer an alternative to what you were trying this time. Cheers!

 

[eddiedev]

Thats actually a very good response, thanks! I knew that I was doing many things wrong and it felt wrong that the first animation won't play when scrolling back, but I just thought I'd fix that after figuring out why the markers behaved the way they did. Also, I've done that "start: "+=10" so the animation would already be fired when the page refreshes, as otherwise you'd have to scroll 1px to fire it.

Cheers!