I want to create animation like this with mouse scroll

I want to create animation like this with mouse scroll. any idea ?

Are you sure this is created with three / webgl at all? Looks like something that came out of Adobe AfterEffects, probably also easier to make it in 2D than in 3D. :thinking:

yes this is created with threejs and how to make it in 2D please guide ?

Can you share the link to this animation? It may be easier to tell from the source code how it was made.

Reference Site: https://www.rappipay.com/

I just want the technique of globe animation from where I start ?

Personally I would just create the entire animation in Blender, or similar 3D software, export to glTF, and play/revert it on mouse scroll using keyframe animation. It seems a bit far too complex to just hardcode it.

Note that the canvas is not scrolling, it just plays the animation as a background for the website when you scroll through DOM elements.

@prisoner849 any suggestions please ?


Yes if its an animation in your animation mixer you can update animation mixer on scroll event instead of update it in animation loop…