Using a scrollTrigger Observe However some elements wont animate but only on the way down

[PakoVince]

Hello Everyone. I am still learning gsap and am running into an issue. In a project I was previously using a scrollTrigger and using scrub to make pictures fade in and out of each other. However, I realized if a user scrolls very long they can skip through all of the slides without seeing it. I wanted to make it so if the user scrolled they would have to sit through the animation until it was finished before they would be able to scroll again. After a little research I found that observer was the route to go.

Here comes the issue. I have successfully got it scrolling from one slide to another however the animations when scrolling DOWN and only down don't play. So the image just skips to the next one instead of fading in and out like it does when the user scrolls up. Same thing with the titles (the countries array). They are supposed to fade from 0.2 opacity to 1 and they just skip the animation on the way down. Lastly the subheaderWrappers array and descWrappersArray seem to animate IN fine when scrolling down however the previous index's in these arrays do the same behavior where they just jump to the finished spot instead of animating there when scrolling down. 

Any help is much appreciated I am using HTML SCSS and JS. 

See the Pen vYqLEEy by calebluster (@calebluster) on CodePen.

[Rodrigo]

Hi,

 

Maybe this demo can help:

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen.

 

Another option could be the Observer Plugin as well:

https://gsap.com/docs/v3/Plugins/Observer/

 

This is a demo that combines the Observer Plugin with ScrollTrigger:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[PakoVince]

@Rodrigo I am struggling to fully grasp this concept and cant seem to get it to work with my example. I tried various things and nothing seemed to get me any closer

[mvaneijgen]

Check it out, I'd just wrote a guide how you can use a timeline with labels and have the Observer plugin goes to the next or previous label. Hope it helps and happy tweening! 

 

 

[PakoVince]

@mvaneijgen I am thinking maybe it isn't the right approach for this project. If I step back to the code in this pen, is there a way I can simply disable scrolling for like 1 second as the animation plays? So the second the user scrolls, we disable scrolling, and because directional is true, it will go to that snap point. And scrolling will be disabled for as long as the animation plays, which in my case is 0.75 seconds. (For some reason the codepen link isn't showing but its the same one in my original message I just edited it)

See the Pen vYqLEEy by calebluster (@calebluster) on CodePen.

I really like the way this animates and the functionality is also nice so I would rather not try and integrate the observer if it is avoidable and this is easier.

Edited July 24, 2024 by PakoVince
Codepen link not showing

[mvaneijgen]

Of course you can hack the tools to do what ever you like, we're not limiting you to how you use the tools. That said it is limited to what we can support, and seen that there are solutions build for your questions I would go with those solutions. The Observer plugin is build in to ScrollTrigger, so you don't have to load anything new to use it in your project if you're already loading ScrollTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.observe() Hope it helps and happy tweening!