Jump to content

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

How to jump to the start of the timeline when there are no more .nextLabel()'s and then animate .tweenTo(tl.nextLabel()) (trying to create a slider with GSAP)

Recommended Posts

I've used several slider plugins in the past and now thought: "I'm already using GSAP why don't I try creating a slider based on it". I saw @Carl's  latest video (snorklTV youtube.com/watch?v=4Q5uzDaTlDU)  and it seemed like a great starting point of creating a slider. 


I've implemented an `autoPlay()` function which gets call every `X` amount of seconds to `.tweenTo()` the `.nextLabel()` which all works great. The point I'm stuck on is how to play to the end of the timeline when there are no more `.nextLabel()`'s, then jump to the beginning of the timeline (I thought `.seek(0)` would work, but I think I'm missing a step) and then `.tweenTo(timeline.nextLabel())` again, with this I'm getting the following error in the console `timeline.tweenTo(...).seek(...).tweenTo is not a function

See the Pen yLVdBOe by mvaneijgen (@mvaneijgen) on CodePen

Link to post
Share on other sites

If you're going to do that sort of thing I'd do it like this, where you have to clone the first slide and be more careful about handling the looping:

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


Also note that I used autoAlpha and the .slide element as the element reference (as opposed to the img) so things are clickable.

  • Like 5
Link to post
Share on other sites

@ZachSaucier thanks! This seems to work great! Again not really a GSAP question, but just a JS solution, I've never heard of `.cloneNode` thanks for that. Now I only need to find a solution for the next and previous buttons to do something when at the end or beginning and clicking next or previous respectively, right now it will animate fully to the latest label when at the beginning and clicking the previous button. 


Again thanks, this helps a lot.

  • Like 1
Link to post
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.