Streaming live at 10am (PST)

Floating 3D animation


#1

Can anyone help me to understand how to create this effect seen here: http://3d-transforms.webflow.com/ where the 3d boxes are floating up when you load the page? I want to create this effect to make it look like stars are floating in space like here https://www.meteor.com/


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


#2

Those 3D boxes are basically 6 square panes connected to each other to create a cube. So you view the tutorial of example 6, duplicate that square and animate them on page load.

However, you can’t make them behave randomly without any custom coding.
To create a similar effect to the particles on the meteor site, take a look at this: https://codepen.io/jsndks/pen/ovjAC


#3

Hey thanks for sharing the codepen! Are the cubes also moving randomly? I guess I need to upgrade to be able to add custom code. Do you happen to know how this was created? http://www.stojakovic.co/


#4

Wow that site is epic!
I have no clue how that’s built.

I believe the cubes on the Webflow 3D site are not moving randomly. The movement is predefined in the interaction.