friendlygiraffe

That is exactly how it is supposed to animate, but I was trying to keep the end Tween in one line. The first tween has the luxury of being on one line: tl.staggerFrom(".circle", 1, {x:300,autoAlpha:0}, 0.2); Whereas the end tween require 2 lines: tl.staggerFrom(".circle", 0.5, {y:"-30px", immediateRender:false}, 0.2, "end"); tl.staggerTo(".circle", 0.5, {autoAlpha:0.5}, 0.2, "end"); If this is the correct way of doing it then that's fine, I just thought I might be missing a trick. Thanks!

Thanks, that's closer to what I mean, but here's a better example. https://codepen.io/friendlygiraffe/pen/RdEWXJ I want the animation at the "end" label to retain the alpha as it would if immediateRender was true. is is this possible without changing the last animation to a staggerTo? Thanks again

This is exactly what I wanted to achieve. Sorry for the confusion. I had tried immediateRender:false, but only in the Timeline, not individual tweens Would I have to specify the x value in .set? Just checking there isn't an initialise/reset properties method. I looked into ClearProps but didn't get very far

Hi, I was wondering how I would go about resetting a group of elements before another 'from' command is fired? I don't want the y:"-=20px" tween to be initialized when starting the timeline, and when they are animated from y, I want them to start from the original x. I've tried a .set command but didn't work for what I want.

Yes that works too, I see what you mean now @GreenSock Jack. Thanks

Thanks all, sorry for the delay. I've made another pen to demonstrate what I'm trying to achieve. It's like @GreenSock's pen, it stores the height in a variable on initialization. But I was trying for a method without storing the height as a variable. I'm assuming that this is the only way now. Thanks again! https://codepen.io/friendlygiraffe/pen/xBpKWN

Thanks, but unfortunately the heights aren't consistent, they're expanded to the content within them. And yes, scaleY stretches the content within. Appreciate the reply

Apologies if I haven't explained myself. So there will be several containers which need to remain hidden until an animation is triggered by a mouseclick I could make every div a from timeline and set it to paused:true, I just wondered if there was a simpler way

No because I want to set the height of the div to 0 before I animate it, thanks

I want to set the height of a div to 0%, then animate the height to 100% of it's original size. This works with px, but since I don't know the exact height in px I'm using percent instead. I could get the height using .clientHeight; and store it in a variable when initialising, but I wondered if there was an easier way. Thanks

Hi, is it possible to replay a child timeline. See the Codepen URL for what I mean. It resets it, but doesn't play. Thanks

Ah, add it afterwards. Nice and simple, thanks

Hi, without using absolute values, is it possible to add a Child Timeline to another without affecting the timings of the Parent Timeline? For example in the TL I want the red circle and blue circle to start at the same time Thanks

Thanks all. This worked for me

Hi, I'm having to use an SVG mask (so it works on Explorer) I wondered how I would animate the containing image, without moving the mask? See demo