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.

You'll be using:

• The BezierPlugin to animate properties along a curved Bezier path
• The GSAP Draggable utility to drag elements on the screen and the ThrowPropsPlugin to glide them to a smooth stop
• The DrawSVGPlugin to draw SVG strokes dynamically
• The MorphSVGPlugin to morph any SVG path into any other path, even if the two paths don't have the same number of points
• And the SplitText utility to create fun animation text effects.

By the end of this tutorial, you'll be able to create complex types of web animations in a fraction of the time that it would normally take without using GreenSock's plugins.

For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to part 1 of this multi-part article.

If you're looking for a refresher on GreenSock's powerful timeline (TimelineLite and TimelineMax), check out Part 2.

The GreenSock articles are part of the series Beyond CSS: Dynamic DOM Animation Libraries. Here's what I covered in the past instalments:

• Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
• Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library
• Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations.
• GreenSock for Beginners: a Web Animation Tutorial (Part 1) is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library's modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax
• GreenSock for Beginners (Part 2): GSAP’s Timeline delves into GSAP's timeline functionality teaching you how to organize your animations inside a timeline or multiple nested timelines.

Animation Along a Path with GreenSock's BezierPlugin

Motion along a path consists in objects following a predefined path like a curved path or a zigzag path, etc. In the right context, it can be crucial for realistic animation.

This kind of animation is possible using SMIL (Synchronized Multimedia Integration Language), which is being deprecated.

The future of motion along a path seems to be CSS, but although the feature is supported in a few browsers (mostly Chrome and Opera), adopting it in production websites could be a risky move.

For consistent browser support and ease of implementation, GSAP's BezierPlugin is a fantastic option.

This is a free plugin included with TweenMax. Let's try it out!

Continue reading %Fancy Web Animations Made Easy with GreenSock Plugins%

by Maria Antonietta Perna via SitePoint