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

What is Framer? Join the Community
Return to index
Will Anderson
Posted Jun 29 - Read on Facebook

Hey all, I'm trying to create a simple grid of images that can be filtered down based on user action.

In the prototype attached, here is what I want to have happen: When a user clicks on an image , the image animates out (fades to 0 opacity, and scales down slightly). Subsequently, the grid updates to fill in the position left empty by the deleted tile.

Instead, here is what is happening: With the following code, the image gets deleted without any animation, and the grid updates.

for tile in tiles
tile.onClick ->
this.animate
scale: 0.95
opacity: 0
this.visible = false

Or with this following code, the image gets deleted with an animation, but the grid doesn't update.

for tile in tiles
tile.onClick ->
this.animate
scale: 0.95
opacity: 0
visible: false

Anyone have any suggestion for getting the tiles to animate out AND have get the grid to update?

2 Comments

Sigurd Tapio Mannsåker

Ended up replying on Slack, but just in case anyone else reading this needs anything similar, here's one way to do it: https://framer.cloud/fjFvd

Will Anderson

thanks Sigurd !!

Read the entire post on Facebook