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...
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 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....
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...
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...
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, 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...
When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interact...
Recent Comments