Lottie scroll and pinning

[Gigi1303]

Hi @akapowl, I see no difference in behaviour by reverting back to gsap 3.1.1, unfortunately.

The problem i'm encountering is that the first 2 animations (we make it happen and the black circle on the second section) start points shiftes when you refresh the page. Not always, but a good 75% of the time. Especially if you refresh the page when you reached the bottom of the page.

[akapowl]

 

It's actually really hard to replicate in the first place because when refreshing the page, it doesn't always stay at the position it was before. Your latest demo for instance works fine for me every time - but I can see it starts up top when reloaded and then jumps to the position it was before later on.

 

How about these two pens? (both are on the latest version - best fork them and view in codepen's debug mode)

 

This one sort of represents your scenario - for each section there's one instance created for pinning the wrapping container and then later the LottieScrollTrigger instance for the animation triggering on the child of the container - I can recreate the issue you described there - all positions of the animation-triggering shift for me when reloaded at the bottom of the page e.g.

 

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

 

 

If on the other hand I only use the LottieScrollTrigger for both, pinning and triggering of the animation, I can not replicate the issue any more. Does that work for you, too, or can you still replicate that behaviour with this pen?

 

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

 

[Gigi1303]

Looks very promising. I used it in my simplified original code and the positioning problem seems solved, but I still have to do some testing.

Can I ask you another thing? In this project I'd like to add background changes when the next section arrives and I don't know which is the correct way to do it anymore: should I make different scrolltriggers for the background changes? I'd like to keep them separated from the Lotties and pinning but I have fear that this would break something again.

Thanks for your help, really!

[akapowl]

 

Well, as with everything, the devil is in the detail, which is why it is very hard to give general recommendations for a more complex scenario like yours.

 

Since you are concerned about things not working when reloading the page when it's scrolled down, you might want to reconsider the general approach of how you implement the change of the backgroundColor, too, because the way you are doing it in the demos you posted, things will not work as you might intend in that case.

 

One logical problem is the following:

 

You are changing the playstate of pre-built timelines with.to() tweens in callbacks of ScrollTriggers, when the page is loaded at the very bottom, ScrollTrigger will make sure that those callbacks get called. So now you have multiple tweens being called quickly one after the other, which are all tweening on the same property of the same element, so you are creating conflicting tweens.

 

When you scroll back up then, the .to() tween is supposed to be reversed, but it will probably reverse back to the color that it was at the time when that tween was being created - which very likely is not the color you'd expect but some value of a color in between all those colors.

 

Creating your tweens upfront can be quite the tricky scenario to begin with, when you are going to tween on the same property of the same element with multiple different instances.

 

So one way you could prevent all those logical hurdles, would be to create the tweens in the callbacks directly instead of pre-building them.

 

Then you could either use .fromTo() tweens to make sure you always tween from one specific color to another specific color, when the callback runs, or .to() tweens with overwrite set to 'auto' to prevent conflicts I mentioned above.

 

In this pen with the lottie-scrolltriggers handling the pinning themselves, things seem to work fine even if I create those ScrollTriggers before all the lottie-scrolltriggers, but your mileage may vary. 

 

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

 

[Gigi1303]

I think that is a wonderful starting point. Thanks a lot for everything, @akapowl