Building a modern animated list with Framer Motion, Next.js, TailwindCSS

Опубликовано: 19 Июнь 2026
на канале: Built With Code

5,032

157

In this video, we are going to build a modern animated list powered by Framer Motion, Next.js, and Tailwind.

Starter source code: https://github.com/Built-With-Code/fr...

Thanks for watching!

TIMESTAMPS:
0:00 - Intro + Preview
0:56 - Starter code
2:02 - Creating and styling the JSX
8:40 - Adding list items
12:23 - Selecting list items
16:52 - Archiving list items
17:56 - Adding the empty state
19:12 - Creating the AnimatedListItem component
21:20 - Entrance animations (new list items)
25:28 - Exit animations (archived items)
28:14 - Outro

-------------------------------
Welcome to Built With Code! On this channel, you'll find coding tutorials on how to create and build your next awesome coding project, including websites and web apps. We'll use advanced frameworks such as Next.js, GSAP, and Framer Motion, and a whole lot more. If that sounds like fun, SUBSCRIBE to the channel - it'd be much appreciated!