Trash Interaction in Framer

Copy component

Copy component

Trash Interaction in Framer

Copy component

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.

image of Nandi Muzsik
profile image of Emil Kowalski

Created by

Trash Interaction in Framer
Trash Interaction in Framer
Trash Interaction in Framer

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

Components used in the trash interaction.

components in the trash interaction

Components used in the trash interaction.

components 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 interaction component

The main component and its variants.

the main interaction component

The main component and its variants.

the main interaction component

The main component and its variants.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Figma Community Hero Interaction in Framer

    Figma Community Hero Interaction in Framer

    Interaction

    Figma Community Hero Interaction in Framer

    Figma Community Hero Interaction in Framer

    Interaction

    Figma Community Hero Interaction in Framer

    Figma Community Hero Interaction in Framer

    Interaction