Sahil

We had similar question yesterday, where @Carl posted the following solution. I tried to implement it for height, though there is 1 problem. You still need to record 'auto' height and you can't do that without pausing ongoing animation. You can solve this by using a wrapper, and use height of child as 'auto' height and animate wrapper to expand or shrink. UPDATE: Another demo with slight adjustments to calculate paused animation.

thanks, it was headache. After seeing Blake's jQuery Plugin School certificate, I am looking forward to getting my GSAP Draggable School certificate.

Explains why it wasn't playing in Firefox.

Here is the demo with timeline, for future queries please post a codepen demo, that way it is a lot easier to answer. Also, in some cases it makes a lot more sense to animate classes, in other cases you can use this method.

Here is the demo. I would regenerate entire timeline and keep track of progress, so you won't see any jumps.

Tweens cannot be modified, you will have to regenerate the tween on resize.

No, codepen links won't work outside of codepen. I will let @Carl @GreenSock answer rest of the questions.

@alaric You are not supposed to use club license plugins in public repository. I have removed the link from your post, it will be best if you remove it from repository as well. @GreenSock @Carl

Here is the demo. You should be able to refactor it and make it reusable on multiple containers. Also, some calculations can be done differently but this should work for you.

Oh right, you can use position parameter with absolute value 0. So irrespective of whether your animation is long or short, it will always be at least 10 second long. You don't need all the unnecessary calculation or duration etc.

you can do (10 - tl.duration() < 0 ? 0 : 10 - tl.duration()) That will return zero if duration is less than zero.

@WilliamBay btw you don't need callback in this particular situation, you can use a master timeline and labels to keep things simple. Also, you might be able to use custom ease to achieve same affect as throbber. Plus, you can set transformOrigin only once and setting it to '50% 50%' works instead of using absolute values. Finally, I don't know if it was intentional use or not, but when you use fromTo tween, you are animating particular property from certain value passed in first parenthesis to a certain value passed in second parenthesis. So in this situation you don't need fromTo tween. Neither do you need yoyo property, instead of jumping to start position while repeating yoyo animates it in reverse.

No I mean, even if you select animation to repeat from GSDevTools option, it ignores callback. I now understand what is happening but I guess everyone will expect the callback to work.

You are trying to use timelines as functions, onRepeat callback expects a function. Also you were passing timeline to onload event, which throws error. Also, while using GSDevTools onRepeat callback is being ignored, @GreenSock can explain why it is happening.

It is css property 'transform-origin'. // You can set it on current Tween TweenMax.to('.slide', 1, {rotation: '+=360', repeat: -1, transformOrigin: '0% 100%'}); // Or you can set transformOrigin using set externally, // which basically shows that if you change origin once // it will affect all tweens on that element not just for 1 particular tween TweenMax.set('.slide', {transformOrigin: '100% 100%'}); TweenMax.to('.slide', 1, {rotation: '+=360', repeat: -1});

Here is the demo, I am using TweenMax.delayedCall() to call a function that will animate each block with delay.

Maybe this is what you are looking for, you can use '+=360' so instead of animating to 360 it will animate to 360 plus whatever current value is.

I googled it and found out what could be happening but @Jonathan or someone else can explain it more accurately. When you use transform on element, a new stacking order is created for it. As you are transforming parent which doesn't have z-index of it's own, a new stacking order for it and it's child elements is created. As a result, the child element with z-index remains below the 'background_exit' because it is in different stacking order. You can fix it by setting z-index of parent to 1. (Which I guess brings it in normal stacking order)

No it doesn't remove z-index. You can check console in demo. You are probably looking at element with id 'background_exit' that covers the button.

So I found three ways to do it, it depends on what you are trying to do and will be a lot harder to control if it is complicated. 1. You can use TweenMax to animate timeline's 'time'. 2. You can use timeline's tweenTo or tweenFromTo method, then you can use tweenTo's callback to resume the timeline. 3. Finally you can use tweenTo or tweenFromTo to play entire timeline, it will give you a lot more control. I have left some comments, go through docs of respective method if you don't understand. Otherwise feel free to ask more questions.

It is because you are using position parameter and passing absolute values, and because you are animating same elements and their same property, both tweens are causing a conflict. Not really sure what you are trying to do, so you might want to take a look following two tutorials. https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=QO1mLs96krY

Can you post a demo? It will be far easier to see what's going on.

Ya it works, though not sure if there are any technical details you should know of.

Please post a codepen demo to show what exactly is happening, without demo it is hard to suggest anything.

Always try to post a demo even if it isn't working, sometimes problem can be completely unrelated to JavaScript so it is easier to find it plus we have something to work with. What you need is labels, you can pass string as label and any tweens with same label will start together irrespective of their position. You were doing it mostly correct though just wasn't using labels correctly. Following are two tutorials that will explain in depth, https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=QO1mLs96krY