Тёмный

Building an Animated Counter with Framer Motion 

Sam Selikoff
Подписаться 71 тыс.
Просмотров 15 тыс.
50% 1

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 29   
@tshddx
@tshddx Год назад
It would be very cool to apply a very non-linear easing function so that, e.g. when the value=25 the “2” digit in the tens place is perfect centered vertically, when value=29 the “2” digit is moved up maybe 20% of the line height as if it’s resisting the pull to snap to “3” but still easily readable, and then when value=30 it does finally snap over to “3”.
@samselikoff
@samselikoff Год назад
Actually just got this working! Solution was to make the animated value a function of the place of each digit: buildui.com/recipes/animated-counter
@tshddx
@tshddx Год назад
Very cool! I’m old enough to remember when gas station meters worked like this. You also had to go into the gas station and give money to a human after you pumped the gas. Weird stuff.
@samselikoff
@samselikoff Год назад
Lolll I am too! I was looking for an analogue example for my thumbnail but couldn’t find anything, a gas counter like that would a been perfect
@maharta8458
@maharta8458 Год назад
In my country in SEA, you still need to give money to a human :)
@OnlyJavascript
@OnlyJavascript Год назад
@@maharta8458 same here in India.
@TenzDelek
@TenzDelek 10 дней назад
shouldnt have skip my math class back then
@FlorinPop
@FlorinPop Год назад
This is so cool! 😍
@aymenbachiri-yh2hd
@aymenbachiri-yh2hd 2 месяца назад
Thank you so much sam
@fylkasalitheias7451
@fylkasalitheias7451 Год назад
Really helpful indeed. Can't wait to see what other variations of this counter you can implement!
@tuanauduong
@tuanauduong Год назад
Could you create a video to share your VS Code setup? Vim, snippets like range... :D
@samselikoff
@samselikoff Год назад
Yes, this is in my queue! I think I might end up doing a full Build UI course on it
@DIN_A8
@DIN_A8 Год назад
Whats with the thumbnail… ypu DJing :)
@maxwebstudio
@maxwebstudio Год назад
Once again, awesome video ! Thank you ! One question : How do you actually measure an element and then drag the measurement on the screen ? Looks like you are using Cleanshot or Pixelsnap, but i cannot find how to keep and drag a measure on the screen.... Thanks in advance...
@Reminiscer0
@Reminiscer0 Год назад
Your videos are very informative and the time and effort you put into them are much appreciated... Keep up the good work and Thank you!!
@HeyNoah
@HeyNoah Год назад
Damn, this is super cool! Love this!
@suhairhassan
@suhairhassan Год назад
Your explanation is out of this world 🤩
@DEV_XO
@DEV_XO Год назад
More framer-motion content please! 🙏
@IkraamDev
@IkraamDev Год назад
Superb videos as always Sam!
@khairulhaaziq2332
@khairulhaaziq2332 Год назад
please upload in recipes!
@samselikoff
@samselikoff Год назад
That’s the plan this week!
@samselikoff
@samselikoff Год назад
Done: buildui.com/recipes/animated-counter
@soniamaklouf1178
@soniamaklouf1178 Год назад
Hi Sam Thanks for this video Could you make a video on useAnimate hooks
@samselikoff
@samselikoff Год назад
What specifically are you trying to achieve?
@MrDermases
@MrDermases Год назад
What is the measurement tool he is using called? Is it mac / windows specific?
@samselikoff
@samselikoff Год назад
It's the native Mac OS screenshot tool ( + Shift + 4)
@OnlyJavascript
@OnlyJavascript Год назад
this one is awesome...i don't know if you gonna read my comment and approve my request. I would be so much happy, if you make a tut on responsive megamenu with framer motion animation , tailwind and react. Thanks in advance.
@samselikoff
@samselikoff Год назад
Thanks! Any examples you can point to so I can see what you’re thinking of?
@OnlyJavascript
@OnlyJavascript Год назад
@@samselikoff like the one in the official stripe website.
Далее
Building the Mac OS Dock with React
22:09
Просмотров 11 тыс.
How to declaratively animate a carousel
22:46
Просмотров 17 тыс.
ХОМЯК ВСЕХ КИНУЛ
10:23
Просмотров 536 тыс.
Вопрос Ребром - Серго
43:16
Просмотров 342 тыс.
#kikakim
00:10
Просмотров 8 млн
Animated tabs - with inverted text!
12:15
Просмотров 57 тыс.
Bresenham's Line Algorithm - Demystified Step by Step
16:10
I Solved 100 LeetCode Problems
13:11
Просмотров 37 тыс.
Get a sneak peek of Framer Motion Recipes!
25:43
Просмотров 20 тыс.
React Animations just got better
8:05
Просмотров 91 тыс.
How to build a Recursive React Component
21:16
Просмотров 49 тыс.
Animating a Radix Dropdown with Framer Motion
27:11
Просмотров 19 тыс.
ХОМЯК ВСЕХ КИНУЛ
10:23
Просмотров 536 тыс.