Motion along a path is a feature of SMIL animations. However, since SMIL has been deprecated, motion along a path will most likely move to CSS. Until then, Sarah recommends using Greensock’s implementation for widest support. The GSAP implementation also supports features like auto rotation and adjusting the curviness.
- Motion along a path does come in TweenMax,…and this is really one of the coolest things about SMIL,…but because it's getting deprecated,…you should probably use GSAP.…It has backwards compatibility…and it's even cross browser to IE,…so that's something that SMIL doesn't offer.…And this answers the question…that somebody asked me earlier,…about motion along a path.…It'll probably still be unsupported in SMIL,…and it'll move into CSS,…but we have a gap in time now,…where it's not in SMIL and it's not in CSS,…so you should be using GSAP,…if you want the widest range of support.…
And I put a little link in here,…so that you can vote for it in Edge,…because I actually really do care about…getting this module in the CSS spec,…so if you have two seconds, go vote.…So motion along a path is pretty simple,…it actually just takes an array of values in this Bezier.…So we got the, kind of like, x and y values,…that we're going between,…and then we've got this,…I've got like a, steampunk lightening,…and I wanted to make fireflies…
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