Category: GreenSock

Writing Smarter Animation Code

If you’ve ever coded an animation that’s longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded “wall of code”. Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be ni...

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 ...

GreenSock for Beginners (Part 2): GSAP’s Timeline

The aim of this second part of GreenSock for Beginners is to introduce you to GreenSock’s TimelineMax. You’ll be learning: Why you need a timeline How to include multiple tweens in a timeline How to package multiple timelines into functions and nest them inside a master timeline for greater flexibility. ...

GreenSock for Beginners: a Web Animation Tutorial (Part 1)

My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web. This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries. Here’s what I cove...

Using GSAP to Animate Game UI with Canvas

The year was 1995; Toy Story hit the theaters, kids were obsessively collecting little cardboard circles and Kiss From a Rose was being badly sung by everyone. I was a gangly ten-year-old, and like any other relatively tall kid I was often addressed to by “you must be so good at basketball!”. So I practiced...

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend? Having worked with a slew of them, I can tell you there is no right answer. It’s a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job. If ...

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have no fear! We’ve got you...