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

[@OfficialDevTips]

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!! beta.observablehq.com/@chhib/simulating-bouncing-ball-to-generate-realistic-physics-cs

[@TheChodex]

Great job! You are getting better and better at making these videos! Keep it up!

[@MohammadHosry]

1:50 it's my code 😃

[@OfficialDevTips]

Yeah! Thanks 🙏🏻

[@PaulMcCannWebBuilder]

If you add a scaleY, you can use text in the circle that won't pixelate. (Or use a SVG): codepen.io/paulmccann/pen/JaBRwR

[@md.akib5124]

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.

[@OfficialDevTips]

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. 😏

[@md.akib5124]

@@OfficialDevTips oh yeah it's at 2:54 minutes. My English hearing power's horrible 😁. sometimes this happens even with my native lang.

[@OfficialDevTips]

My pronunciation is terrible as well :D

[@karina_kurenkova]

This is sooo inspiring!! Thank you!!!

[@dirkveefkind2245]

Now put a photo of your forehead in the background and your goal has been achieved.

[@OfficialDevTips]

WAAAOOOW YAS. If there's a continuation of this project, that was a pretty great idea!

[@martinnyagah4313]

Remarkable job there!!

[@roquefore]

"Haha, i'm cheating! Nevermind, i dont care" - a sort of what i tell myself each time i do such a stuff xD

[@OfficialDevTips]

Haha, especially at the end of the day... 😏

[@dheerajmantena3307]

To make its center we can also give the container div top and left 50 % 50 % with absolute position .... nice video , thank you!!!

[@theITGuy-no3nt]

I very much enjoyed that. Ta!

[@TysonKemp]

Without looking at the code I think you should change "ease" on the animation to "ease-out".

[@fredericrobert9294]

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 ).

[@zeocamo]

you should try only to use const if you can, the ball is a let. :) const is good, full immutable is better :)

[@MuhammadAdnan-gx6rd]

WordPress theme development ? Any future vdos

[@OfficialDevTips]

Very low probability we’d go into PHP. Don’t count on it. 😕

[@RomanSteiner_xD]

Don't use scale or matrices (unless you multiply them also with a view projection matrix), use translate3d. Much easier: 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).

[@angladephil]

On physics, see P5.js and matter.js librairies. Open source and free, very easy to use ...

[@Djzaamir]

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

[@OfficialDevTips]

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.

[@muski282]

Why would you even change from the awesome intro animation Travis used, to the MOST boring animation you actually create?

[@szyszak]

Is it just me, or does Framer look almost exactly like Figma? Even the core features are the same.

[@OfficialDevTips]

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.

[@francis_n]

That thumbnail is quite freaky

[@OfficialDevTips]

That a piece of electric tape can make such a freaky impression is very impressive.

[@jobybejoy8219]

Can v have a livestream plsssssss.... ??? miss those days when travis used to live !!

[@OfficialDevTips]

Yes we will dip our toes inte live streaming. Can’t promise when though.

[@collection8325]

#Brother i just joing this channel, not so far. ACUUaly i wanna built a #SOCIAL_site. so what's your suggestion ???????????????/////