Okedokee, It’s been a long run but we’re finally here! The video below walks you through my solution to the challenge and a few others. Thanks so much to the Keyframers, Jhey, Mamboleoo, MotionHarvest and everyone else that went along for the ride.
I started this challenge based on the premise that I didn’t think CSS Animations or the Web Animations API (WAAPI) were well-suited for basic animation sequences.
I started with a simple animation of 2 divs moving and had 2 update challenges featuring “common client requests” to see which technologies were the most flexible and capable.
I was super excited (and thankful) to have some real CSS Animation pros along for the ride, especially since they knew I would throw some annoying curveballs along the way.
Now that the challenge is over, I’ll simply state that I still believe the GreenSock Animation Platform is the best tool for sequenced animations. Watch the video, study the results, and take the challenge for yourself!
Watch the video
My GreenSock Solution
Keyframers’ CSS Animation Solution
Jh3y’s CSS Animation Solution with Scoped Variables
MotionHarvest: Challenge 3B
Follow these folks!
keyframers: https://twitter.com/keyframers
David Khourshid: https://twitter.com/davidkpiano
Stephen Shaw: https://twitter.com/shshaw
Jhey: https://twitter.com/jh3yy
Louis Hoebregts: https://twitter.com/Mamboleoo
Aaron Sherrill: https://twitter.com/motionharvest
GreenSock: https://twitter.com/greensock
SnorklTV: https://twitter.com/snorkltv
Take the Challenge for Yourself
Can do a better job? Get the same results with less code? It’s never too late to start.