Published On Mar 29, 2024
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