Special Offer

40% Off, Use coupon Cyber22

days
0
2
hours
0
8
minutes
2
0
seconds
2
6
How To Animate SVG With GreenSock

How To Animate SVG With GreenSock

Now that we’ve created our SVG, lets try to animate it using GreenSock.

In short we will animate Ihatetomatoes logo to look exactly like my YouTube introduction clip.

Here’s the final result.

VIEW DEMO

The following steps were also used to create a more complex GreenSock project Merry SVG Christmas.

Merry SVG Christmas

1. Initial setup

For this demo I’ve simply downloaded the default HTML5 Boiler Plate and included a reference to GreenSock at the bottom of my index.html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>

Now it’s time to include the sexy SVG and start animating.

2. Include SVG

Last time I’ve talked about how I’ve created my first SVG, so lets include the Ihatetomateos <svg> in our html file.

3. Additional CSS classes

To target the individual parts of the logo, I’ve created more meaningful classes and removed the default .s classes.

  • .bracketLeft
  • .bracketRight
  • .tomatoLeft
  • .tomatoRight
  • .tomatoLeaves

I’ve also deleted the 2 extra paths which I have no idea why they were in the SVG exported from Illustrator.

5 shapes is all we need to create the Ihatetomatoes SVG animation.

Sweet.

4. Grouping SVG shapes

The full tomato and leaves will be falling down from the top together, that’s why I’ve also grouped these three shapes together and gave this group an id #tomato.

The final code of the Ihatetomatoes SVG would look like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ihtLogo" x="0" y="0" viewBox="0 0 308.8 152.1" xml:space="preserve" enable-background="new 0 0 308.8 152.1">
    <style>
    .tomatoLeft,
    .tomatoRight{
        fill:#D74022;
    }
    .bracketLeft,
    .bracketRight{
        fill:#4D4D4F;
    }
    .tomatoLeaves{
        fill:#95D600;
    }
    </style>  
    <polygon points="238.3 152.1 225.6 139.3 283.4 81.5 225.6 23.8 238.3 11 308.8 81.5 " class="bracketRight"/>
    <polygon points="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/>
    <g class="tomato">
        <path d="M139.7 17.2C106 18.3 78.6 45.7 77.5 79.4 76.9 98 84.2 114.9 96.3 127l91-91C175.2 23.9 158.3 16.6 139.7 17.2z" class="tomatoLeft"/>
        <path d="M122.3 127c12.1 12.1 29 19.4 47.6 18.8 33.7-1.1 61.1-28.5 62.2-62.2 0.6-18.6-6.7-35.5-18.8-47.6L122.3 127z" class="tomatoRight"/>
        <path d="M128.6 10.9c0-1.5 0-3 0.1-4.5 0.1-1.4 0.8-3.1 0.3-4.5 -0.8-2.5-4.3-2.6-5.5-0.3 -1.8 4.5-2.5 9.2-2.4 14 -6.7 3.2-17 2-24-0.2 5.1 4 11.2 6.7 18 7.5 -6.5 3-12.5 7-17.6 11.9 13.7-9.2 32.4-7.6 44.4 3.7 -1.3-4.6-3.5-8.7-6.4-12.3 7.3-5.2 16.3-7.4 25.1-6.3 -7-2.1-14.2-3-21.5-2.8 3.2-2.1 6-4.7 8.3-7.7 -6.3 3.5-11.4 4.1-18.5 4.4C128.8 13.2 128.7 11.6 128.6 10.9" class="tomatoLeaves"/>
    </g>
</svg>

5. Setup Variables And Create Timeline

Now we’ll go to main.js and setup our variables.

var tomato = $("#tomato"),
    bracketRight = $(".bracketRight"),
    bracketLeft = $(".bracketLeft"),
    tomatoLeft = $(".tomatoLeft"),
    tomatoRight = $(".tomatoRight"),
    tomatoLeaves = $(".tomatoLeaves"),
    tl;

Create a timeline for our SVG animation.

tl = new TimelineMax();

We’ll continue by joining the tomato together.

6. Create A Whole Tomato

Before clearing the stage, we will also join the tomato into one object, by moving the left side and leaves close to the right side.

tl.set([tomatoLeft], {xPercent: 23.6});
tl.set([tomatoLeaves], {xPercent: 41});
tl.set([tomato], {left: 10, rotation: 13, transformOrigin:"center center"});

We are also moving the tomato and rotating it slightly clockwise to make the leaves right in the middle.

