Fancy Web Animations Made Easy with GreenSock Plugins

Fancy Web Animations Made Easy with GreenSock Plugins

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:

[…]