friendlygiraffe

Sure I will go down that route, I was just checking there wasn't a built-in method. GSAP usually tweens arrays automatically, but I realise this is more complex Do you know how I can time the tweens of each word to match as if the sentence was being Tweened? Eg: the word IS would animate quicker than SOMETHING By the way: I am not using SplitText for this

Here's a new method which depends on the whole string being grouped into spans, i'm nearly there: https://codepen.io/friendlygiraffe/pen/qBaroKJ The questions I have are: How can I make the timeline loop through the spans array and animate all the words at adjusted speeds? There is also a delay at the beginning. Thanks!

Thanks, that's great. But it's a dynamic thing. So the text has to be in one div I probably should have specified this originally! Updated the codepen: https://codepen.io/friendlygiraffe/pen/YzGZree

I know the TextPlugin is not supposed to support nested HTML tags, but I'm trying to tween the colours of a paragraph, which doesn't animate the styled word's letters individually. Wondered if there was a way around this? Unfortunately, I am not allowed to use SplitText for this project, otherwise I would have. Thanks

I was just thinking how much I miss Flash! Thanks for this, really handy

I found this which animated SVG polygon points, could something similar be done but without the draggable functionality ? https://codepen.io/osublake/pen/QdbQjN

This is certainly something I can have a play with, thanks.

Thanks Mikel - Not really, I want the points to animate individually, rather that a uniform scale

I had a look at canvas, and it seems to use greensock with it, I'd have to port it through something like pixijs. Is there a more straight forward approach?

Hi, what's the most efficient method for animating polygon points in an SVG? Here's the result I'm looking for from the CodePen attached: I'm open to using plugins, but the closest I found was morphSVG, which I'm not sure is the method I want to use (Creating 2 separate SVGs). There is a possibly that this will go in a 3rd party server HTML creative, in which case I'd need a method that doesn't use these, but happy for plugin suggestions for now Thanks!

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