Hi, I’m trying to make a simple icon animation where a circular icon increases in size slightly when it’s hovered over.
The animation happens but the origin of the animation is the top left corner of the icon, so it’s size increases down and to the right, rather that from the bottom center as I’d like.
Changing the contraints to center/bottom has no effect.
How exactly do you specify the origin point of the animation?
Thanks 🙂
Best answer by ntfromchicago
You really can’t change the origin point of an animation. For your use case, it’s best that both circular icons have identical containing frame sizes to ensure a proper animation (so put each in a frame if you haven’t already).
Depending on the type of spacing you need to protect, you can make the smaller-sized icon frame larger, or the larger-sized frame smaller with clipping turned off. Then make sure the circular icons are centered in their respective frames.
You really can’t change the origin point of an animation. For your use case, it’s best that both circular icons have identical containing frame sizes to ensure a proper animation (so put each in a frame if you haven’t already).
Depending on the type of spacing you need to protect, you can make the smaller-sized icon frame larger, or the larger-sized frame smaller with clipping turned off. Then make sure the circular icons are centered in their respective frames.
Thanks so much for the advice, I’ll give it a shot and see how it turns out 🙂
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.