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

[BlackGrumps]

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??

 

[Gogol]

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.

 

[R4v3nbl4ck]

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.

 

[ClarksV]

Take a look for such tutorials on Youtube friend.

 

[Ababba2]

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

 

[Gogol]

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.

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.