Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

friendlygiraffe

ShockinglyGreen
  • Content Count

    250
  • Joined

  • Last visited

Community Reputation

12 Newbie

About friendlygiraffe

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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:
  2. 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
  3. 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
  4. I'd love to use SplitText, but the ad server I'm developing for only like Google hosted JS, hence TextPlugin
  5. 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
  6. 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!
  7. 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
  8. 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
  9. I was just thinking how much I miss Flash! Thanks for this, really handy
  10. I found this which animated SVG polygon points, could something similar be done but without the draggable functionality ? https://codepen.io/osublake/pen/QdbQjN
  11. This is certainly something I can have a play with, thanks.
  12. Thanks Mikel - Not really, I want the points to animate individually, rather that a uniform scale
  13. 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?
  14. 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!
  15. 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!
×