Horizontal screen slide - slide animations on view

[Rob Fleming]

Hey all,

I found this fantastic Horizontal full-screen slider with controls from Craig Roblewsky. 

What I can't figure out though is how to start a gsap timeline animation when a slide becomes visible. In his example the animations are always on. 

I feel like I'm missing something simple here. =D 
Thank so much. Any direction is appreciated.

See the Pen YRzRyM by PointC (@PointC) on CodePen

[PointC]

Hi @Rob Fleming 

 

Welcome to the forum and thanks for being a Club member. 🎉

 

What you'll need to do is listen for an onComplete event for the slide position. Here's a stripped down version of my slider with just a wheel listener.

 

See the Pen XWZxGVy by PointC (@PointC) on CodePen

 

I've put the spans into a target array and when the slide animation finishes, it rotates the one that corresponds to the activeSlide variable. This is just a simplified example. You could have unique timelines and elements for each slide too. If that's what you need, I'd create the individual timelines and put them into an array. Then you can play the appropriate one when each slide comes into position. 

 

Hopefully that helps. Happy tweening and welcome aboard.

[Rob Fleming]

Thanks so much for the solution and for the original horizontal piece. Incredibly helpful.

For my needs I can probably even get away with animating everything consistently per slide, per onComplete like you have in the example. For now though, I simply need to figure out how to merge that into the original. So far, no luck, but that's part of learning.

Thanks again for taking the time. Really appreciate the solve.