Horizontal slideshow, to instantly switch between slides at certain scroll positions

[McSteer]

Hello!

 

I'd like to make this horizontal scrolling animation, to not be so "analog".  Meaning I'd only want it to switch at certain scroll positions, until then it should just stay on the current slide. 

Thank you!

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

[GreenSock]

You'd need to add logic so that a function gets fired at the right spots that then animates the playhead accordingly. You could add those to a timeline with equal spacing, for example, and then when the scrub goes past each of those spots, it animates things accordingly. 

[McSteer]

Thank you for your reply @GreenSock !

I decided, to try and make what I want from scratch, i whipped up a little demo, which might not be the most optimal way to solve the problem, but it kinda works, but I also got into another problem.
I don't know if this is even on topic, if not i'm sorry, but I'm trying to find out, how to continue an animation from existing "x", meaning that I'd like the slides to continue on to the green slide instead of restarting the animation from the red slide.

See the Pen xxPRadG by thesbeve (@thesbeve) on CodePen

 

 

Edit: should i use timeline? sorry i'm really new to GSAP

[GreenSock]

By default, animations with a ScrollTrigger attached will render immediately which locks in the start/end values but the way you built things makes that undesirable because you're using relative values and you're trying to animate the same thing and make things build upon the previous animation(s). So you should set immediateRender: false so that it waits until the very first time it gets triggered to lock in the start/end values. 

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

 

You could definitely use a timeline instead. There are many, many ways to approach this actually. Here's another more dynamic way: 

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

 

I hope that helps. Enjoy the tools!