Jeroen Reumkens — FrontendFYI
@JeroenReumkens
Followers
3K
Following
5K
Media
912
Statuses
9K
Teaching the craft of Frontend. ⇢ https://t.co/V6ZSHM3bCs ⇢ https://t.co/CpnJSWfVpv ⇢ https://t.co/3FRyrFvzEv ⇢ https://t.co/WWaSeuNKKY
Amsterdam, The Netherlands
Joined April 2009
Dotted some i’s on this new hero animation ✨
11
14
343
Please don't tell me I'm the only one who keeps multiple clones of the same repo for the sake of quickly switching branches, in order to build or test another feature 🥲 Imo it's so much easier than constantly stashing your work.
105
4
526
Did you know you can make certain <td>s in your tables position sticky, to create this effect? 👀. I'm honestly amazed at how well this seems to work everywhere. So happy I could still use a table for it now!
11
14
363
For my upcoming video I came across this cool website built by Google! I saw the animations are built with ThreeJS, and thought; Why not with CSS!? So that's what you see below, my minimal (almost css only) replication! Soon on YouTube! 📺.
6
32
292
Just dropped the new Motion for React landing page animation ✨. Let me know what you think of it! (yes, domain will change soon too!)
8
5
127
Did you know you can animate CSS Grid Layouts from one layout to another?. In today’s video we will be exploring just that by creating this case slider, using animated grid layouts and combining it with the :has() pseudo selector. CSS is so much fun lately! Link in next tweet!👇
3
12
111
The past 2 days I've been in hyper-focus, building this tagging input for a client of mine. This was definitely NOT easy to build🤯. Got quite far already! Using / hotkey for the category, then select an item, which is inserted as a tag. Including selecting, editing, backspacing!
7
0
112
@DThompsonDev There's a difference though between being comfortable with both and calling yourself a real fullstack developer. Often fullstack developers are more backend oriented and can't make killer UI. I strongly believe the best UI gets made by specialists most of the time.
10
3
101
Finally reached 2000 followers. Thanks all!
17
1
84
Use Next.JS they said — it will be fun they said.
14
3
72
@adamwathan Parentheses with commas definitely make most sense to me;. before:(bg-black,border-2,w-full). Quick to write and easy to spot grouping. Perhaps IDE can even highlight open and closing parentheses. Hoping you can come up with something smart for the bloat, since this is so nice!.
5
0
74
I'm 8 hours into porting my website from Next.js to @astrodotbuild , and it's about 80% done I think 🤯. All main functionality is ported – all page types, account functionality, payments, subscriptions, paywalls, authentication. Literally all big parts. I think I might need 4.
12
2
71
@adamdotdev But that AWS UI though 🥲 .I need to hire 10 additional people to only navigate the UI.
6
0
72
I'm SO happy with my switch to @astrodotbuild for the course platform, instead of sticking with Next's app dir, or switching to Remix 🤯. Astro is so much more than "that static site framework™". I'm building a complete platform in it, with DB calls, paywall etc. It's a breeze!.
8
4
68
New video dropping later today! I'm loving how easy it its to create this realistic animations with Framer Motion! . Make sure to subscribe so you don't miss it!
3
5
64
I really dig these perspective UI layouts 🔥 So when I saw the cool hero @aarondfrancis did on the Mastering Postgres Homepage. I knew I had to make something (very) similar to that. Hope you don't mind Aaron, it just looks so cool!
2
1
62
@EisenbergEffect I think this would be a cool topic for a video actually! . Some of the biggest benefits I want to highlight all have to do in building products with teams: .- It brings consistency. No (less) discussion on standards and naming. Everyone uses what's there. - Also brings the.
6
6
51
Some first steps at spicing up the hero with some animation 🥰. Still have to improve video loading too.
3
1
51
@EisenbergEffect I feel you. Those arbitrary values are ugly, perhaps even make you a bit less productive and make your code messier. But that's such a minor annoyance compared to all the great benefits it brings you. I've resisted a long time against Tailwind, but wouldn't wanna go back now.
2
0
47
New video dropped! 🔥. We're gonna use Framer Motion and its Drag API to create this very satisfying folding map animation! I'm sure you'll learn a trick or two here!. Links in the next tweet 👇
1
3
50
@steveschoger Wow, really didn’t expect a book to be THAT expensive 😕 I really love your work and was looking forward to the book. But this is very expensive I think 😢 Will there also be an opportunity to buy the book without all the extras?.
2
0
47
Working on changing my Framer Motion course page to say “Motion for React”, now the new name is official 🔥 @mattgperry . Great moment to add a bit more fun to the page too!
4
2
48
Making these (hopefully very clear ;) ) visualisations for my Framer Motion course. Explaining the differences between containers and targets, as well as how that changes the scrollY value of the useScroll hook. These things take so much time to make, but are so worth it!
2
4
47
I couldn't resist sponsoring @mattgperry his new adventure. This library had a big impact on the way many of us create animations. Sponsoring this is a no-brainer, so Matt can keep improving this amazing library for all of us 🙏
🎉 After six incredible years at Framer, it’s time for my next step. Today, we’re spinning Framer Motion out into its own independent open-source project, to better serve the whole community. Introducing Motion. For React, and now, for everyone.
2
3
46
Expressive Code is the best!! So happy that this thing just works and doesn’t take days to configure properly. Been using EC for at least over half a year in all my tutorials — just love it!.
Need to add a ```diff, but still want syntax highlighting?. Starlight comes with expressive code built-in ✨.Highlight whole lines or regex the right string.
0
1
46
Gonna try some live streaming in 2 hours from now! Building a landing page for Using Tailwind and Nextjs. Find me on Youtube or on Twitch . First time ever doing a livestream, what could go wrong.
2
4
42
@SeanBrydon13 Wooow. This is new to me. Seems like multiple clones is the poor mans version of git worktree 😂 Seems to integrate great with vscode as well! Will definitely try this out!.
1
0
41
Even though my linting rules don't agree yet, this is now becoming valid CSS 🤩 It is available right now in Chrome. Amazing to see one of the best features of preprocessors landing in plain CSS!. See here:
5
10
41
Eventually it took me 24 hours of work to convert my full website from Next.JS to @astrodotbuild. 489 files changed, 15k lines removed, 10k lines added 🔥 I decided to not wait with combining the course platform with this new platform, but rather to it immediately. Which is why.
I'm 8 hours into porting my website from Next.js to @astrodotbuild , and it's about 80% done I think 🤯. All main functionality is ported – all page types, account functionality, payments, subscriptions, paywalls, authentication. Literally all big parts. I think I might need 4.
6
2
41
I can't believe it's almost 2 years since I started building this vision I had as a side project🤯. In these two years I came so far — yet this is only the start! It is my dream to built the best frontend education platform out there ❤️ Thanks for being part of it!
5
2
40
Ready to record this weeks YouTube video. All about these sexy frosted glass components you see all over Twitter lately 🥰
8
1
40
CSS Subgrid is such an amazing addition to CSS Grid. Yet it’s also quite confusing why and when it’s useful. Today we will be diving into just that by rebuilding @raycastapp their pricing table. Enjoy the video!.
1
4
39
So last weekend I decided to take @joshcirre his OBS setup to the next level by adding animations too! I decided to record a little tutorial on how I managed to do it for you all. This makes my tutorial recordings so much less effort, while keeping in the smooth animations❤️
5
3
39
I did a thing just now! I finally pushed that merge button and released the marketing page of the Framer Motion Course! . Check it out and tell me what you think about it: Now full onto recording the lessons 🫡 I hope you're just as excited as I am!!
8
2
38
Just released a first version of my new course navigation 🔥 This is soooo much better!
1
1
37
Spicing up a pricing table with some small animations. Hope you don’t mind having your face up there @peer_rich 😅
2
1
36
Updated the website! 🔥 Decided to add (most of) the videos on here as well. I think this gives you a better overview of all the content I'm offering, and perhaps better filters etc later on. Also really liking the mini video cards of the end result 🥰
2
3
30
It's interactive explanations like these that make my courses be on a different level than most 🔥. Explaining to you how Framer Motion Layout Projections work. Great work takes time. In the end it will be worth all the time I invest in this ❤️
3
4
36
Just now released a new YouTube video on how to create this beautiful frosted glass effect with CSS (Tailwind). The link to the video is at the end of this thread, but first let's do a short breakdown of the techniques here too.
3
5
36
Excited to share my latest Framer Motion course module — all about Layout Animations 🔥 . If you’ve seen any cool Framer Motion examples online, there’s a good chance that 95% of what impressed you was thanks to layout animations. Continue reading to see what I'll teach you.
3
1
35
Recorded this week’s video just in time for a team offsite I have this week. The video is off to my editor and I’m gonna do my best to still upload it this week! . Look at this beauty 😍 Super easy thanks to @framer motion. @mattgperry
2
4
36
Just passed 20.000 subscribers on my YouTube channel ❤️ Super grateful for each and everyone of you! . Today I will definitely take some time to reflect on the growth this past year — nothing is for granted friends!
9
0
33
In my next video I’m rebuilding @linear’s amazing website with Next.js and @tailwindcss. Time to show people you can build ANYTHING with tailwind 🔥. Check part one now: This series is far from finished. Their website has so many details 🥰 More next week
2
2
33
I was just looking at your @_buildui website @samselikoff and noticed a few unnecessary scrollbars that you're probably not aware of. An awesome trick I always tell Mac devs is to always enable scrollbars in your a11y settings, so you spot these things 🙏 Hope you appreciate!
2
1
33
Finally making some great progress with the course platform. Excited about this!!
2
1
32
Happy New Year, everyone!✨ After a 2.5-week holiday, I’m back and ready to kick off 2025🔥 So many exciting ideas!. We took two trips during the break—Antwerp and Paris—and spent Christmas with family. It was such a great time to unwind and recharge. Did you take some time off?
2
0
31
WIP on the Framer Motion course. Finally making good progress with Astro playing along so nicely ❤️
2
2
29
@adamdotdev Define creating value though. Without UI’s nothing would earn money. No Google interface to search for stuff, no way to stream the Netflix videos, way less possibilities to track user behavior. I think you can’t really compare them. The fields are too different, and complemental.
6
1
30
Okay now I feel at least a little bit special 🥹. Was also fan-girling a bit when having a call with Wes earlier today, I tell you that. Hahaha.
3
0
29
I still miss the team 🥹.
its wild that people think tailwind is too "limited" and yet here we are whipping out the most insanely nice looking and fast calendar UIs at @calcom . no human cares about HTML output. shoutout to @JeroenReumkens for building this beauty
5
0
29
Working on a future video where we'll be exploring the world of (trippy 😅) marquee sliders — without position absolute (so WITH transform), without repeating/duplicating logo's and without JS. The demo is ready. Recording the video soon!
0
0
29
This video by @joshcirre inspired me to simplify my workflow drastically, maybe even switch back to Descript too. I spend way too much time on small details like animations. So the past weekend I finally sat down to use OBS for this, including animations. So happy 😍
This video isn't going to be my most watched video. But being able to look back on this in the future will be fun. People always ask me about my process & tools when making videos. How did I make 100+ videos in 1 year on my channel?. I share everything here. This is my process.
2
1
29
I'm so frustrated that Next app dir issues have been around for over 6 months, and especially that in these issues there's 0 communication on when we can expect this to be picked up or any progress that's perhaps made already. It feels that app dir is pushed as 'stable-ish',.
7
2
27
We’re too obsessed by using complex tools for animations. Look at these simple yet stunning animations and see how easy it can be😍. Only prerequisite is you know to manipulate svgs. But by using ThE pLaTfOrM you can already achieve many great things! . Amazing work @samuelkraft.
🎛️ Loved animating these isometric api illustrations by @danhollick for the new Raycast site. They’re all SVG:s animated with CSS, here’s how it works (it’s dead simple) 👇
2
0
28
Working on a new section for the website 👀
3
0
27
Currently working on the final touches for my new Framer Motion course module — all about scroll animations. Take a look at this intro lesson showcasing (almost) everything we'll be learning and building together. This is gonna be such a good module! 🤩
5
0
26
Tomorrow I'll be going live again. Wednesday Apr 3rd 3PM UTC. We continue building the @calcom landing page! Make sure to tune in via Youtube or Twitch (links in my profile). Check out the recording of last Friday there too, in case you can't wait 😉
0
3
26
What I’ve been working on the past few months? THIS! 🤯. We’ve been rebuilding our booker page practically from scratch. Rebuilding quite a few fundamentals, making things quite a bit simpler, smoother ánd faster, and added 2 extra calendar views along the way! 🔥 . Proud!.
you asked, we delivered: column and weekly views for your public booking pages
0
1
25
Just added "picture in picture" to the lessons. If you leave a video playing while you scroll through the text of the lesson, the video will float on the side 🥰 .A gift to all you multitasking people out there! . One more day till release!
1
1
26
@sweatystartup South Africa is super interesting for people in EU like me. When will more info about this be added to the website? . Also would love to read more how payroll construction would work. Since it would be my first hire, it being overseas right away brings many questions. Thanks!.
3
0
29
OMG, I just released the first modules of my Framer Motion course! . Check my latest YouTube video where I show you the custom courses platform I’ve built, or head to the course right away: . I'm EXCITED!.
3
1
25
I'll be live streaming for the first time tonight 🤯.At 4PM UTC we'll be building a landing page for @calcom live! Come join me, it will be my first stream ever, so probably some silly mistakes too!. Find the links in my profile! Live on both YouTube and Twitch (if I manage 😅)
3
4
25
GO GO GO. Thank you all ❤️ . I'm humbled by this growth! The numbers might feel like peanuts to some, but to me this is a LOT. Can't wait where I'll be at a year from now! I have a lot of ideas for the coming year once the course platform is up and running!🔥 (free content too!)
2
0
25
Not fully happy with it yet (and also not finished yet), but I thought it would be fun to show a small work in progress video of the course contents section for the upcoming Framer Motion Course on Frontend FYI PRO🔥
3
0
26
Why wouldn't I create a tiny record player, to show you the power of changing flex direction + layout animations in Framer Motion 🥰
2
1
25
Welcome to the family Maeve!. After driving my first Model 3 for 5 years, I traded Dolores in for the new model today. What a beautiful car in such a great (changing!) color. So many small improvements have been made to this car in 5 years. I love it!
4
0
24
The fact that you can create these native feeling animations with Framer Motion is so crazy to me 🥰 Especially being so effortless! . Watch the tutorial where I show you how to build this yourself in the replies!
2
1
22
Uhm. Am I building a Card component or a spaceship?! 😒. I really can not grasp why people like Shadcn so much. But I guess I shouldn't say that out loud 😅
9
0
24
Wrapping up the text versions of the next 2 modules for my Framer Motion course. I'm so happy with the introduction lesson, clearly showcasing what you can expect of the module!. Next two modules will be about: 1. More advanced animation techniques, 2. Responsive animations
1
0
24
Okay — I think I made quite some progress in the way my videos look in the past few videos (3 months time between these two videos) 😅. Feeling a bit proud of myself! Next week already uploading video number 25 to 🔥
3
0
23
@adamdotdev Well. if there would be a way to deploy my site to AWS with a similar amount of effort (including setup effort) as vercel, I’d love to learn how. My only memory of AWS is 10.000 options for everything, being so overwhelming and afraid to choose wrong, that I’d eventually gave up.
10
0
24
Did you know my Linear rebuild has almost 150 stars on Github?! It was one of the first video series I did on my channel! . What should I rebuild next? Let me know!
6
0
24
Uploading a fun video to YouTube later today. Am I taking it too far with my cover image? 😂
2
2
24
In this week's video I'll be diving in what I think is the ONLY way you should use Tailwind. It is all about removing stuff!. Instead of linking to YouTube, this week you can watch it right here on Twitter too! Let's see if that works.
1
2
22
We made it to 9k 🥳.Crazy to think 9.000 people are interested in my videos! Imagine all of them in a single room! . Thank you all! I feel proud.
2
1
22
Oooooh shit. We just passed the 100 PRO members — Crazy! Can't wait to see where we are at in 12 months from now.
2
1
22
Wait whaaaat. Sick!.
CSS magic: now you can animate height from 0 to auto via `calc-size(auto)` . Say goodbye to JS Calculate Height!. Combined with <details name="">, a nearly perfect and exclusive Accordion component can now be implemented. @Una @davidbaron .
1
1
22
I'm SO excited! In my latest video we are again doing a rebuild. This time of Opal's Tadpole webpage. A page filled with nice animations, which we are going to recreate using modern CSS: Scroll-driven animations. This is gonna be a good one! #FrontEnd .
2
2
22
22k views is quite unique for me 🤯 Thanks for all the retweets people! This is gonna be a good one! Dropping early next week!.
For my upcoming video I came across this cool website built by Google! I saw the animations are built with ThreeJS, and thought; Why not with CSS!? So that's what you see below, my minimal (almost css only) replication! Soon on YouTube! 📺.
1
1
21
Reviewing my 2 hour long AppleTV+ rebuild — It's soooo good! On YouTube soon!
0
0
20
Well. Let’s see what this brings! I’m here for it.
1
0
21
After seeing the tweet below I knew what had to be the basis for this week’s video 😍. Built with Framer Motion! On YouTube this week or early next week. Make sure to subscribe via the link in my profile!
2
0
22
Ready to record module 6 of the Framer Motion course: Scroll Animations 🔥
1
0
21
Today it’s exactly ONE year since I published my first YouTube video. In that time people watched my content almost 16.000 hours. A crazy number to me 🤯 So grateful for each and everyone who watched! Thank you!. This is only the beginning!.
2
2
20
Hahaha. Honestly didn’t expect @stripe to ship a tshirt all the way from the US to the Netherlands for just 4 euros 😅. Got this because I did a test payment (with real money) on Not expecting anything for it because of the low price. But they shipped😂
1
0
21
Doing some more work on pricing tables this afternoon. CSS Subgrid is so nice for aligning all these rows! Check my video about it linked in the replies.
1
3
21
The first 3 modules of the course will DROP on Feb 1st!. The past few months have felt like they were never ending. I started to make a course about Framer Motion and thought I would be able to release that easily by October 2023. I was so wrong. 😂 Read on! #buildinpublic
1
4
20
@adamdotdev It’s really nice of you to even post this message. I think there was nothing wrong with the video. You address a general problem on social media — people getting paid to promote stuff. That happens a lot outside tech as well. And you simply state that we should take what people.
2
0
19
Back to the simple days of the web. Literally for the majority of the sites out there this is all you need. I really love working with Astro.
Introducing JQuer- wait *ahem* simple query ✨.The best way to make Astro interactive!. - query elements with $.- create scoped ids to avoid global conflicts.- use npm packages and TS from any script. > astro add simple-stack-query
1
1
20
Back at creating videos! This weeks video will be all about Framer Motion scroll animations, PLUS smart ways of using masks to make your animations a lot simpler! . Will be released later this week, almost ready to record!
0
1
19
Working on this week's video! Really excited about this one. I decided NOT to use Framer Motion, but teach you how to make this tooltip with plain CSS (still Tailwind) and some JS as well! The solution is actually SO simple – can't wait to show it to you!
1
0
20
So honoured to have my course listed here🙏 Thanks for the shoutout @mattgperry . If you're ready to master animations and craft stunning experiences with Motion, check it out my course here:
🎓 Just added the final course to our Motion for React Courses page. @JeroenReumkens's fantastic Crafting Beautiful Experiences uses video and code to take you through Motion for React from the animate prop through scroll, variants and layout animations.
2
2
20