Please have a look this is my porfolio site → kamal-folio.netlify.app
On home page it has a card in middle and currently its static, i want to make it more appealing & dynamic so want to add some animation like i drew in the image below.
To make it realistic I will attach a string div to the top of card which will make it appear like its floating in air but for animation it should bounce the card a little, rotate it, move it just like a real object. but if i manually add animation properties like rotate, skew etc. etc. high chance it will not look realistic. please suggest do I need to add some physics engine etc. to this?
Also feel free to provide feedback for this site as I made it few years ago what are your thoughts about it.
You don’t need a physics engine but it is fairly difficult to do it with pure CSS. There are animation libraries that can help using JS.
https://bestofjs.org/projects?tags=animation&sort=total
Example physics engine library if you really need it
1 Like
Hi lasjorg, seems like the library that you linked looks fit for this task and will do the trick. But looks like going through the document and getting it to work as desired will take a long time as the docs looks complicated. but i still thank you for this response.
I am thinking till i go through the docs to get it done perfectly, i should do a temporary fix by doing it through just CSS. it wont be perfect but atleast better than a fully static div.
As I said, I don’t think you need a physics engine. I just posted that link for context.
Look at some of the plain animation libraries first (gsap, animejs) or just plain CSS. But that does require you to construct the motion and not just have objects interacting with a system. There are lots of articles/tutorials on animation.
As an aside, I would not use an infinite animation on that card. You can do an “entrance” animation that stops. Or maybe repeats on a very long delay. For that, something simple like animate.css might work.
Otherwise, it will just be annoying, in my opinion. It is just because you have looked at it for so long that you are bored with it. People will not sit on that page for that long. All that matters is that they can read it and use the links.
It is complicated. What you’re trying to do is the polar opposite of what a large percentage of software work involves*. You need to very carefully build a single, very specific thing that has no real intrinsic use. And you have to tweak it and tweak it, just for feel. It’s fun though, and can be really rewarding.
It’s what an animator does. It’s what “motion design” is, really. There is a part of software development where it’s common & exceptionally important (games). Can be useful in some aspects of app development - mainly mobile ATM, where it’s easier to reach for native graphics APIs - here’s a good example (though the graphics issues should change a bit once WebGPU starts to get full cross-browser support & we start to see things built on it).
Minor, but if you do want to drill into it, particularly making things look “realistic”, it’ll generally help to learn some [fairly basic] maths so you can get the physics aspect right
* this relates to what @lasjorg says about not having an infinite loop. For website UI, it’s just likely going to be annoying. It has no real use, and may just be ignored. But I dunno…if you could play with it and bat it around or whatever, then it starts to get interesting (and harder to code!)
Edit: also, possibly look at Rive, it’s really very good
1 Like
