Say goodbye to jump cuts on the web! In this session, you'll discover what makes native apps feel so alive and how we can replicate those movements on the web. Learn how the FLIP technique can smoothly transform flexbox- and grid-based layouts at 60FPS. We'll dive into basic and advanced techniques for animating between states in many different situations with interactive demos.
Why animate layouts (+ many examples)
How native apps transition:
- Android's Shared Element Activity Transitions
- iOS's Layout Constraint Animations
The FLIP technique (First, Last, Invert, Play)
- using the Web Animations API
- using GSAP
Additive, interruptible & physics-based FLIP animations
Choreographing FLIP animations
Motion curves (a la Material Design)
Tools, libraries & resources
