CSS Dev Conf 2017 has ended
Back To Schedule
Monday, October 9 • 12:00pm - 1:00pm
FLIPping Out About Animated Layouts #flipanim

Sign up or log in to save this to your schedule, view media, leave feedback and see who's attending!

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

avatar for David Khourshid

David Khourshid

Frontend Engineer, Microsoft
David Khourshid is a Florida-based web developer for Microsoft, a tech author, and speaker. Also a fervent open-source contributor, he is passionate about JavaScript, CSS, animation, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard... Read More →

Monday October 9, 2017 12:00pm - 1:00pm CDT
Queen Anne Ballroom Hotel Monteleone