Freehand Sam Posted June 29, 2022 Share Posted June 29, 2022 What I'm trying to achieve is the effect of the individual slides (.number-slides) scrolling up very quickly, then locking and holding for a second, then releasing to quickly scroll to the next. The client wants it to feel more like each slide is "clicking" into place, as opposed to the smooth scroll. Essentially like a vertical carousel slider, but it's controlled via scroll. And pinned while it runs through the 3 slides. See the Pen GRxKgPY by freehand_sam (@freehand_sam) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted June 29, 2022 Share Posted June 29, 2022 I think I understand what you are talking about. If so then you have to animate the left hand content manually when the scroll hits a certain point. It's a pain to do honestly. Link to comment Share on other sites More sharing options...
Freehand Sam Posted June 29, 2022 Author Share Posted June 29, 2022 5 minutes ago, SteveS said: I think I understand what you are talking about. If so then you have to animate the left hand content manually when the scroll hits a certain point. It's a pain to do honestly. Thanks. Right, I assume I'm going to have to animate each slide separately instead of one long timeline that just animates the height of all three combined for starters. But I'm not even clear from there if it's possible to get a slide to stick and hold in place for a sec before animating in the next slide. Link to comment Share on other sites More sharing options...
SteveS Posted June 29, 2022 Share Posted June 29, 2022 Sure, like you said it's similar to a carousel. It's just a carousel that goes forward or back based on your scroll position. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 29, 2022 Solution Share Posted June 29, 2022 Yeah, there are a lot of ways to approach this. None are super simple. You could have a paused timeline where you animate between the slides (one long linear one that goes from slide one to two, two to three, etc.). Then, use a ScrollTrigger-based timeline that simply has equally-spaced callbacks that trigger a tween to the spot on the paused timeline where the corresponding slide is. You'd just need to sense the direction from the ScrollTrigger so you know which slide to go to. Like if it's going backwards and hits the callback, it'd be going to the previous slide. Forward would be next. Good luck! Link to comment Share on other sites More sharing options...
Freehand Sam Posted June 30, 2022 Author Share Posted June 30, 2022 Thanks. I think this is above my head. If I have time I'll come back to it and play around with the above suggestion. I appreciate your guidance. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now