Peach2tm Posted July 1, 2021 Share Posted July 1, 2021 I have this simple timeline and would like to have the following 3 buttons: ">" play next step and pause "<" go one step back - or maybe if possible play latest step in reverse - and pause "autoplay" play the remaining timeline without pausing. I have tried adding .pause() after the first .to() to my timeline, but it seems that the .pause is called before the first .to() is finished. Can anyone point me in the right direction? Thanks See the Pen xxdGVrJ by anders-wibroe (@anders-wibroe) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted July 1, 2021 Share Posted July 1, 2021 Hey @Peach2tm, There are different options / ways. Here are a few See the Pen 3e1f3430764662349f3009efbfa2c064 by mikeK (@mikeK) on CodePen Sorry it is still the old GSAP syntax! Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 1, 2021 Author Share Posted July 1, 2021 Thanks again. This is exactly what i was hoping for. I'll figure out how to update it to current syntax Link to comment Share on other sites More sharing options...
Carl Posted July 1, 2021 Share Posted July 1, 2021 @mikel's approach has all the bells and whistles. this reminded me of a tutorial I have on using addPause() it uses next and previous buttons to navigate through a simple timeline that has addPause() calls added after each number animates in. See the Pen oNXNEJQ by snorkltv (@snorkltv) on CodePen Your post prompted me to explore adding an autoPlay feature to that demo. My initial autoPlay solution was similar to Mikel's where I'd check if autoPlay was true and if so I would just continue playing. In the context of my demo it just made the timeline speed by with each number coming in and out in rapid sequence. I added a feature that when autoPlay is enabled the timeline would hold on each section, show a progress bar, and then move to the next animation when the time expires. See the Pen 5e63e8b990367720da762db0a16d84ac?editors=0011 by snorkltv (@snorkltv) on CodePen In the demo above hitting next or prev will disable the autoPlay feature and the user can navigate at their own pace. When the timeline ends autoPlay is automatically disabled and the user can either hit next or autoPlay to restart. This will most likely be covered in detail in a new CreativeCodingClub.com lesson in the near future. In the meantime, hopefully these demos from Mikel and I help. 3 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 1, 2021 Author Share Posted July 1, 2021 @Carl Thanks dude, that looks really nice too! What if your step 3 was a .call(removeBox) Function removeBox(){ var elem = document.getElementsByClassName("b0")[0]; elem.remove(); } How would you make that work with next step and previous step? I image you would have to do something like: function removeBox(){ if(!tl.reversed()){ var elem = document.getElementsByClassName("b0")[0]; elem.remove(); } else{ //create the element again } } Or maybe instead of removing it, you would just detach the element from the DOM and keep it around incase the user wanted to go in reverse? I imagine you might have a more elegant way of solving this. Link to comment Share on other sites More sharing options...
Peach2tm Posted July 1, 2021 Author Share Posted July 1, 2021 Come to think about it maybe instead of removing the element i should just set visibility:hidden 1 Link to comment Share on other sites More sharing options...
Carl Posted July 1, 2021 Share Posted July 1, 2021 yes, visibility hidden is MUCH better to manage than adding and removing elements. 2 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 2, 2021 Author Share Posted July 2, 2021 Okay, but what about combining .call() and .addPause() in a timeline, that is controlled step by step: See the Pen RwVPMYp by anders-wibroe (@anders-wibroe) on CodePen As you can see, the pause on line 29 (before the .call()) is not observed. For it to work i have to add an empty Tween before the .call() like this: .addLabel("Step4") .to("#box3", {}) .call(addBox,["MyBox"]) .addPause("+=0", checkAutoPlay) Is that working as intented, or have I miss understood how to use .call() and .addPause()? Link to comment Share on other sites More sharing options...
Peach2tm Posted July 2, 2021 Author Share Posted July 2, 2021 @Carl Does it have to do with the "+=0" in addPause() on line 30 can't point to a .call() and therefore points back to the prevoius .to("#box3", { y: -100 })Thereby overlaping with the .addPause() on line 26? Link to comment Share on other sites More sharing options...
Carl Posted July 2, 2021 Share Posted July 2, 2021 Call() and addpause() are tricky as they don’t have durations. Putting them at the same time could get interesting. Maybe the function you use in the addpause should run both your autoplay and addbox. I’m not around a computer for a few days and can’t really help any further but perhaps someone else can shed more light if necessary. Link to comment Share on other sites More sharing options...
OSUblake Posted July 2, 2021 Share Posted July 2, 2021 4 hours ago, Carl said: Maybe the function you use in the addpause should run both your autoplay and addbox. Yeah, I'm not sure what you're trying to achieve, but if you need to two functions to run at the same time, then combine them. 1 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 3, 2021 Author Share Posted July 3, 2021 I'm trying to make a timeline which can be step-by-stepped in both directions, where events are add on the fly in real time via ajax. Some events require creating/deletion of new element like such: function addElement(id,element,parentId,append){ let elementExists = document.getElementById(id); if (elementExists) { elementExists.remove(); } else { let parent = $('#'+parentId); if(append) parent.append(element) else parent.prepend(element) } } You are right that i could add tl.pause() to the end of addElement (or in case of the codepen "addBox") and that removes the need for a dummy-tween before the .call() when stepping forward. Problem is, i still need a dummy tween after the .call() when stepping backwards for it to work. It looks stupid, but surrounding the .call() with dummy tweens works: See the Pen KKmddQR by anders-wibroe (@anders-wibroe) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted July 3, 2021 Share Posted July 3, 2021 1 hour ago, Peach2tm said: It looks stupid, but surrounding the .call() with dummy tweens works: Have you tried a small delay to your pause, e.g. +=0.0001? 1 hour ago, Peach2tm said: I'm trying to make a timeline which can be step-by-stepped in both directions, where events are add on the fly in real time via ajax. Not sure that is really a good fit for a timeline. I would probably use some type of data structure, like a linked list so I could add in more logic for handling complicated task like ajax requests. Demo of a linked list. See the Pen GRmpory by GreenSock (@GreenSock) on CodePen 2 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