friendlygiraffe

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