So happy that some folks are going on this journey with me. I’ve had contestants use: GSAP, CSS Animations, CSS Animations with scoped variables, and ZIM!
Watch the video for results and my reaction
Summary
I proposed that CSS Animations and WAAPI weren’t well suited for basic animation sequences. I was expecting a firestorm, but instead 3 brave souls contributed unique solutions.
For the record, each solution worked just fine. Bravo!
It’s important to consider code readability and for this I’ll let the viewer decide. Perhaps what’s difficult for me to read is easy for someone else.
This first challenge of course, is just to get the ball rolling.
It’s never too late to start the challenge!
Challenge Quick Links:
- Challenge 1
- Challenge 1 Results: You are here
- Challenge 2
- Challenge 2 Results
- Challenge 3
- Challenge 3 Results
Stay tuned for Challenge 2 where the client comes back with some annoying changes.
Extra special thanks again to everyone who contributed. Be sure to follow them.
You will be inspired and learn a ton from them.
Stephen Shaw: twitter.com/shshaw | codepen.io/shshaw
Louis Hoebregts: twitter.com/mamboleoo | codepen.io/mamboleoo
Jhey: twitter.com/jh3yy | codepen.io/jh3y
Results
My GreenSock Solution
CSS Animations by Shaw
Shaw also provides an alternate approach with a sprinkling of CSS variables
WAAPI by Louis Hoebregts
CSS Animations with Scoped Variables by Jhey
Dr Absract mixed things up with Zim