Animating Presence with Framer Motion

Hey everyone! Had fun with this one – check out the code and demo below.

[beke]

What an amazing, simple and clear way to explain everything. Glad I found u man, keep it up!

[yogeshbhatt]

No kidding, I was looking into Framer just now, and you posted this, thanks man🙃

[JackSparrah]

Man, this is incredible! Just started learning Framer Motion and this was super helpful. More videos like this please!

[raulcubitto]

Your videos are amazing, always learning something new. Thanks a lot Sam!

[rudeadyet]

I really love your contents. Even the shortcuts/key bindings you use are really fun to watch. 😀 Could you please make a video on the shortcuts/key bindings you use to make your work productive? Appreciate your thoughts and cool ideas. Thanks! 🙏

[h.kubilay]

thank you sam. dont stop sharing. this is gold.

[lukeyd]

Fantastic video as usual Sam keep it up !

[swyxTV]

congrats on your new baby niece! also that was a really great tutorial! kinda goes to show you don't need a lot of fancy equipment to make great video! the audio could be a lil better if you have a lapel or headset mic. these framer motion tips are great!

[itsnamangoyal]

Great explanation :) would love to see more!

[victora]

Great video! Now with animationSharedLayout you animate the container and the rest of the list when removing or adding an item

[beaussan]

Thank you for this ! I didn't know about animation presence, it's awesome !

[esakurniawan]

Thanks for the video, really helps me on how to stagger the children in a list

[James-ombj]

your teaching style is soo intuitive. what is the purpose of using a ref to track if the reminders have rendered instead of using a state variable?

[risehit]

I wonder if one can do animations when exiting, but beyond just managing the opacity and a little more, I wonder if, for example, make two divs close the screen when exit is applied, as if it were a curtain at the end of a work of theater

[rohittomar]

Please bring a framer motion tutorial playlist beginner to expert

[karianpour]

I like it, but it is a bit heavy on bundle size.

[tinotaylor]

Where can we find the tutorial for the reminders app 🙂 really like the animations on this!

[ahmedahmedx]

Hi sir can i ask you ?

Lets say we have a div and inside of it there is h2 title and another div that has 4 images, i want an animation so the h2 title will fade in first and after it completed then the 4 images will fade in one by one, how can i achive that ?

[simeonGriggs]

Neat how you staggered the animation with a function, did you try the staggerChildren transition property?

[RedVelocityTV]

Add a "layout" property to motion.li and see some more magic happen, great stuff btw man