Transform y and ScrollTrigger

[pattocheu]

Dear All,

 

I'm having an issue with Pin related to ScrollTrigger. I've already seen this type of error on the forum, and I can't seem to find a solution. I thought that `immediateRender: false` could help, but it doesn't change anything. How can I ensure that after my animation of my wrapper from `y: 50` to `y: 0`, my ScrollTrigger catches the correct values?

 

Thank you for your help, one more time.

 

Patrick.

See the Pen PoVxWoj?editors=1010 by pattocheu (@pattocheu) on CodePen

[mvaneijgen]

Hi @pattocheu, 

 

immediateRender is only something a tween can have, it is not a property of ScrollTrigger.  What you can do is wrap all the ScrollTrigger code in a function and only call that function onComplete of your y tween. You can also call ScrollTrigger.refresh() when you know everything that is going to change has changed. and ScrollTrigger will get all the updated values. 

 

I do have to say that I find the setup really complex, three ScrollTriggers for one effect. I've just written a guide how I go about creating a stacking card effect which might be interesting for you to take a look at. But then again if it works it works right!

 

Also highly recommend taking a look at ScrollSmoother https://gsap.com/docs/v3/Plugins/ScrollSmoother/ don't know exactly what you're using Lenis for, but this is build to be used with GSAP and ScrollTrigger. 

 

Hope it helps and happy tweening! 

[Rodrigo]

Yep, Mitchel is right, either create your ScrollTrigger instances after that is completed or use ScrollTrigger.refresh() method.

 

Finally as an FYI you can use immediateRender in your ScrollTrigger configuration. ScrollTrigger will catch it whether you use it on the Tween or in the ScrollTrigger config:

https://github.com/greensock/GSAP/blob/master/src/ScrollTrigger.js#L662

 

Happy Tweening!

[pattocheu]

Thank you @mvaneijgen and @Rodrigo

 

Thank you for your advice.

By keeping my basic architecture ( from y:50 to y:0) and adding a function that contains all my animations in `onComplete()`, and by forcing `ScrollTrigger.refresh(true)`, I still experience a malfunction when pinning the section.

 

Perhaps I misunderstood your explanations.

 

Thank you.

[Rodrigo]

Hi,

 

What exactly is the problem you're having here?

 

Have you tried this without Lenis? You experience the same issue?

 

Unfortunately the description you provide is a bit vague and doesn't really clarifies a lot for me at least, maybe I'm missing something obvious here 🤷‍♂️

 

Happy Tweening!