SVG Animations with GreenSock
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.
|
01
|
|
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:
-
bracketsback toxPercent: 0 -
tomatoback toyPercent: 0with bounce easing -
tomatorotate to0 -
tomatosplit 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
https://beaconschool-my.sharepoint.com/:u:/g/personal/zcamacho_beaconschool_org/EcYqMNmdO4hAiB9Txdoo7VkBRfOb3wJorUvR4DSmemxAfg
https://bayfiles.com/50MbwbPeoa
https://drive.google.com/file/d/1_5hLfsiwZbnCQf1ZmApEsi_Dgk9aVwf0/view?usp=sharing
https://drive.google.com/file/d/1AsVqWpFZngL4gtx29pPViJ0MpfeVX8SW/view?usp=sharing
https://uptobox.com/n7i2l36zjv3j
