Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Rob Fleming

Horizontal screen slide - slide animations on view

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.