HomeОбразованиеRelated VideosMore From: DevTips

CSS Animation with Physics Simulation 📈 (so much over-engineering ⚙️)

315 ratings | 9337 views
Sponsored by: Framer X, thanks! The easiest and most advanced design tool. Everything interactive and unlimited. Designer AND developers can use Framer. Every component can be shared (and is React). https://framer.com/ Let's over-engineer our CSS animation with a physically accurate gravity simulation to get that nice acceleration and bounce. We build a simulation, and let the simulation generate the CSS animation keyframes, which we bind to the dropping SVG. See the last episode where we very much failed in doing this. At least it was entertaining. ▶️ https://www.youtube.com/watch?v=smBP4muoLYA 🗿 MILESTONES ⏯ 1:29 Recap - last time we tried to animate without transforms 😮 ⏯ 2:32 Let's over-engineer this with a physics simulation 👹 ⏯ 10:17 Taking the physics 📈 into CSS ⏯ 15:00 Converting a Y translation simulation into a Scale transformation ⏯ 18:20 Getting into when moving the SVG's ⊹ positioning Try out the Observable notebook yourself 🗒 https://beta.observablehq.com/@chhib/simulating-bouncing-ball-to-generate-realistic-physics-cs Burak Kanber's physics modeling post with gravity and drag 📉 https://burakkanber.com/blog/modeling-physics-javascript-gravity-and-drag/ Henrik Joreteg's create-keyframe-animation module to generate the CSS keyframes 📽 https://www.npmjs.com/package/create-keyframe-animation How to transform something within an SVG using matrices ⊹ https://stackoverflow.com/questions/20601904/svg-change-x-y-0-0-top-left-to-the-center-of-my-image DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay! DevTips has a sister channel called Fun Fun Function, check it out! ❤️ https://www.youtube.com/funfunfunction #css #animation #physics
Html code for embedding videos on your blog
Text Comments (39)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.