Nikos Xenakis

I managed to solve it in a similar way. But your solution is more elegant. Thanks very much for your time!

I saw it but unfortunately I don't understand how to solve this. I see combinations with scrollTrigger, and in these cases how fast the user scrolls matters. It would be ideal to just set preventDefault to false after the timeline is finished. Sorry for that, I read what you are posting, but there are also other implementations that don't let me see the solution clearly.

Your response and edit to the codepen was extremely helpful. I saw the other thread, but I have one small probem still. You approach seems that doesn't require pin anymore. And setting preventDefault: true has a similar effect. However I want to keep scrolling on the page when the timeline finishes. How to achieve that? And how to have control on when the observer enables and disables? Thanks again!

I didn't know about the Observer plugin. Thanks. I read some of the documentation and watched the video, but I can't seem to find a way to do exactly what I want. Now I can trigger a timeline on scroll up or down, but I don't know how to trigger a second timeline on the second scroll, a third timeline on the third scroll and so on... Also, had to add some repetitive code to make sure that the timeline will trigger more than one time and don't interrupt another timeline. I think this is not the best practice. Also, didn't even start checking how this would work with the pin, but i think this won't be a big problem. Here is the CodePen: https://codepen.io/straktormedia/pen/vYVxWpb

Hello, I would like to create an animation with a pin element, one one scroll. I want to trigger 3 separate timelines, one after the other (with three scrolls respectively). However I don't want to use scrub, because I want each timeline to play with its specific duration, and only when it has finished, the next one to start. If I disable scrub, all 3 timelines play at once. I need to scroll three times, and trigger one timeline each time. It would be something like triggering each timeline with a click. But I need this with a scroll. And the tricky part is the pinned section. So the scrollY is different depending on how much the user scrolls. I need to somehow determine that one scroll will trigger the timeline, no matter how fast this scroll is. Maybe this is not even possible, but I am giving it a try. Check the demo on codepen. I want this but without scrub. Thanks a lot in advance and congrats for the awesome work!

Hi and thanks for your reply! I wanted to ask for support. Many times I get stuck as I am now getting familiar with gsap in combination with JS. Where should I ask about that kind of topics from now on?

Thank you very much!

This effect is great but how I could make it "non-interactive" ? When I comment out the scrollTrigger property it just executes once. If I set repeat:1 or autoplay or something like that, it just does the same thing all over again which is not what I want to achieve. I would like a smooth infinite crawl effect with the ability to set the speed. Also, it would be nice to leave no white "gap" when there are no more images left, and rather show all the images again. Thanks in advance and congrats for the awesome library!

I want to create a simple opacity animation to my text (".pinned-img-fade-card__text") , while the container (".pinned-img-fade-card") is pinned. As soon as the animation finishes I want to move to the next container (".pinned-img-fade-card"). The problem is everything moves too fast and if I change the end property the animation experience is good, but the I get a huge gap until the next container. Duration and Delay have no effect. I sense that it has something to do with scrub, but I cannot figure it out. Could you please help me have a slow-mo kind of animation without huge gaps in between sections? Thanks!