Chapter 409: SVG
Core Idea
When it comes to animation, SVG and GSAP go together like peanut butter and jelly. Chocolate and strawberries.
Key Concepts
- Increase/reveal stroke segment from beginning, end, center or any position.
- Decrease/hide stroke segment to beginning, end, center or any position.
- Move a segment of a stroke along a path for that snake in a maze effect.
- Morph
<path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches.
- Morph a
<polyline> or <polygon> to a different set of points
- Convert and replace non-path SVG elements (like
<circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line>) into identical <path>s using MorphSVGPlugin.convertToPath().
- Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the in-between state looks like during animation.
- Simply feed in selector text or an element (instead of passing in raw path data) and the plugin will grab the data it needs from there, making workflow easier.
Code Examples
gsap.to("#gear", {duration: 1, x: 100, y: 100, scale: 0.5, rotation: 180, skewX: 45});
- What it demonstrates: typical usage of SVG in a GSAP animation.
Key Takeaways
- Increase/reveal stroke segment from beginning, end, center or any position.
- Decrease/hide stroke segment to beginning, end, center or any position.
- Move a segment of a stroke along a path for that snake in a maze effect.
- Morph
<path> data even if the number (and type) of points is completely different between the start and end shapes!
- Morph a
<polyline> or <polygon> to a different set of points
Connects To