Peach2tm

That is perfect. Thank you so much!

@Cassie Thx for your replies. Great input! One thing I can't figure out is why y: (or translateY for that matter) works the way it works in this example: https://codepen.io/anders-wibroe/pen/ExmvjjZ I'll admit, I'm pretty new to css transforms, but it seems that setting y: is relative to the elements original position and not it's current. As you can see in the example the box moves from y=200 to y=100 and then starts yoyoing between y=100 and y=300 as the yoyo's y:-100 seems to be from the elements starting position. Is there anyway to make the yoyo's y:-100 based on the elements current position - or should i simply use top: and then calculate the offset?

Am I doing this correct - or is there a better way? I have this Timeline which is stepped by clicking ">". The following is what i would like to have happen: Click ">" to start TL: Box 1 moves up and starts yoyo'ing Timeline pauses but Box 1 keeps yoyo'ing Click ">" to start TL again: Box 2 moves up and the yoyo stops Timeline pauses Click ">" to start TL: Box 3 moves up and Box 1 starts yoyo'ing Timeline pauses but Box 1 keeps yoyo'ing I've put the start and stop yoyo on a separate TL. Is this how you would do it?

Thanks dude! Are the the tl.to('#plane',{x:100}) tl.to('#plane',{y:100}) before the label not considered events/callbacks - or why are they still observed?

I dont quite understand the logic of gsap here, so I would be happy if anyone could explain why an animation added before a label is not playing, if the timeline starts paused at the label.

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: https://codepen.io/anders-wibroe/pen/KKmddQR

@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?

Okay, but what about combining .call() and .addPause() in a timeline, that is controlled step by step: https://codepen.io/anders-wibroe/pen/RwVPMYp 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()?

Come to think about it maybe instead of removing the element i should just set visibility:hidden

@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.

Thanks again. This is exactly what i was hoping for. I'll figure out how to update it to current syntax

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

Thanks, this works perfectly!

That was easy: gsap.to('.apple', {duration:'random(0.5,2)', y:'20%', repeat:-1, yoyo:true, ease: "power1.inOut"}); Or to update yours: https://codepen.io/anders-wibroe/pen/NWjqxpJ Problem now is that the use of yoyo:true makes the animation wait to reserve until the end of the duration of the slowest element. How would i make each element yoyo separately?

I have the follow code, that makes my "apple" class move up and down just a bit. It works as you would expect gsap.to('.apple', {duration:2, y:'20%', repeat:-1, yoyo:true, ease: "power1.inOut"}); But it's too in sync for my taste, and what i really want to do is offset each element just a bit. Is there a way to randomize each elements duration and y-offset - or would i have to animate each object individually? Thanks.