🍍 ↩️ Pineapple Placement, Part 1 | Complex Web Animation Challenge! | @keyframers 2.8.0
David Khourshid (invisible and inaudible) and Stephen Shaw build a complex web animation based on a Twitter challenge by Josh Comeau. We'll return for a part two with David visible and audible
(Note: David's audio did not come through properly due to a technical error on Shaw's part. Oops! The episode still has lots of good bits, but starts out with Keyflections with a little dubbing that help explain a bit)
⏰Streamed live on 2019 at https://twitch.tv/keyframers 💡Inspiration: https://dribbble.com/shots/6171377-Health-Blog-3D-Animation 📺Video: https://youtu.be/Obj0-fID7Yc 💻Code: https://cdpn.io/pen/jjOOZe
Skip around: 0:08 Special Message 1:10 Keyflections 5:00 Episode Start 6:30 Animation overview 10:00 Start coding 1:36:00 Keyflections
- Twitter thread that kicked off the challenge: https://twitter.com/JoshWComeau/status/1137053528885727238
- CSS Grid Generator: https://cssgrid-generator.netlify.com/
- Flipping https://github.com/davidkpiano/flipping
Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!
- Like & subscribe on YouTube at https://youtube.com/keyframers
- Follow & tweet us at https://twitter.com/keyframers.
- Join the live streams & subscribe on Twitch http://twitch.tv/keyframers
- Support us on Patreon at https://patreon.com/keyframers
- Animation coordination
- CSS Grid