Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!
See full list on css-tricks.com. Importing SVG to Ae would be nice. If you don't mind instead of an SVG, having a pixel PNG copy of your SVG - you can drag an SVG right into Ae's project/composition/timeline panels from the library's panel and have the PNG copy right on the fly. If you need it to be vector later, you could replace it with it's full power vector converted to.Ai version Which you will have to use illustrator for. Stroke-dasharray and stroke-dashoffset are two very powerful attributes that can be used to apply a plethora of animations and effects to your SVG paths. You can try this handy tool that you can use to experiment with the two attributes. Animating objects along SVG Paths.
There isn’t just one way to animate SVG. There is the
<animate>
tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We’re going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we’re running here. My latest design around here uses SVG quite a bit and I thought this would be another perfect opportunity to use it some more.
Today, all of that changes. I’m going to demonstrate how you can easily animate an SVG file, which includes preparing an SVG file in Illustrator, explaining how to import it into After Effects CC, converting it to Shape Layers, adding the movement, and lastly commenting on the exporting/rendering process. Aug 03, 2020 SVG Animation. See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen. This animation features a large circle with text in the center and buildings spinning around the outside of it. A lively, fun SVG animation sure to work well for travel websites. SVG Loader Animation. See the Pen SVG Loader Animation by Nikhil Krishnan.
The finished product is pretty simple. Here’s it is:
See the Pen Wufoo SVG Ad by Chris Coyier (@chriscoyier) on CodePen.
Let’s check out how it’s done.
1. Design the Ad / Have a Plan
This might seem like an how to draw an owl moment, but this article is about animation so let’s get there as quickly we can.
My plan for this ad was to make a super simple Wufoo ad with their classic logo, colors, and general branding. Then add a little flair.
- Make the letters kind hop off the page a little. Wufoo is a fun word, let the letters have some fun.
- Back in the day we made a T-Shirt with dinosaurs on the front and on the back it said “Fast. Smart. Formidable.” Which are traits of both dinosaurs and Wufoo, not to mention the fun little play on words with FORMidble. Let’s make those fade in and out.
- To make the connection with the dinosaur thing complete, we’ll have a T-Rex head pop up from the bottom curiously, then zoom away. The word “Fast.” will come in as he zooms away which is another nice little connection.
I put all the parts together in Illustrator.
Notice how the logo and tagline text are outlines. That means they are just vector shapes and will render just perfectly as-is in the SVG, as
<path>
s. The text you see there “Fast.” is left as text in Illustrator. When I save this out from Illustrator, that will be left as a
<text>
element. 2. Save as SVG
Illustrator can save this directly as SVG:
You can open that SVG file in a code editor and see the SVG code:
3. Clean Up the SVG, Give Shapes Classes
You might wanna run it through SVGO to optimize it and remove the DOCTYPE and stuff. But more importantly for this post, you’ll want to give the the different shapes class names, that way we can select them in CSS and do stuff!
4. Insert the SVG
You can copy-and-paste that SVG right into the HTML where you want the ad. But that’ll just slop up the template probably. In all likelihood you’ll just do something like:
5. Animate!
Now we have these shapes in the DOM that we can target and style like any other HTML element, let’s do that.
Let’s say we want to do this as a 10 second timeline.
Words Fade In/Out First
The first thing we want to happen is the Fast. Smart. Formidable. thing. Each word will show for one second. So we’ll make an animation where the word shows for 10% of the time:
Then target that first word and have the animation last for 10 seconds (10% of that is 1 second):
The next two letters will start out hidden (
opacity: 0;
) and then use the exact same animation, only delayed to start a bit later:The extra 0.5s on each is to accommodate the fading out time period of the word before it.
Letter Pops
![Animate svg in after effects download Animate svg in after effects download](/uploads/1/3/7/7/137744378/347738117.png)
As soon as those letters are done animating, we’ll have the letters in WUFOO do their jiggle jump thing, like this:
The trick here is that we’ll make the animation only 5 seconds long, but run it once forwards and once backwards. That way it matches our 10 second timeline, is placed right in the middle where we want it, and we only need to scale in one direction, because when it reverses it will scale back.
Each letter has a slight bit of delay so they happen off-kilter a bit:
The above is in SCSS just for brevity, and does not include any prefixing (as you would need in production).
I feel like
animation-delay
is a property that would benefit from native randomization in CSS. Would be neat to see the letters be randomly delayed just a bit each time.Dinosaur Last
As soon as the words are done, the dinosaur will peak its head up. Even though the dinosaur is made up of lots of
<path>
s, we can target them all together by targeting the <g>
(group) tag that wraps them all.Because using translate to animate position is better, we’ll do that in the keyframes:
We wanted this animation to “last” about 3 seconds. It actually runs in 10 second loops, but you’ll only see it do stuff for 3 seconds. When the translateY(150px) is in effect, the dinosaur is moved so far below, you don’t see anything. By 37% of that animation (around 3 seconds) you’ll have seen it move slowly up, then quickly back down).
When we apply this animation, we’ll make sure that:
The dinosaur is hidden at first
The animation is delayed so it starts right after the words are done with their fade in/out dance.
The animation is delayed so it starts right after the words are done with their fade in/out dance.
The dinosaur pops down right at the last second, which is when the word “Fast.” pops back onto the screen (because all the animations are set to
infinite
, which re-runs them forever). That’s a bit of fun synergy there.6. Making it a responsive / clickable ad
One of the beautiful things about SVG is that it’s scaleable to any size without losing quality. To make an inline SVG like this scale while maintaining its aspect ratio, we can use the ol’ padded box technique.
The idea here is that the “wrap” will always be a perfect square, relative to its width. Then we absolutely position the SVG within that perfect square, which will happily resize itself.
Iodine element. Since this is an ad (which of course should be clickable), rather than using a
<div>
for the wrap, you could use an <a href='>
, just make sure you set that to be display: block;
.Final thing, for reference.
I think there is a future for this kind of thing in display advertising, particularly because of the CSS control and easy, sharp resizing.
When a new colleague starts to work at El Niño they get a nice welcome kit. Besides that I make an avatar of them for our about us page. Over the last year it has grown to a neat collection of avatars, but I have always wanted to do something extra with them…adding animation. After Effects seemed like a logical choice, but to make sure the loading time would be as minimal as possible it was clear they should be animated SVG’s.
First things first: prepping the illustrations in Illustrator
I wanted to animate the different elements of the faces separately, so it made sense to have all those elements in separate layers in After Effects. When importing files from Illustrator to After Effects all the layers are preserved. Basically the only thing I had to do was organising the illustration into different layers and saving it as an AI. Prepping done!
Let’s get down to business: After Effects
Since it is not my intention to write an in-depth article about hardcore animation I will not dive in too deep. But to point out the possibilities of the amazing Bodymovin extension (which I will discuss later) I will describe the steps I took shortly:
So I already had my layered Illustrator file and started After Effects. Then I imported the file as a composition, keeping all the layers. In the project window the file is shown as a new composition, but all of the layers are also neatly organised in a folder.
The next step was dragging the layers into the composition window and then one very important step: selecting all of the layers, right-click and choose ‘Create shapes from Vector Layer’. I wanted to end up with the animation as an animated SVG, which is vector-based. So in every step of this workflow the material had to be vector. When all the layers were converted to shapes I just threw out the old ones and then the fun part began: bringing it to life!
So I already had my layered Illustrator file and started After Effects. Then I imported the file as a composition, keeping all the layers. In the project window the file is shown as a new composition, but all of the layers are also neatly organised in a folder.
The next step was dragging the layers into the composition window and then one very important step: selecting all of the layers, right-click and choose ‘Create shapes from Vector Layer’. I wanted to end up with the animation as an animated SVG, which is vector-based. So in every step of this workflow the material had to be vector. When all the layers were converted to shapes I just threw out the old ones and then the fun part began: bringing it to life!
Animation was a completely new field for me. When learning something totally new it can be overwhelming and I must say the interface of After Effects was quite intimidating. So where did I start? In art school I have already learned a few basic principles about animation, like the ones from Disney.
I think this is the absolute foundation and worth a read before even thinking about booting the computer and starting After Effects. Just keeping a few of these principles in mind will make the animation look a lot better and more ‘natural’.
So the next step for me was to get used to the interface and After Effects in general. I clicked through some easy tutorials I found on Youtube and learned all sorts of small but essential things like the timeline, keyframes, easing, motion blur, parents and children, 3d-layers, and offset paths. Those basically were my ingredients for all of the animations. These things mixed with the illustrations looked like this:
Getting there! But still quite boring..
The next step
After animating the facial expressions I was quite happy with the result, but it still looked a bit too flat. Bodymovin supports 3D-layers, so I decided to add these to achieve a 2,5D effect. Like the shoebox theaters I used to make as a kid on a rainy day at the kitchen table.
I grouped the different elements and pre-composed the layers to keep things organised. Then I positioned these groups along the Z-axis as shown in the illustration below.
The different elements are shifted along the Z-axis like a stage set for a play.
But that’s not enough to create the illusion of depth. It is just like when you are watching something: when you hold your head perfectly still everything looks flat. When you start moving your head it all shifts around at a different speed. Like a parallax effect. So what I needed to add was movement. I made the face parent and the rest of the elements children. By doing so everything followed the movement of the face. Notice the subtle ‘parallax effect’ in the result:
These are the kind of details I love. It makes the whole animation so much better!
![Animate svg in after effects project Animate svg in after effects project](/uploads/1/3/7/7/137744378/605901514.jpg)
The final step:
Bodymovin
Right from the start I struggled trying to figure out how to deliver my animations as animated SVG’s. I read about SVG’s and it al looked awesome, but my coding skills did not get me much further then a ‘Hello world’… I missed the piece of the puzzle which connected the world of After Effects with SVG. After some Googling I stumbled upon an extension called Bodymovin. At first I was a bit skeptical, it just sounded way too good. But it was not: Bodymovin simply exports After Effects to SVG. Adobe 3d animator. That is it! No complicated tasks on the user side, just installing and rendering. So after a week of trial and error the twelve avatars were finished and delivered as SVG’s. Of course these are just the first small steps into the world of animation and I can not wait to learn more!
All done!
Animate Svg In After Effects Free
Thanks to Hernan of Bodymovin, you made my life so much easier! ❤
If you want to get started with Bodymovin: download it here.
Setting everything up can be a bit of a hassle, but I found this video very useful.
If you want to get started with Bodymovin: download it here.
Setting everything up can be a bit of a hassle, but I found this video very useful.
Tom ten Voorde. Tom is a designer at El Niño. Tom is a designer at El Niño and likes to learn new things.