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)
