Parallax Powered by CSS Custom Properties
Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some …
Articles Tagged
GSAP
9 Articles
Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
I‘m not sure how this one came about. But, it‘s a story. This article is more about grokking a concept, one that’s going to help you think about your animations in a different way. It so happens that this particular …
GreenSock ScrollTrigger
High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions, as well as when certain elements are in the viewport. Anything you’d want configurable …
Chris Coyier
on
Tips for Writing Animation Code Efficiently
I’ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go!
I will be using …
Zach Saucier
on
(Updated on )
How to Animate on the Web With GreenSock
There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: …
Sarah Drasner
on
(Updated on )
Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API
Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept …
Opher Vishnia
on
(Updated on )
Cars with Broken Windshield Wipers
I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could …
Chris Coyier
on
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 …
Sarah Drasner
on
(Updated on )
Weighing SVG Animation Techniques (with Benchmarks)
The following is a guest post by Sarah Drasner (@sarah_edo). Sarah has been researching and giving talks about animation lately. I jumped at the chance to have her share some of that research here, this time focusing on …
