Skip to main content
Question

How to change direction of smart animation size change?


NathanC

Hi, not sure how to figure this one out. I have a circle that I want to expand on hover, but when I increase the size in the direction I want, it does not go in that direction.

I know it’s possible as I’ve seen similar stuff and it’s a pretty basic interaction, such as expanding circles for heart/favourite micro-interactions.

Prototype current example: https://www.figma.com/proto/yFy1wCYfhMkC3lxOjz0HNN/Untitled?page-id=0%3A1&node-id=5%3A36 - In this example, I want the circle to finish inside of the rectangle container with the image.

Any help would be appreciated 🙂

Dennis_N
  • Power Member
  • August 4, 2022

Simply by it’s position within it’s container/frame:

image

I hope this helps.


Kaisin_Li

Not sure if this is closed, but I’m having the same problem.

I was trying to align both variants on the upper right corner, but it expands from the upper left corner every time


Mr_elad
  • February 25, 2024

Hey guys, so i had the same problem and I’ve managed to fix it.
here is how

Its all about the bounding box!
Your animation direction is determined by your bounding box, to change your bounding box you hover over the resize lines than hold CTRL/CMND and drag out than you can hold shift for an even size.

after you’ve changed the compument bounding box you can change the actual size of the shape within the component. let me add some picture so you’ll see the reference

Please let me know if it helped and if you need more help 🙂


cd11
  • November 25, 2024

tysm you are a lifesaver!!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings