How to Create a Staggered Drop-Down Menu Animation in React | Framer Motion

I wanted to share how I recreated this simple animation staggered drop-down menu animation in React. Using Next Js, React, and Framer Motion.

My website:
Screen Recoding Software [Affiliate]:
My blog:

Follow me on:
Twitter:
Instagram:
Github:

Animation Inspo:

[roufhasan]

Loved it, man! Very precious. No bullshit talk just to the point❣

[penguinzrule]

What a great tutorial. No time wasted, everything you talked about was necessary information and clearly explained. Will definitely be coming back for more tutorials.

[JuanCarlosSanchezLopez-hh]

Crazy tutorial, it looks amazing and its super clear and direct. Love this❤

[frankxtupelo]

Impressive tutorial! Very detailed, I will reference back to this video for some framer motion concepts explained here.

[augustineedeh]

Super duper helfulful.

Thanks, Anthony!

[darshanpandya]

Really Impressive Tutorial Diego, Keep It Up !!! 👍😄

[emmanueljulius]

Super helpful content Diego, I implemented this in a project I'm currently working on

[goswamianshuman]

nice tutorial
used in my application in production. ❤❤

[antontsvil]

Respect for pushing to the finish, im struggling with animations so hard but still can't understand them clearly

[attilalakatos]

Still a very good tutorial in 2024! IMHO better than the official doc example

[creativestudio]

Hey bro, thanks for this. I used it in my project ❤

[m_jdm]

You can also create the menuVars like so:
const menuVars = {
initial: {
height: 0
},
animate: {
height: 347
},
exit: {
height: 0
}
}

This will make the content of the dropdown to not shrink. Like usign height and not transform scaleY.

[abdullahsiam]

This one is awesome too! Please create a yt series on how to create a visually stunning, aesthetic and beautiful piece of art using framer motion. 👏👏

[nazitaog]

nice tutorial very helpfull. Saludos desde Argentina capo

[feastofsteven]

Not sure if I'm missing something, seems maybe I need to be using Next.js with this? I'm building my first project in React and just using React/Tailwind, but I've rebuilt everything to the 4:00 mark and all I get is errors. First, it's confusing where you create the 'Link' component, because it seems you already have that in your 'Next' folder or something? So I was getting an error on that, so I just created a 'Link.jsx' file in my components folder and imported it, but what should that file read? Next, there's some issue with the 'open &&' command, maybe if I continue that will resolve, but hard to follow along when I can't see the menu at all and unsure if I follow it to the end if I'll get anything. I dunno, appreciate the tutorial and any help you can give -- but it's really hard to follow with your image in the way of your code and you move to fast, don't explain the WHY of things or how you're getting there. Just some constructive feedback :) thanks!

[karpinakarpin]

Thank you very much for the tutorial. What for a theme are u using in your VS Code in this video bro?

[sujjee]

hey bro please create full course how to make cool websites using framer motion and nextjs. you are providing real paid course value in free. thank you so much ♥

[harshdeep]

Your perspective on react native vs flutter??

[tusharghildiyal]

when i tried it, the scaling in and out of the yellow container is not animating, please help me fix it

[HundredBytes]

hey do you now having problemese using nextjs 13 with framer motion specifically in page transition i stucked on that