3D Page Fold Transition with CSS & Vanilla JS! | FLIP Animation Tutorial | @keyframers 2.34

David Khourshid & Stephen Shaw fold under the pressure of this 3D CSS & vanilla JS powered FLIP transition.

* 💡 Inspiration: https://dribbble.com/shots/10144011-The-New-Swiggy
* 📺 Video: https://youtu.be/xuVIKPGmx8U
* 💻 Code: https://cdpn.io/pen/bGdebPM

Skip around:
2:57 Animation overview
4:35 Start coding
1:02:57 Keyflections (Did I say that right?)

Additional Resources:

* Paper Pirouette https://youtu.be/Fdq95qVG7F4
* David Khourshid on Data Attributes https://www.dotconferences.com/2019/12/david-khourshid-crafting-stateful-styles

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
* Buy web dev shirts, stickers & more at https://keyframe.rs/merch
* Follow & tweet us at https://twitter.com/keyframers.
* Support us on Patreon at https://patreon.com/keyframers

Topics covered:

* Nested 3D transforms
* Data Attributes
* FLIP Animations & Transitions
* CSS Variables

Post Author: hatefull