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

What is Framer? Join the Community
Return to index
Geunbae Lee
Posted Apr 03 - Read on Facebook

Hi,

Can anyone tell me the reason why the shapes overlap when I click on the shape really fast?

circle.on Events.Click, ->
if circleBig.opacity is 0
circleBig.animate
properties:
opacity: 1
time: 1
indicator.animate
properties:
x: 100
curve: "ease-in"
time: 1
squareBig.opacity = 0
diamondBig.opacity = 0
ovalBig.opacity = 0
else
circleBig.animate
properties:
opacity: 0
time: 1

This is my code for one shape, circle

1 Comments

Henrique Gusso

The shapes take 1 second to transition from 0 to 1 opacity. So if you click the square and then click the circle before 1 second has passed, squareBig.opacity = 0 will be overwritten by the fact that squareBig is still animating into 1. It didn’t reach 1 yet so it will continue animating.

One possible solution would be to also animate the opacity to 0 instead of just setting it, which overrides the animation that was happening.

Read the entire post on Facebook