Interaction
Trash Interaction in Framer
This is a no-code recreation in Framer of the trash interaction originally seen in Emil's course. I enrolled in Emil's course about web animations, where he teaches how to code interactions like these. I saw this trash interaction as an example in the course and took it as a challenge to see if it was possible in Framer without any code—and I succeeded. Feel free to remix the project to see how it's built.
About the resource
To create this interaction, I used a bunch of components and variants in Framer. I won't go into detail on how each one is structured; I'd rather talk a little bit about the main trick I used to make this work.
I implemented a little trick that lets me animate the items nicely into the trash from their starting position. When I click the trash button, all four selectable items disappear, but in place of the selected item, a new item appears. It looks the same and is positioned exactly where the previous item was, so you don't notice anything since it happens instantly. I do this because this new item that appears in the selected item's place is now absolutely positioned, instead of relative, so I can nicely move and animate it into the trash.
About the resource
To create this interaction, I used a bunch of components and variants in Framer. I won't go into detail on how each one is structured; I'd rather talk a little bit about the main trick I used to make this work.
I implemented a little trick that lets me animate the items nicely into the trash from their starting position. When I click the trash button, all four selectable items disappear, but in place of the selected item, a new item appears. It looks the same and is positioned exactly where the previous item was, so you don't notice anything since it happens instantly. I do this because this new item that appears in the selected item's place is now absolutely positioned, instead of relative, so I can nicely move and animate it into the trash.
About the resource
To create this interaction, I used a bunch of components and variants in Framer. I won't go into detail on how each one is structured; I'd rather talk a little bit about the main trick I used to make this work.
I implemented a little trick that lets me animate the items nicely into the trash from their starting position. When I click the trash button, all four selectable items disappear, but in place of the selected item, a new item appears. It looks the same and is positioned exactly where the previous item was, so you don't notice anything since it happens instantly. I do this because this new item that appears in the selected item's place is now absolutely positioned, instead of relative, so I can nicely move and animate it into the trash.
Components used in the trash interaction.
Components used in the trash interaction.
Components used in the trash interaction.
The main "Trash Interaction" has a bunch of variants and interactions because I had to specifically define each item selection scenario. So, I needed a variant for the scenario when only the top-right item is selected and then deleted, and so on.
The main "Trash Interaction" has a bunch of variants and interactions because I had to specifically define each item selection scenario. So, I needed a variant for the scenario when only the top-right item is selected and then deleted, and so on.
The main "Trash Interaction" has a bunch of variants and interactions because I had to specifically define each item selection scenario. So, I needed a variant for the scenario when only the top-right item is selected and then deleted, and so on.
The main component and its variants.
The main component and its variants.
The main component and its variants.
