Face-ID Like Animation
Hi, is it possible to replicate this with CSS (and javascript if needed)? If yes, how do I do that?
14 Replies
Of course im not asking for the code, im just wondering how could I do such thing?
like, what do I need to achieve? This looks like a 3d animation so I need some sort of 3d libraries
and some math?
u maybe able to do it with css
check out 3d animations in css
if u use js then u can easily do it with threejs
u won't need math as far as i can think off if u use threejs
but tbh, if u r using that in a webpage, just use a gif
sometimes it's the better option
I feel like using Threejs along with 2 basic circles should do the trick
i need some math to dynamically rotate and "disform" the circles
the circle will be deformed based on what factors
on circle rotation
ok but m asking it will be deformed based on what?
u said u need math to deform ir
but that math will be operated over what?
like based on this factor the circle will rotate this much
based on time
t?isn't that just animation?
the circle gets deformed along with the rotation
yeah, thats what im trying to do lol
well then u won't need math lmao
it's as easy as goin
circle.rotation.x = 0.01 i do? look at the animation
rotation = degrees
and deforming wouldn't be easy?
the deforming u r talking about.. is it, the way it goes from circular shape to elliptic shape?
as it rotates
yeah?
well u don't have to worry about that lol
how the transformation happens is taken care of by the vertex shader
all u have to worry about is how fast it'll rotate and which direction it rotates