celli Posted October 25, 2021 Share Posted October 25, 2021 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 25, 2021 Share Posted October 25, 2021 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? 4 Link to comment Share on other sites More sharing options...
celli Posted October 25, 2021 Author Share Posted October 25, 2021 yes, I see what you mean. Okay, I will re-think this! Thanks. Link to comment Share on other sites More sharing options...
Carl Posted October 25, 2021 Share Posted October 25, 2021 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 tl.pause(dataID) timer.pause(0) 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. 3 Link to comment Share on other sites More sharing options...
celli Posted October 25, 2021 Author Share Posted October 25, 2021 Thank you Carl. Great advice from a great teacher. 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