Need help with scrollTrigger

[embrion]

Hello.

 

I have just started to study GSAP, so difficulties arise. I need your help.

 

The essence of the example is to start the triggers when scrolling to the title and the layer went up and stayed in the same place when scrolling down.

But when it scrolls up, the animation lags, and sometimes .part-1 doesn't return to its place - what's my mistake?

 

Also interesting is the ability to hide all layers except .part-6 until you scroll to the first heading (from bottom to top).

 

Thanks.

See the Pen QWGemMG by AaalexxX (@AaalexxX) on CodePen

[akapowl]

 

Hey @embrion - welcome to the forums.

 

You've got quite a lot going on in your demo and from what it looks like to me, you have ScrollTriggers set up that on toggle and every other callback create tweens that have ScrollTriggers attached - so there is probably a lot of fighting going on about what should take control over your animations, which would explain the stuttering/lagging. Also you will notice your page becoming longer and longer the more you scroll down.

 

I think you could go about this a whole lot easier by simply creating one fromTo-tween for each of your elements with a scrollTrigger attached.

 

Depending on how exactly you wanted things to be tweened (especially when you want it to be scrubbing) you should also be careful about your end-values.

As of now it looks to me, like you have them set up (on the actual tweening ScrollTriggers) that the end-point would have already been passed before the start would have even been reached - so there wouldn't be any room for scrubbing.

 

Here is a demo of how you could tackle what I think I understood it is you want to achieve.

I tweeked your ends and starts a bit so they more or less 'hook' to your elements (visualized by the :before I added to each h3 and setting the scrub to true instead of 2)

 

See the Pen 5ded63fafec501ba565cb6ec28b8da2a by akapowl (@akapowl) on CodePen

 

 

And since I am not entirely sure if you want the scrubbing, here is a version using toggleActions to trigger the animations

 

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

 

 

 

 

6 hours ago, embrion said:

Also interesting is the ability to hide all layers except .part-6 until you scroll to the first heading (from bottom to top).

 

That part could be achieved by setting all but the one you want to be visible to invisible beforehand and then eiter use the onEnter-callback of one of your existing ScrollTriggers for triggering a tween that makes the others visible or setting up an individual ScrollTrigger for whenever you want them to become visible. But (and I don't mean this offensive in any way) I think, that maybe you should try and tackle one bit at a time because what you want to do takes quite some thinking in the first place.

 

I hope this was a bit helpful though.

Cheers.