Channel: DevTips

Category: Education

Tags: how tocssdev tipsweb design tutsreact jsfriendly internetdesigner who codesprototypingadvicedevelopment advicegraphic designerweb designinternet codetipscode editingnewtoncodingreact.jswebdesignhtmlweb developmenttutorialprogrammingdesigners who codecoding tutorialnet tutswebsitedesign prototypingworkflowgraphic designjavascriptweb tutsprogramming helpinternet

Description: 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). 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. ▶️ 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 🗒 beta.observablehq.com/@chhib/simulating-bouncing-ball-to-generate-realistic-physics-cs Burak Kanber's physics modeling post with gravity and drag 📉 burakkanber.com/blog/modeling-physics-javascript-gravity-and-drag Henrik Joreteg's create-keyframe-animation module to generate the CSS keyframes 📽 npmjs.com/package/create-keyframe-animation How to transform something within an SVG using matrices ⊹ 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! ❤️ youtube.com/funfunfunction #css #animation #physics