Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Creating an Animated Line Drawing

lihaoquan
lihaoquan
12,045 Points

Line animation of words

How to achieve the effect of drawing words at 00:20 of the video - Create an Animated Line Drawing ?

Are the words individually animated, or they all have the same animation but different delay times?

3 Answers

Michael Kalmykov
Michael Kalmykov
8,919 Points

a year later, but I've spent the last three weekends trying to animate words like this with all these stupid busted plugins, instead of just coming here. while the video has all of the info for the animation itself, what it doesn't have is how to create the SVG optimized for web to animate.

My personal process is:

  1. create the words / graphics in adobe illustrator
  2. expand all shapes and fills
  3. compound paths on all elements
  4. save as SVG 1.1 (default in CC)
  5. run SVG through SVG-O (https://github.com/svg/svgo)

Note: this will only work with fairly simple vectors, which is why you have to use the above steps to distill your graphics into the most basic of vectors.

Hope this helps someone and saves them some frustration.

Thanks, Michael Kalmykov. You really did save me a lot of time and frustration.

My best bet is to watch the video :)