Uploaded March 2024 | Updated September 2026, 2 weeks ago

---

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

🔴 Patreon: patreon.com/joyofcode
𝕏 Twitter: twitter.com/joyofcodedev
💬 Discord: discord.com/invite/k6ZpwAKwwZ
🔥 Uses: https://www.joyofcode.xyz/uses

🔗 FLIP Animation Library: github.com/joysofcode/flip-animation-library
🔗 FLIP Your Animations: aerotwist.com/blog/flip-your-animations
🔗 Animotion: https://animotion.pages.dev/
🔗 Easing Generator: https://linear-easing-generator.netlify.app/

🔖 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