ScrollSmoother with data-speed causes wrong ScrollTrigger positions

[annarack]

Hey guys!

 

First thanks for your amazing work  I'm currently working on a project which is kind of a scrollytelling website, done with React+NextJS and I decided to go with GSAP for the animations.

 

I'm not sure if I missed that in the docs, but I currently struggle with a problem that feels quite basic. I'm building different components to reuse and one of them is a "FadeInOut" wrapper-component, that should fade in its children when scrolling in view and fading out when leaving. The problem appears as soon as I want to add different data-speeds in addition (Tried it on triggered element itself and child). Seems like the start/end positions of the fade scrollTrigger are not taking in account the offset of data-speed...or somehow get calculated wrong.  What am I missing? 

 

Thanks in advance!

See the Pen mdzLGyd by annarack (@annarack) on CodePen

[Rodrigo]

Hi  @annarack and welcome to the GreenSock forums!

 

I'm not sure I follow exactly what the issue is here. I tried the latest beta version of ScrollTrigger in your pen and I see that it behaves differently:

See the Pen wvYXaMy by GreenSock (@GreenSock) on CodePen

 

Here is the link to the latest version of ScrollTrigger:

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that works the way you intend? If not please be as specific as you can in order to get a better grasp of what could be the issue.

 

Hopefully this helps.

Happy Tweening!

[annarack]

Hi @Rodrigo, thanks for your response!

 

Sorry I guess I wasn't clear enough there. The problem is that I want the child elements to behave the same regarding the fade in and out. So they should fade in at the same positions at the  bottom and out towards the top of the screen. But they should have different speeds. At the moment the fade in and out happens at he wrong time as soon as I add the data-speed property.  For example if I add the data-speed property to the wrapped element which is also used for the scrollTrigger, it fades in more or less correctly but out already at the middle of the screen. 

The latest version of ScrollTrigger didn't make a difference to that on my side. 

[GreenSock]

Sorry about the confusion there, @annarack. There was indeed a problem in how it was calculating the end values in that scenario, and it should be fixed in the next release: 

See the Pen JjmmWzZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

That uses the beta file which you can use on CodePen: https://assets.codepen.io/16327/ScrollSmoother.min.js (you may need to clear your cache). 

 

Also, notice in that demo above that you've got a logic problem where you're applying the data-speed to the CHILD, but you're using its parent as the trigger, thus it won't fade where you think it will. I added a blue border on the ".fader" elements so that you can see that GSAP is doing exactly what it should be according to your code, but I suspect you want to tweak your setup/logic so that it behaves differently. 

[annarack]

Perfect, thanks a lot @GreenSock! Any idea on when the next release is going to happen?

I was just confused on why its not working when applied to the parent, so I also tried the child version. But makes total sense why its not behaving how it should there. Thanks! 

[GreenSock]

@annarack 3.12 is released. You can get it now. We'll probably announce it more broadly next week.