How to create While-Scrolling 3D Rotation Interaction

Design help Animations & Interactions
1

Hey everyone! I’m trying to create a “while scrolling” interaction that moves an iPad screen similar to this website: https://www.shapr3d.com/ (created in Webflow)

I have created the 3D interaction on my own site, but I can’t seem to attach it to the scrolling interaction. I can manipulate the rotation and other transform properties in the Interactions builder, but it appears to be lacking the perspective properties that can be achieved in the designer. Could someone show me how this can be done? Or how this website was able to do it? Thanks! I’ll share my read-only link below.

ipad-scrolling interaction

Here is my public share link: https://preview.webflow.com/preview/csshomeav?utm_medium=preview_link&utm_source=designer&utm_content=csshomeav&preview=ab3ced9398241246e18df8c0caae9af5&pageId=5ece09f194d2b693d531d556&mode=preview

2

3D transform in the Style panel and the IX panels are the same.

Before going further, if your issue is that you are missing the depth/perspective effect, that’s because the PARENT of the element(s) you’re manipulating don’t have a Children Perspective set. Setting it will define a 3D space for your entire scene.

Select one unique element that represent your scene and add children perspective set to 2000 to it. Now, all the children will have the same perspective, wether you transform them in the Style panel or in the IX panel.

3

This was the problem. Thanks!

1 Like