Component
Delightful Interest Selector Interaction in Framer
This is a delightful interest selector interaction recreated in Framer from Nitish’s original work. Feel free to remix the project to explore how a complex interaction like this is built in Framer without any code.
Created by
About the resource
To use the delightful interest selector, I created two main components: the Interest Selector and the Emoji. The Interest Selector has four variants that define its default and clicked states.
About the resource
To use the delightful interest selector, I created two main components: the Interest Selector and the Emoji. The Interest Selector has four variants that define its default and clicked states.
About the resource
To use the delightful interest selector, I created two main components: the Interest Selector and the Emoji. The Interest Selector has four variants that define its default and clicked states.
The four variants of the interest selector component in Framer.
The four variants of the interest selector component in Framer.
The four variants of the interest selector component in Framer.
The Emoji component has two variants: inactive and active. In the inactive state, three stacked images are scaled down, blurred, and set to zero opacity. In the active state, they scale up, lose the blur, rotate slightly, and fade in. The staggered animation is achieved by overriding the transition for each image with delays of 0.1, 0.2, and 0.3 seconds. By linking these two components through variables, multiple variations of the selector can be created effortlessly.
The Emoji component has two variants: inactive and active. In the inactive state, three stacked images are scaled down, blurred, and set to zero opacity. In the active state, they scale up, lose the blur, rotate slightly, and fade in. The staggered animation is achieved by overriding the transition for each image with delays of 0.1, 0.2, and 0.3 seconds. By linking these two components through variables, multiple variations of the selector can be created effortlessly.
The Emoji component has two variants: inactive and active. In the inactive state, three stacked images are scaled down, blurred, and set to zero opacity. In the active state, they scale up, lose the blur, rotate slightly, and fade in. The staggered animation is achieved by overriding the transition for each image with delays of 0.1, 0.2, and 0.3 seconds. By linking these two components through variables, multiple variations of the selector can be created effortlessly.
The two variants of the emoji component in Framer.
The two variants of the emoji component in Framer.
The two variants of the emoji component in Framer.
