I have been enjoying Framer Motion's animation library.
Framer Motion is beautiful and easy to use out of the box.
I was inspired by Ehsan Rahimi's counter design as I took on the challenge of developing it with framer motion.
Dribbble:
Tally Counter Micro-Interaction by Ehsan Rahimi on Dribbble
I used tailwind css for styling, react icons for icons, and animation framer for animation.
For state, interaction will manage using a simple use state.
We will have a number for the count and a boolean for showing the clear icon action.
Let's dive into the drag gesture.
The drag gesture follows the rules of the pan gesture but applies pointer movement to the x and/or y axis of the component.
dragConstraints - constraints on drag area.
drag and on drag end events listener.
Look at the code for the full vision.
Link for framer documentation:
Gestures | Framer for Developers
Top comments (0)