New to three js - curious on recreating animation

I came across animation on Strip website under the modular solutions section, I’m curious on how they put it together. Looks amazing, and I want to create something similar animating how different phone components interact with each other.

I have no idea where to start, I’ve looked at the code and it seems to be using Three.js and and maybe Web Animations API.

I’m not sure if they are using a library or building it from scratch. I would appreciate any advise to guide me in building this.

thank you.

The animations or visuals you’re referring to are not 3D content created with three.js or webGL. They are 2D icons or HTML elements. The animation part is typical DOM manipulation, CSS, or drawing lines using svg paths. The libraries used for this are mostly GSAP or Framer Motion. Hit the F12 and inspect to dom elements. If you don’t see canvas, there is no 3d :smiley: ..

The only section, where Three.js could be used is this:


Console log says it’s r151.
I made something similar in the past: Global Impacts (waves + trails)

1 Like

Thank you for your feedback