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.

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→

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.