Create a simple FLIP animation library using the Web Animations API to do impossible layout animations.

🔴 Patreon:   / joyofcode  
𝕏 Twitter:   / joyofcodedev  
💬 Discord:   / discord  
🔥 Uses: https://www.joyofcode.xyz/uses

🔗 FLIP Animation Library: https://github.com/joysofcode/flip-an...
🔗 FLIP Your Animations: https://aerotwist.com/blog/flip-your-...
🔗 Animotion: https://animotion.pages.dev/
🔗 Easing Generator: https://linear-easing-generator.netli...

🔖 Timestamps

0:00 Intro
3:47 The FLIP Animation Technique
5:30 Setup
7:08 FLIP Animation Implementation
9:04 Measuring The Elements
12:44 Request Animation Frame
15:28 Invert Animation
20:35 Using Absolute Positioning
23:16 Animating Multiple Elements
27:01 Chaining FLIP Animations
30:27 Improving The FLIP Animation Library
32:39 Outro

#joyofcode #animation #flip