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

What is Framer? Join the Community
Return to index
Robin Fox
Posted Jan 05 - Read on Facebook

So I've been working on a prototype where when a user clicks the edit button, they're able to delete selected cards. That part seems to work just fine, however I seem to be having trouble when there are two cards left. Instead of moving to the left edge, I seem to have a residual "border" layer taking up that space, and so the two remaining cards don't move over.

I've been using this old prototype for reference, because it's what I'm trying to recreate, just on a smaller scale. So a lot of my code I use comes from this.

http://framerjs.club/photo-gallery/

I made a small video showing the problem. Does anyone know why this is happening?
https://drive.google.com/file/d/1MnNmKpt0ev0qIYSmE1oml5UYgHZtzrHA/view

My prototype
https://framer.cloud/EnCGh

1 Comments

Niels van Hoorn

Hi Robin, There were some errors in your positioning logic: because the example prototype you used had 4 images per row, and yours has 3, you not only need to update the (i % 3) part, but also the Math.floor(i / 4) to Math.floor(i / 3)
This was masked by creating one image to many in the initial Card loop, because there you were looping using for i in [0..GalleryImage] instead of for i in [0...GalleryImage]. Only one dot difference, but it ment that you were looping 7 times (0 up until including 6) instead of 6 (0 up until excluding 6).
Here's a version of your prototype with the proposed changes, which I hope works as you inteded: https://framer.cloud/qeSlu

Read the entire post on Facebook