See how we are also defining the point around which we want the tomato to rotate.

The transform-origin on SVGs behave very inconsistently across the browsers as Greensock explains here.

7. Clear the stage

Now we can clear the stage and move the elements outside of the viewport.

For this we’ll use .set, which applies the specified styles without any animations.

tl.set(tomato, {yPercent: -100});
tl.set(bracketRight, {xPercent: 100});
tl.set(bracketLeft, {xPercent: -100});

In other words it will move all elements to the defined position on page load.

8. Animation Sequence

The animation itself consists of these tweens:

  • brackets back to xPercent: 0
  • tomato back to yPercent: 0 with bounce easing
  • tomato rotate to 0
  • tomato split in half

The GreenSock SVG animation timeline code would look like this:

tl.to([bracketRight,bracketLeft], 0.3, {xPercent: 0, ease:Power4.easeOut}, 2)
    .to(tomato, 0.5, {yPercent: 0, ease:Bounce.easeOut})
    .to(tomato, 0.2, {rotation: 0, xPercent: -4})
    .to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0}, "split")
    .to(tomato, 0.2, {rotation: 0, xPercent: 0}, "split")
    .to(tomatoRight, 0.2, {xPercent: 2}, "split");

If you look closer on the YouTube intro animation, you’ll see that a few tweens are animating at the same time.

That’s why I’ve created a label ”split” and making the last three tweens animate at the same time.

9. Stagger Text Animation

The last thing we will animate is the text ihatetomatoes.

I could include the font as a web font, but instead I’ve exported another SVG with the text.

And we’ll animate it using the .staggerFrom method.

tl.to([bracketRight,bracketLeft], 0.3, {xPercent: 0, ease:Power4.easeOut}, 2)
    .to(tomato, 0.5, {yPercent: 0, ease:Bounce.easeOut})
    .to(tomato, 0.2, {rotation: 0, xPercent: -4})
    .to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0},"split")
    .to(tomato, 0.2, {rotation: 0, xPercent: 0},"split")
    .to(tomatoRight, 0.2, {xPercent: 2},"split")
    .staggerFrom(letters, 0.01, {autoAlpha: 0}, 0.03);

The duration of each animation is only 0.01 and the stagger delay is set to 0.03, this makes the letters appear almost instantly after each other.

Final SVG Animation

You can explore the code and all the GreenSock Tweens in the CodePen below.

10356

VIEW DEMO

Not working in your browser?
Stay tuned for an updated crossbrowser version and the lessons learned while creating this animation.

Conclusion

There you have it, a video sequence of my logo recreated using SVG and animated using GreenSock.

Next time we’ll have a look how we could trigger this animation on scroll and have some fun with ScrollMagic.

Until then, happy coding.

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

10 thoughts on “How To Animate SVG With GreenSock

  1. Tóth Márton

    This is really helpful. I’ve always wanted to create SVG animations and your article is really, really inspiring. Thank you!

    Reply
  2. Simon Pedersen

    Very nice animation Petr. Have you tested this in IE11? I am currently animating -tags within a rather large SVG, and IE11 won’t do any rotate animation on the -tags.

    When I try your animation in IE11, it only partially works.

    Reply
    1. Petr Tichy Post author

      Hey Simon, I know there are a few browsers not correctly animating percentage transform values on SVG and group element . That’s probably what’s broken in IE11. Try to use absolute pixel values. Cheers

      Reply
  3. John Parrott

    Hello,

    I currently used this tutorial but I found that IE 11 will not run the svg on its browser.

    Any suggestions on how to animate a svg on IE?

    Thank you !

    Reply
    1. Petr Tichy Post author

      Hi John, as I mentioned at the end of the post, I haven’t tested this in all browsers, but can you clarify what you mean by “IE11 will not run the SVG”?

      Is the SVG not showing up or the animation not playing?

      Check some of my other SVG animation tutorials in the meantime.

      Cheers
      Petr

      Reply
  4. Mike T

    Hi,
    I’ve noticed a slight ‘bug’ when I hit ‘View Demo’. For a split second, the entire finished animation is visible. I’ve had this same problem on my own SVG animations and wondered if it’s just a browser limitation, or if there is a way around this?

    Many thanks,
    Mike.

    Reply
    1. Petr Tichy Post author

      Hi Mike, you can hide the SVG by default using CSS and then show it using JS. That way you won’t see the split second flash. Hope that helps.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.