Max Barvian
@MBarvian
Followers
1,784
Following
117
Media
32
Statuses
163
Design Engineer @wearediagram . Currently building: 📦 NumberFlow — 📦 fluid-tailwind —
San Diego, CA
Joined March 2022
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
برشلونة
• 777516 Tweets
BRICS
• 559224 Tweets
Eminem
• 333784 Tweets
John Kelly
• 249100 Tweets
Atlantic
• 240891 Tweets
Trump is Hitler
• 196813 Tweets
Barcelona
• 153275 Tweets
Bayern
• 142626 Tweets
Pegasus
• 138141 Tweets
#tusaş
• 126872 Tweets
#BlackOps6
• 86760 Tweets
Peñarol
• 62748 Tweets
Hopkins
• 52625 Tweets
#6GoldenYearsWithATEEZ
• 48103 Tweets
#편도행_해적선_6년째_순항중
• 46850 Tweets
Desperation
• 43918 Tweets
Şehitlerimize Allah'tan
• 42105 Tweets
Botafogo
• 36454 Tweets
Raphinha
• 28384 Tweets
Rio de Janeiro
• 24508 Tweets
Recreio
• 19246 Tweets
Varela
• 18775 Tweets
Fallout
• 18540 Tweets
Hatch Act
• 17364 Tweets
Brest
• 16776 Tweets
INBA
• 15082 Tweets
Leverkusen
• 14206 Tweets
Atalanta
• 11553 Tweets
Fermin
• 10726 Tweets
Pinned Tweet
Introducing <NumberFlow/> for React:
Transition, format, and localize numbers.
Built on Intl.NumberFormat and Web Animations. Dependency-free. Accessible. Customizable.
110
351
5K
Intl.NumberFormat +
@Framer
Motion layout animations are a match made in heaven. Dropping a package for this (hopefully) soon
cc
@mattgperry
18
31
880
CSS scroll snapping + Framer Motion's useScroll + useSpring + React Three Fiber = magic
Demo:
Repo:
Design by
@punkhoa
@mattgperry
@0xca0a
19
48
653
Framer Motion layout animations + `width: 0/auto` were perfect for recreating these legendary
@Family
animations by
@lochieaxon
:
8
31
521
fluid-tailwind 🌊⚡️
Smoother responsive styles in less code.
• Works with every Tailwind utility
• Full IntelliSense
• Checks accessibility of fluid type
👉
6
41
270
This slider is MotionNumber's final boss. The approach here worked well but relied on 3d transforms which seemed to trash performance in Chrome 🫤. Back to the drawing board
6
1
79
@k_grajeda
@family
Fav detail: it computes the nested border radii so they align during the transition
0
2
31
fluid-tailwind v0.2.0 🆕
• Simpler setup
• Option to bypass accessibility checks
• 2 small bug fixes
👉🏻
Thanks for all the ideas and feedback so far!
4
3
28
@MitchBernstein
Not super exciting but it was a cool chance to play around with the View Transitions API (Chrome only atm) 👉🏻
5
3
27
.
@jaffathecake
's linear() easing generator is invaluable for emulating springs with CSS alone (necessary for i.e. View Transitions). Same syntax as Framer Motion!
0
3
24
I'm throwing my hat in the ring here
(Framer Motion)
finding it heartwarming seeing a lot of people recreate this animation. it's relatively simple and approachable, so watching how others break it down into it's components is fun to see
11
35
947
1
0
21
This is the successor to MotionNumber, rewritten to address tricky bugs and drop the dependencies. It should work just as well with Framer Motion and handle far more use cases 👍
1
0
22
@framer
Credits:
@family
for overall inspiration,
@emilkowalski_
for course/tips,
@artur_bien
for mask-image technique,
@mattgperry
for Framer Motion (ofc) 💙
1
0
15
Tailwind CSS pro tip⭐️
Reduce bundle size and increase performance with the config option:
experimental: { optimizeUniversalDefaults: true }
(Doesn't work if you're using scoped CSS, i.e. CSS modules, Vue, Svelte, etc.)
1
3
12
Which should be the default transition duration for MotionNumber? (Feel free to suggest an alternative 👋)
1
1
9
For the curious, this is the 3d transform I was referring to. I wrapped the numbers in 3d space so I could rotateX the container and apply a bunch of composited WAAPI animations to handle interruptions. Any advice to get this working better in Chrome would be greatly appreciated
2
0
10
@KevinJPowell
I add this on basically every new project (stack children on top of each other). Here's an example where the top and bottom captions overlap, ensuring the pages in the middle are always properly aligned:
1
0
6
Emil's course taught me everything I know about UI animation 💯
My animation course is live!
It contains everything I know about animations on the web.
We'll build all of these and more.
60
141
2K
1
0
5
0
0
4
Credit to
@wickedmishra
for the warning shake animation 👋
Family's fluid button.
Made with Tailwind and Framer Motion. Concept by
@family
.
Thanks to
@JaceThings
for the font and the icons.
Code: .
12
28
718
0
0
4
@benjitaylor
I loved
@family
's number animations so much that I had to try recreating them on the web 💙
cc
@lochieaxon
you guys are on another level
1
0
3
@supabase
@expo
@FlutterDev
@StripeDev
I'm so happy to see you guys prioritizing local development with these too. One of my favorite parts of the platform!
0
0
3
@lochieaxon
feedback welcome! I thought layout animations would be the most performant way to handle this
1
0
2
1
0
2
@branmcconnell
I copied your tweet format for the Tailwind plugin I just shared 😄
fluid-tailwind 🌊⚡️
Smoother responsive styles in less code.
• Works with every Tailwind utility
• Full IntelliSense
• Checks accessibility of fluid type
👉
6
41
270
1
0
2
Animation made possible by
@antfu7
's awesome Shiki Magic Move and
@screenstudio
(ofc)
fluid-tailwind v0.2.0 🆕
• Simpler setup
• Option to bypass accessibility checks
• 2 small bug fixes
👉🏻
Thanks for all the ideas and feedback so far!
4
3
28
0
0
3
1
0
1
@jh3yy
So cool! How did you break the images out of the list items? I did the same thing with this slider but hit some bugs when the list item was close to 100% the width of the container (not pictured)
Another CSS-only carousel with scroll-driven animations 🪄. Design by Risang Kuncoro:
0
0
0
0
0
1
No Framer Motion was used in the making of this video* (as much as I love that library)
0
0
1
@branmcconnell
@framer
@family
That's sweet! I actually went out of my way to support variable-width fonts, but unfortunately the kerning is a little worse when every char is wrapped in an element. Haven't seen a way to correct that:
0
0
1
fluid-tailwind users: which syntax would you prefer?
A) ~md/lg:~text-4xl/7xl
B) fluid-md/lg:text-fluid-4xl/7xl
(For B, the "fluid" keyword could be changed with a plugin option and there'd be no need for the custom extractor)
A
3
B
2
🍿
1
1
0
1
@jh3yy
@guilherme_rodz
This is unrelated but could you explain the difference between that selector and this one?
[&.bg-blue-500]:bg-red-500
1
0
1
1
0
1
@matiNotFound
Love that it uses theme.fontSize values 😃. I'm working on a really similar plugin
0
0
1
0
1
1
@tallneil
@astrodotbuild
Thanks! Chromium-only at the moment. It falls back gracefully though 🙂
0
0
1
@sdothaney
Just ran into this myself; decided to do separate packages per wrapper so the peerDeps would be cleaner 🤷♂️
0
0
1
Macros feel like total game-changers for FE
📢 Parcel v2.12.0 brings support for macros, a new web-based REPL, improved CSS bundling, and manual code splitting!
Macros are JS/TS functions that run at build time instead of being bundled. They can generate constants, code, and even assets (eg css)!
9
42
296
0
0
1
@UnoDwicho
@codrops
They definitely work better with a trackpad! It *should* still work with a scroll wheel as long you scroll horizontally. Scroll snapping for me gets pretty jumpy with a scroll wheel, though 😐
1
0
1
@darylginn
Yeah, I'm glad Godly exists b/c I feel like scrolljacking is a prerequisite to win SOTD (or any Awwward really)
0
0
1
@simeydotme
Awesome! btw I'm sure you get this a lot but your Pokemon cards are some of the best things I've seen on the web 👋
0
0
1
@davatron5000
@Patrick_WC
@View
I'm using Astro's view transitions router so mine's technically an SPA 😄
1
0
1
@adamwathan
@jh3yy
So cool. I think you can get rid of all the scroll margins on the items now right? (fixed the scrollbars for me)
1
0
1
@piotrkulpinski
Glad to hear that! This one should be way more flexible and resilient than the prerelease too 🙂
1
0
1