Component
Fluid Step Hint Animation in Framer
This is a fluid step hint animation recreated in Framer from Nitish Khagwal’s work. Explore how it’s built without writing any code, or simply copy the component to use in your own projects.
Created by
About the resource
To create the fluid step hint animation in Framer, I set up a bar component with two variants (default and hover) and a steps component with five variants. In the default state, all hints and the pill are hidden at opacity 0. Each step variant then reveals its hint content by switching opacity to 1 while moving the pill to the corresponding step position. The bar’s mouse enter interaction triggers these variants directly, with smooth transitions applied for a seamless, fluid effect.
About the resource
To create the fluid step hint animation in Framer, I set up a bar component with two variants (default and hover) and a steps component with five variants. In the default state, all hints and the pill are hidden at opacity 0. Each step variant then reveals its hint content by switching opacity to 1 while moving the pill to the corresponding step position. The bar’s mouse enter interaction triggers these variants directly, with smooth transitions applied for a seamless, fluid effect.
About the resource
To create the fluid step hint animation in Framer, I set up a bar component with two variants (default and hover) and a steps component with five variants. In the default state, all hints and the pill are hidden at opacity 0. Each step variant then reveals its hint content by switching opacity to 1 while moving the pill to the corresponding step position. The bar’s mouse enter interaction triggers these variants directly, with smooth transitions applied for a seamless, fluid effect.
The five variants of the steps component in Framer.
The five variants of the steps component in Framer.
The five variants of the steps component in Framer.
