What is the best way to achieve this style of background

Design help Animations & Interactions
1

Hey team,

What would be the best way to achieve a background that moves when scrolling similar to this: https://clonex.rtfkt.com/

Cheers

Here is my public share link: LINK
(how to access public share link)

2

Wow, that is cool.
You could achieve this effect using a lottie export of a 3d animation and then using an interaction to play through the lottie on page scroll. Here’s the lottie course on webflow university: Lottie animation | Webflow University

3

You’d need a 3D library. threejs ( https://threejs.org ) is probably what they used on the example you linked to. But you need to be very experienced with javascript as well as 3D to make good use of it.

Otherwise you can use an editor like Polygonjs ( https://polygonjs.com - which I’ve created ) that allows you to create interactive 3D scenes without any coding.

Here is for instance a scene which has imported models and is set up to have the lights move when you scroll ( lighting_update_on_scroll | lighting_update_on_scroll ).
And there is also a tutorial on how to add those 3D scenes to webflow: Webflow | Polygonjs + Webflow

Happy to help you get started if that sounds interesting.

4

Thanks for getting back to me. I should of mentioned the background I will be using will be 2D it will be more like this example: https://twitter.com/PinkSol_/status/1515784525095182336?s=21&t=1FU2vxgF0_r0ocS2_QFGWg****

With the BG starting at the feet and moving up to the head as the user scrolls. Any input?