The aim of the third part of this GreenSock tutorial series is to introduce you to some amazing GreenSock plugins.
[…]
To get started with GSAP’s BezierPlugin, just download TweenMax and include it into your project like you would with any external JavaScript file at the bottom of your HTML document.
[…]
With GreenSock’s DrawSVGPlugin you can quickly create an SVG graphic that looks like it’s drawing itself on the screen.
[…]
For the animation to work, your SVG needs to have a stroke defined, either in the SVG itself as a presentational attribute or in CSS:
To stagger more than one SVG stroke, you can simply use GSAP stagger methods. The DrawSVGPlugin is seamlessly integrated with the GSAP API. For example:
Here’s a live demo with the DrawSVGPlugin at work:
See the Pen GSAP DrawSVGPlugin by SitePoint (@SitePoint) on CodePen.
[…]
Using GSAP’s MorphSVGPlugin lets you morph one SVG shape into another with one line of code, even if the number of path points between the two shapes is uneven.
[…]
You can start using the MorphSVGPlugin with something as simple as this:
[…]
