Streaming live at 10am (PST)

Help with 3D transform


#1

Hi folks! I’m pretty new to Webflow and trying to bite off more than I can chew right now!

There are some very fast, high level tuts about the 3D transform but so far I can’t find anything that allows me to troubleshoot my problem - So I’m hoping someone here can point me to more practical tuts or tips:
I am attempting to have an image (of a map) rotate in z-space while user scrolls (but image stays on screen) before other images animate in place but I’m failing at the first hurdle: getting the full screen image to transform on scroll.
Here’s a visual of the start and end goals.

Any advice gratefully received!

C


#2

Boy you really are GOING FOR IT right out of the gate, huh? Good for you! Much props for the ambition. Just think about it first before clicking around. The key is your image “Initial Appearance”. That’s actually how interactions get a little challenging (starting, effect, returning).

  1. So you want the white vector map to - move or rotate? That’s first step, move or rotate? Don’t try to do both out of the gate. Make your first effect happen to see it in action.

  2. I would start with “Moves” they’re easier to grasp. Make the vector move Left, which equals -50 or whatever. Stick with that one effect

  3. Since this is a full screen effect. Add a Section as the main section. Then add a div inside as wrapper of the graphic. (You could add another div and put graphic there also) Layering is a personal preference. I say use Section as the main container because it’s auto full width.

  4. Put that graphic on the page, placed how you like.

  5. Now question is how to want it to move left, via; Scroll into View, Hover, Click? This is where you want to sit and look at your desired effect.

I would get that done before doing anything else. That should give ya a taste to wet your beak :walking_man:


#3

Thanks Gary – I’ve seen some amazing sites built on WF so it’s just going to take some hard work – I’m sure it’s nothing I can’t master with a few late nights and some friendly advice. The issue is unpacking the problem and working out the steps to the solution. You have given me some good starting points. Thank you.
Watch this space.


#4

Yep yep, it’s what makes Webflow so great. If you sit and lay it out beforehand, the functionality will make sense. I know you’ll get it. Good luck. Holler if you need anything else, I’m always available to help.


#5

Thanks mate… as it happens… :slight_smile: I just posted another question here


as the 3D is only one section. What have I got myself into!

C


#6

Ha :sunglasses: Rock Star in the making!

FYI - I would refrain from using columns if you want responsive flexibility on multiple items. It’s going to be hard after a while to get fluidity to work. I would use grids/rows or flex rows.

If it’s going to be a home landing page interaction, I won’t mind helping you at all. I can give a video so you can see the click path. If you get stuck, just holla at me.

Have a great day!


#7

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