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

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

325 ratings | 10091 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 (38)
DevTips (4 months ago)
Try out the Observable notebook yourself. You can fork it and make modifications. Change the weight, drag, gravity to get your very own dropping plate. Paste your own SVG!! https://beta.observablehq.com/@chhib/simulating-bouncing-ball-to-generate-realistic-physics-cs
Nemo D123 (4 months ago)
did you know that people with beards usually are selfish duchebags? No offence to anyone , unless you think you are a douchebag.
Philippe Anglade (4 months ago)
On physics, see P5.js and matter.js librairies. Open source and free, very easy to use ...
seocamo (4 months ago)
you should try only to use const if you can, the ball is a let. :) const is good, full immutable is better :)
TOYmotivation (4 months ago)
#Brother i just joing this channel, not so far. ACUUaly i wanna built a #SOCIAL_site. so what's your suggestion ???????????????/////
Joby Bejoy (4 months ago)
Can v have a livestream plsssssss.... ??? miss those days when travis used to live !!
DevTips (4 months ago)
Yes we will dip our toes inte live streaming. Can’t promise when though.
Sam Finance Tech (4 months ago)
Muhammad Adnan (4 months ago)
WordPress theme development ? Any future vdos
DevTips (4 months ago)
Very low probability we’d go into PHP. Don’t count on it. 😕
Daniel Schneider (4 months ago)
Why would you even change from the awesome intro animation Travis used, to the MOST boring animation you actually create?
Mohammad Hosry (4 months ago)
1:50 it's my code 😃
Paul McCann (4 months ago)
If you add a scaleY, you can use text in the circle that won't pixelate. (Or use a SVG): https://codepen.io/paulmccann/pen/JaBRwR
DevTips (4 months ago)
Yeah! Thanks 🙏🏻
Frédéric Robert (4 months ago)
I would do it all in SVG and JSON using Bodymovin & Lottie. Clearly not the same process but would take me approximately 10 minutes total. ( You have to know After Effects, of course ).
MileHighSi (4 months ago)
Nice work, David. I was inspired to make my own with a heavier 'bounce' using just CSS. Then I got carried away and added effects :/ https://codepen.io/simonseddon/full/mzEQVZ/
the I.T. Guy (4 months ago)
I very much enjoyed that. Ta!
szyszak (4 months ago)
Is it just me, or does Framer look almost exactly like Figma? Even the core features are the same.
DevTips (4 months ago)
It seems everything looks like Sketch/Figma these days. Thing is with Framer X is that everything becomes actual React components. You could sort of take the generated code from Framer X and drop it into your project.
Dirk Veefkind (4 months ago)
Now put a photo of your forehead in the background and your goal has been achieved.
DevTips (4 months ago)
WAAAOOOW YAS. If there's a continuation of this project, that was a pretty great idea!
Tyson Kemp (4 months ago)
Without looking at the code I think you should change "ease" on the animation to "ease-out".
Aamir (4 months ago)
Hi David, do you guys plan to work on other Languages as well like Java or maybe c++ ? and maybe develop some cool apps with them
DevTips (4 months ago)
Maybe dip my toes into Python to experiment more with Machine Learning, and/or other functional languages. But probably not Java or C++. This channel is still more around the concept of the "web" and that's what we enjoy the most.
Florian Metz (4 months ago)
Cool, I would suggest you try out Anime.js it makes animating a lot easier. 😉
DevTips (4 months ago)
Thanks - will look into it!
Oleksii Stryzhak (4 months ago)
"Haha, i'm cheating! Nevermind, i dont care" - a sort of what i tell myself each time i do such a stuff xD
DevTips (4 months ago)
Haha, especially at the end of the day... 😏
Roman Steiner (4 months ago)
Don't use scale or matrices (unless you multiply them also with a view projection matrix), use translate3d. Much easier: https://codepen.io/rasteiner/full/yxZYqL/ If you work with `transform: translate3d(x,y,z)` and update the z axis, you don't need to approximate the exponential curve of perspective with `scale` (which is linear).
Danilo Novaković (4 months ago)
Great job! You are getting better and better at making these videos! Keep it up!
Dheeraj Mantena (4 months ago)
To make its center we can also give the container div top and left 50 % 50 % with absolute position .... nice video , thank you!!!
Francis (4 months ago)
That thumbnail is quite freaky
DevTips (4 months ago)
That a piece of electric tape can make such a freaky impression is very impressive.
Martin Nyagah (4 months ago)
Remarkable job there!!
mohiuddin akib (4 months ago)
umm I think css transition property has a thing called cubic-beizer which can do this sorta effect. I saw that on this channel from travis.
DevTips (4 months ago)
My pronunciation is terrible as well :D
mohiuddin akib (4 months ago)
+DevTips oh yeah it's at 2:54 minutes. My English hearing power's horrible 😁. sometimes this happens even with my native lang.
DevTips (4 months ago)
Somewhere in there I explain I didn't get that realistic feel from the bezier curve. Couldn't get it realistic enough. For most projects it's good enough though. But this not most projects. 😏

Would you like to comment?

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