SVG Animations with GreenSock Free Download
3 Likes Comment

SVG Animations with GreenSock 1

SVG Animations with GreenSock   Free Tutorial Download

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.

 

 

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:

 

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<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.

 

01
02
03
04
05
06
07
var tomato = $("#tomato"),
    bracketRight = $(".bracketRight"),
    bracketLeft = $(".bracketLeft"),
    tomatoLeft = $(".tomatoLeft"),
    tomatoRight = $(".tomatoRight"),
    tomatoLeaves = $(".tomatoLeaves"),
    tl;

 

Create a timeline for our SVG animation.

 

01
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.

 

01
02
03
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.

 

01
02
03
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:

 

01
02
03
04
05
06
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.

 

01
02
03
04
05
06
07
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.

 

Download  SVG Animations with GreenSock  Free

Go to Download Tutorials Page

Password : freetuts.download

How to bypass Google Drive download limit for shared files


You might like

About the Author: minhtri

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.