3D Animations in Website, How the heck is this done??

Hey guys,

Stumbled across this site here: https://beer.marcovincit.com/

When you click on the bottle it rotates in 3d to the next section. From inspecting the code it seems to be an animation that is triggered once a button is pressed.

So my question is how do you create a 3d animation like this? Currently working with a Tequila company and would love to incorporate something like this!

Not sure if this is a 3d model animation or like a video just taken in 360.

Any thoughts??

Didn't check the example as I am on a crappy smartphone right now.. but it probably is the canvas api in js. It can make a fully functional game for that matter. Our devices are much more powerful these days, so expect the unexpected.

Edit: just checked it but still, I can't inspect it on the mobile device. It could also be around 100 images stiched together, each separated by 3.x degrees in perspective. I have done this for an eyewear company a few years back. Much simpler than canvas api.

It's a single image split into different frames : https://beer.marcovincit.com/assets/img/sprite.png
When you load the page or click the button, the image is "rotated" by skipping to the next frame, as if it was a film.
I don't think I've ever seen animations implemented like that.

Take a look for such tutorials on Youtube friend.

All I know it's that for the time the site is loaded, users have visited other 5 sites

R4v3nbl4ck said:

It's a single image split into different frames : https://beer.marcovincit.com/assets/img/sprite.png
When you load the page or click the button, the image is "rotated" by skipping to the next frame, as if it was a film.
I don't think I've ever seen animations implemented like that.

Click to expand...

Aaaand there u go. That's why it took a bit of time to load on my fckn android phone. This is probably the worst way of doing it, but who am I to judge haha. Thanks man.