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 triallihaoquan
12,045 PointsLine 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
8,919 Pointsa 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:
- create the words / graphics in adobe illustrator
- expand all shapes and fills
- compound paths on all elements
- save as SVG 1.1 (default in CC)
- 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.
nfs
35,526 PointsThanks, Michael Kalmykov. You really did save me a lot of time and frustration.
Robert Araujo
Courses Plus Student 2,222 PointsMy best bet is to watch the video :)