Sizing from Right to Left instead of Left to Right

When adding sizing to my animation I need my div to slide in from Right to Left. It seems its only possible to use sizing Left to Right?

With scaling this is possible, however it scales everything inside my div.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

It would help to see your read-only link, but my guess is setting your transform origin would fix the issue, you can read more here: Transforms | Webflow University

I cant get transform origin to work. Ive searched the forums for a solution with no success.

Can you share your read only link?

https://preview.webflow.com/preview/malarmontage?utm_medium=preview_link&utm_source=designer&utm_content=malarmontage&preview=b8cbcd2a033bb645bb18f0ccc31c9317&mode=preview

Right now I am using scaling, but thats the effect I need without the actual scaling of the text.

@Abx where on the site are you running into issues? Screenshots are also helpful for troubleshooting :slight_smile:

When this div scales, it also scales the content inside my div so I need to use sizing instead. However I cant get sizing to slide from Right To Left

Have you tried using move? From 100% to 0%.

image

I’m not 100% sure what you are going for, you have a lot going on with this page so it’s a bit hard to troubleshoot.

Unfortunately if I use Move, it wont work for mobile version. I need to use sizing I believe. But sizing seems to only work from Left To Right.

This guy had the same problem as me. Size Interaction work from a particular direction (IX2) - #4 by ParagonTwo

Sizing works the same as the direction of the layout itself does. For example if you put your object that you want to change the size of inside of a flex div that will be set up to justify-end its children, the direction will be from right to left, hence the size will animate from right to left as well.

edit: example. Click central square.

1 Like

Thats it! Thank you.

Hi @dram,
can you pls upload your example again? That would be awesome!
Cheers,
Dan

I cannot but if you will post your issue I will try answering that.

Hey @dram ,

I’m facing a similar blocker with my build. If you see the section titled “Holistic wellness programs for your employees”, on hover the cards expand. I’d like the last two to grow from the right to the left. I tried several options but nothing worked, I’ve settled upon what I have now, but if you see, the card grows from the center out, instead of from right to left.

This is my [preview URL] (https://preview.webflow.com/preview/plumhq?utm_medium=preview_link&utm_source=designer&utm_content=plumhq&preview=f97b3e178b875e78c29f4d3a3548ed62&pageId=6108dfad3729aa65f8ffaf49&workflow=preview)

I am afraid I do not understand your request. The elements you mention do not grow, they move on hover exactly how you set them to with the transform properties.

Hey Alex, thanks for replying. What I’m trying to achieve is to make the fourth card move like the first three, but from right to left. If you hover over the fourth card now, you’ll see that it doesn’t exactly move from right to left, it increases its size from the center.

This is the interaction sequence I have on the first three cards. I was wondering how to do the same, for the fourth card but just make it move it right to left instead of left to right.

image

.hover-div.1 - set it’s left position to auto, remove move transform.

That worked smoothly. Thanks Alex, you’re a legend :raised_hands:t3: