Jump to content

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

slider indicators click to the correct spot in my timeline

Recommended Posts

I am working with one of Carl's demos, and I am trying to figure out  how to make my slider go to the appropriate spot in my timeline, when I click one of the slide indicators, which are the red circles in my codePen (the 3rd dot when clicked, should go to the 3rd slide, and so on).


I added a dynamic data-id to each of the circle navigation items and the same to each of the slide elements—now I am trying to see how I can sync up the data-ids so that the correlating slides (or the progress of my timeline) matches up with the correlating circle navigation items, when I click one of the red circles. I won't know how many slides there will be in the end so, I can't assume there will always be 5 slides like in my demo.


My CodePen shows how it's functioning now, but the red circle navigation indicators only go to the next slide, since that's how I have it setup. Is there a way to accomplish the matching up of each of the .navButton's data-id's to the corresponding timeline progress ? I was thinking something like this: tl.progress(dataId*10).play();

See the Pen RwZKVGd by celli (@celli) on CodePen

  • Like 1
Link to comment
Share on other sites

This is definitely a logic issue (usually outside the scope of help we can promise in the forums), but rest assured it's totally possible. Before heading down that track, though, I wanted to confirm that you really want to build everything in one timeline like that because if you want the user to be able to skip around, it's pretty common to want to have one slide transition out before the next one transitions in which wouldn't be feasible if you've got everything hard-wired into one long timeline. In other words, you may have nice transitions between each slide when played all the way through linearly, but if you jump from slide 1 to slide 4, for example, you'll just see a hard jump/cut. 


If I were building this, I'd take a very different approach - I'd have a function that's in charge of transitioning between slides and then everything can be dynamic. Keep track of what the current slide number is (a variable) and then use a function, sorta like: 

function goToSlide(index) {
  gsap.to(slides[currentIndex], {autoAlpha: 0}); // current one out
  gsap.to(slides[index], {autoAlpha: 1}); // new one in
  currentIndex = index; // update variable

See what I mean? 

  • Like 4
Link to comment
Share on other sites

yes, I see what you mean. Okay, I will re-think this! Thanks.

Link to comment
Share on other sites

Hi Celli,


You were really close. 

You were already accessing the dataID and you had a label inserted with that dataID so the trick is just to play() or pause() at that label like so



The way you have things set up you have no way to turn off the autoplay (yet) so I chose to pause the timeline and the timer just so you can see the buttons kind of work.


demo with hard-cuts to each slide using buttons (auto-play disabled)

See the Pen wvqJEQY?editors=0010 by snorkltv (@snorkltv) on CodePen



Also in my course B-sides, Bonuses and Oddities (which you have) I have a 2 part lesson showing how to build out a timeline like this with autoplay and interactive buttons. Look for the lesson  Gallery with AutoPlay Part 1: File Setup / Basic Functionality


And to do things the way Jack suggested, I have a 3 Part series immediately following those lessons called Breaking free of the timeline mindset. It walks you through building a gallery with non-linear navigation that supports "in and out" animations on each slide and an autoplay feature.


Keep up the great work. There's a dozen ways to do this stuff and sometimes you just have to pick what you're comfortable with and go from there.



  • Like 3
Link to comment
Share on other sites

Thank you Carl. Great advice from a great teacher.

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.