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
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.
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.
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.
The three vairants of the item component.
The three vairants of the item component.
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.
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.
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.
The six variants of the item list component.
The six variants of the item list component.
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.
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.
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.
The two variants: visible and not visible of the filter component.
The two variants: visible and not visible of the filter component.
The two variants: visible and not visible of the filter component.
