Streaming live at 10am (PST)

Need Help Designing 3D Interaction


#1

I am trying to add a special 3D interaction to my portfolio section. I want a stack of 6 images angled and separated as shown in the first picture, and the opacity needs to be 0%. This should be the initial state when the page loads. Upon scrolling down to the portfolio section, the first thing that should happen is the opacity changes to 100%. Then, after a short wait, the top image should move over to the right and rotate to show the image facing the viewer. This should be followed shortly after by the second image, but it moves down below the first image. Then the third image should end up to the left of the second image at the same level. The fourth image to the left of the third. The fifth above the fourth. Then, the sixth image should not move, but it should rotate. This should be a sequence of events, one followed after the other. I have tried very hard to make this work. I can get the initial setup, the opacity to change, and even the images to move with sequential delays. I can't seem to get the rotations to work correctly as each image moves to its spot. See the images. I don't know if this was very clear, hopefully the images help. Basically, it's like a stack of cards, where each card is dealed out while rotating to a certain spot on my portfolio section. Does anyone see a way to do this with the new 3D transform interactions? By the time I finish, I have a ton of triggers, and the rotations don't work the way I want...I'm not sure how to setup the interactions so that the rotation occurs towards the end of the image movement to the final spot.

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


#2

Hey, Where's the link?


#3

Hello @kmcguir,
Could you, please, share read-only link, so we could help you faster.
How to share a read-only link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance! :slightly_smiling:


#4

Sorry about that, here is the link:

https://preview.webflow.com/preview/only-for-practicing-styles-skills-etc?preview=f85c78f49ab0cd5432cc9e70d9998e3e

http://only-for-practicing-styles-skills-etc.webflow.io/

This is just a practice website. These aren't the images I'm going to use, I just want to get the 3D interaction right before putting this into my actual website. I've got it to the point where scrolling in reveals the layered images and then each layer begins to move. There would be 6 layers in the actual website interaction. The top layer moves to the right, the second layer moves to the right and down below the top layer, the third layer moves straight down, the fourth layer moves to the left and down next to the third layer, the fifth layer moves to the right (above the fourth layer), and the sixth layer stays. This movement occurs sequentially, and I want each layer to rotate as it moves. I can't seem to get the rotations to happen correctly.


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.