3D Bend Effect

About the Component

This component turns your entire page into the face of a cube. As visitors scroll, the top and bottom edges fold away in real 3D and flatten back out at the ends of the page, a signature scroll effect that takes one layer and no setup.

The setup

Follow the setup guide below.

• Copy the component and drop it on your primary breakpoint.

• Wrap all the page sections inside a stack, and name it "Main"

• Set the accessibility tag to main.

• Drag this Main stack outside the primary breakpoint.

• Click on the CubeBend (Component), and set the content filed to Main on the property control panel.

• Set the Width of the component Fill

• Set the Height to 100vh (Viewport)

• Add a Max Width property and set a value (1200px is recommended)

• Adjust the property controls as you wish.

• Publish and preview it.

Support

If you need any support, please reach out at hello@framerstacks.com

Check out more component in our main library collection.