friendlygiraffe

var split = new SplitText("#Headline_Copy", {type: "chars,words" , position:"absolute"}); I had a look through the docs and tried setting position:"absolute" , which amazingly fixes it in IE11, but ruins it in everything else:

Thanks for replying. I'm sure it is an IE problem (Please when will they delete that thing), but the gap underneath appears to be the same size as a line of text , at least when I set the split to 'words'. Which makes me think there's might be a trick in gsap I've overlooked? Any ideas at all appreciated

Finally got round to using SplitText, but I am having a weird bug in IE11. This is how the text looks like without initialising SplitText: This is what happens after I add SplitText, as you can see there is a gap underneath: It works fine in all other browsers, any clues? CodePen attached

I'd love to use SplitText, but the ad server I'm developing for only like Google hosted JS, hence TextPlugin

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!