DrawSVG is a plugin for Greensock. It uses stroke-dasharray and stroke-dashoffset to animate a stroke by drawing dashes along the total length of the stroke.
(oriental music)…- Now we get into some,…I kind of laid the foundation…for the other stuff,…now we get into some really, really fun stuff,…or at least what I think is really fun.…So, we're gonna do DrawSVG and Motion Along a Path.…DrawSVG is the thing that everybody does when…they make the Nintendo draw itself kind of thing,…and it's very, very simple in GSAP.…I'm also gonna show you how it's done in CSS…in case you're using CSS too.…
Then you just use a dasharray for…the whole length of the shape.…So, we're like doing a stroke-dashoffset here…to negative 274, negative 274 is the amount that…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values