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.
![Trash Interaction in Framer](https://framerusercontent.com/images/l8p0Uj0a7YLqVP9WyQJyQ7qWZHQ.jpg)
![Trash Interaction in Framer](https://framerusercontent.com/images/l8p0Uj0a7YLqVP9WyQJyQ7qWZHQ.jpg)
![Trash Interaction in Framer](https://framerusercontent.com/images/l8p0Uj0a7YLqVP9WyQJyQ7qWZHQ.jpg)
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 in the trash interaction](https://framerusercontent.com/images/ALTy0t40pOPQieFfD5LVVXoAVPc.jpg)
Components used in the trash interaction.
![components in the trash interaction](https://framerusercontent.com/images/ALTy0t40pOPQieFfD5LVVXoAVPc.jpg)
Components used in the trash interaction.
![components in the trash interaction](https://framerusercontent.com/images/ALTy0t40pOPQieFfD5LVVXoAVPc.jpg)
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 interaction component](https://framerusercontent.com/images/9lzRoi0rDXi0Tf8ziGtIm4aw.jpg)
The main component and its variants.
![the main interaction component](https://framerusercontent.com/images/9lzRoi0rDXi0Tf8ziGtIm4aw.jpg)
The main component and its variants.
![the main interaction component](https://framerusercontent.com/images/9lzRoi0rDXi0Tf8ziGtIm4aw.jpg)
The main component and its variants.