I want to create animation like this with mouse scroll

Questions
,
1

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

2

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:

3

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

4

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

5

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

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

6

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.

7

@prisoner849 any suggestions please ?

8

@LoveKumar

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