This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Josh Max Rubinstein
Posted Dec 02 - Read on Facebook

Any tips or references on how to animate something from it's center point?
For example I want to take a rectangle centered on screen and animate it to a circle from the center point not the upper x coordinate.

In my attempts the rectangle animates to a circle but the rectangle right edge animates in towards the upper left x coordinate.

Hope this makes sense.

8 Comments

Joshua Tucker

Hey Josh, have you tried using midX/midY?

Josh Max Rubinstein

Joshua Tucker I did try that earlier. I'll give it another go.

Joshua Tucker

This for example animates a square from the center and moves it's midY point to 100 and borderRadius to 100. Is this what you're trying to accomplish?

Josh Max Rubinstein

Joshua Tucker Here's my sample file
http://share.framerjs.com/z38ek4c0s27f/

Joshua Tucker

There you go. The .midY wasn't really necessary since only the midX is relevant with width but I threw it in there just out of habit :).

Josh Max Rubinstein

Joshua Tucker Thanks for the intro into Change events!

Jacky Lee

Have you tried originX / originY?

Josh Max Rubinstein

Jacky Lee I believe originX only works for scale & rotate transformations.

Read the entire post on Facebook