Component

Filters Animation in Framer

This is a Filters Animation recreated in Framer, from Nitish’s work. Feel free to remix the project to explore how it's built without any code, or copy the component directly into your Framer project.

Created by

Nandi

Prianca

and

Nitish

Task management menu with Tasks selected and cursor hovering on Appointments

About the resource

To create this animation, I started by setting up three components: the item, the item list, and the main filter component that brings everything together. The item component has three variants — unchecked, checked, and hover.

Task component showing unchecked, hover, and checked states — The three vairants of the item component.

Then I created the item list component, which is a stack of multiple item components. I made sure there's no gap between them so that the hover transitions feel smooth and connected. One of the items is set to the checked state by default, just to show that it’s selected when the menu opens.

Task management component variants showing different selection states — The six variants of the item list component.

Next, I added two events — one called “check” and another called “not visible.” The check event is triggered when an item in the unchecked state is clicked. This interaction changes the variant of the clicked item and marks it as selected.

The main filter component includes the item list, this component has two states: visible and not visible. The visible state is when the menu is expanded and all the items are shown. Once an item is selected, the “not visible” event is triggered, which closes the menu and brings it back to its original button form.

Filters Animation in Framer

About the resource

Learn the fundamentals of Framer for free.

More resources