The Framer Motion Crash Course || React Animation Library 2023

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Framer Motion is not only the simplest way to get up and running with animations in React JS, but also one of the most powerful. Trust me, I love it so much that I built an entire component library using it!
Today we're going to cover everything you need to go from "zero to hero". Your limitations are seriously just your imagination.
If there's anything I haven't covered in this video that you'd like me to cover, please don't hesitate to ask! I'm happy to do more break downs!
📚 Project Links
Code: github.com/TomIsLoading/frame...
Docs: www.framer.com/motion/
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: www.hover.dev
Timeline:
0:00 - Introduction
0:31 - Prerequisites to using Framer Motion
3:44 - Project setup & overview
5:33 - The "motion" component
11:34 - AnimatePresence & the exit prop
19:45 - Gestures (whileHover & whileTap)
25:44 - useAnimationControls
32:52 - View based animations (whileInView & useInView)
40:16 - Scroll based animations (useScroll, useSpring & useTransform)
50:44 - Wrapping up

[@dukeselwood]

This is awesome thanks! Loving Framer Motion and you're a really good teacher

[@user-wu3hg3oh1p]

love the pace and energy! Keep up this good work buddy

[@Franklin7x]

this course is awesome! Thank you very much for this content Tom. This blow my mind. 🤯

[@koustavchowdhury8210]

I saw this video after trying to understand from the docs. And I must say, you did commendable job explaining in a very simple manner. Kudos to you, man! And keep making such awesome videos

[@ustav_o]

thats awesome. i thought it would be hard but with your explanations everything went like a breeze. thanks man!

[@danieljohnson6481]

Really awesome video. Thank you! Subscribed, and bought the hover lifetime package. I really really appreciate the variety of design style in your components that is severELY lacking in other modern UI libraries for react

[@tomisloading]

Thank you so much, happy i can help!! 😁😭

[@miraclemark6120]

broo, those hover.dev components are insane!!!. well done man👏👏

[@tatsumii1420]

THANK YOU SO MUCH, i learned everything that i need about framer in one video

[@tomisloading]

Check out some of me other video! 😁

[@pablofernandezruiz8024]

Thank you so much for this introductory vid! I would gladly appreciate a more in depth one covering what's missing in this one. Thank you again for delivering such great content 😄

[@tomisloading]

Thank you!! I’ll definitely do some deeper dive videos :)

[@feeint5444]

Thank you bro

[@jurentie]

This was such a helpful video. I've been playing around with these concepts all day. Thank you!

[@tomisloading]

Super happy to help! :)

[@amershboul9107]

best tutorial for framer motion ever! keep going buddy!

[@klkiessertggksmsmsjfldd]

this is cuz u are lazy to read the docs

[@krailamohammedislam6822]

thank you so much bro, this is best framer motion course i seen on youtube so far.

[@tomisloading]

Happy you enjoyed it!! :)

[@TheSynSan]

Thank you so much for compile all of this, really great video

[@tomisloading]

Thank you!! I’m happy it’s helpful :)

[@PETERFILM]

Thanks for this course! =)

[@hampusnilsson2389]

Awesome! Thank you and WELL DONE!

[@tomisloading]

Thank you!! :)

[@MrNik0l0z]

Great video, to me everything was clear and the way you explained it, was super easy. Thanks!

[@tomisloading]

Thank you! 😁

[@rubenn6160]

Muchas gracias por este curso, gente como tu es lo que necesita yt Aunque estaria bien que hagas unos cuantos proyectos usando framer Thank you i dont speak english well yet

[@lazimisntcool8721]

Thanks for superb intro to framer motion, Hope you will make advanced animation tutorial in future, best of luck 🎉

[@kaevindixon77]

The fact that this video is free is mind boggling.

[@klkiessertggksmsmsjfldd]

this is cuz u are lazy to read the docs

[@ferdousahmed7024]

Bro, literally love your content! We want more and more videos regularly.

[@tomisloading]

Thank you so much!! Doing my best to get more videos out 😁

[@BartLekens]

This is one of the best courses out there on Framer Motion. Thank you, Tom. Respect.

[@klkiessertggksmsmsjfldd]

this is cuz u are lazy to read the docs

[@BartLekens]

@@klkiessertggksmsmsjfldd correct

[@realg4947]

unintentionally funny yet entertaining to watch

[@p1k1m4ru]

it was great! thank u!

[@mdrifat6941]

I am so so so much grateful. I am grateful that you kept my request. Thank you so very much for this video.

[@tomisloading]

Happy I can help!!

[@alexbx9]

This video is amazing bro 🔥. Keep it up!

[@tomisloading]

Thank you!!! 😁

[@sahilverma_dev]

Great video. Waiting for more advanced one 🙏🙏

[@AnupomRoy-is3pc]

Really loved it man..

[@OTP10LISTAS]

thank you for share your knowledge

[@germainst5603]

pretty cool! thanks!

[@tamerahmed9860]

Thank you Tom! Great efforts

[@tomisloading]

Thank you!! :)

[@SUNGWONG5]

amazing content and help me a lot

[@chaipanch98]

Thank you so much...i learned alot from this video. Please post more...would lovce to learn more

[@tomisloading]

Thank you, I will!!

[@anonymous_dev9472]

Awesome ❤

[@markojovanovic165]

Nice introducton Tom! Subscribed to your channel.

[@tomisloading]

Appreciate it!! :)

[@bcb3548]

De facto Framer Motion tutorial, hands down!

[@developedbymighty]

Thanks for this video man

[@berad6034]

Best Framer Motion tutorial I've ever used

[@tomisloading]

Thank you! :)

[@n2duc]

Thanks for this course ! I love it❤ . I hope you guys can make a video for example 🤭

[@tomisloading]

Happy you enjoyed it!!

[@prashlovessamosa]

Thanks for sharing.

[@dukeselwood]

I think you'd like the AutoTag plugin for VS Code. When you rename an element it automatically renames its paired one

[@hehimselfishim]

i absolutely love your content man!

[@tomisloading]

Thank you!! 😁😁

[@tomisloading]

Thank you!! 😁😁

[@user-mn8gk9tv7k]

Great vid!

[@tomisloading]

Thank you! :D

[@cnikolov]

This video is massively underated, I remember buying udemy course that was a lot worse than this video, thank you and hope you will continue producing an amazing content from what we can do I liked subscribed and shared!

[@tomisloading]

Thank you so much!!! Trying my best haha 😁😁

[@kafin3504]

super!

[@funenjoynilaypatel4553]

amazing

[@ronaldos3738]

Nice, great explanation, new subscribed

[@tomisloading]

Thank you!! 😁

[@umiverse220]

Thank you youtube algorithm for giving me a chance to watch this incredible tutorial video.

[@amey7064]

Good video 💯

[@ch.4940]

Thank You So Much😍

[@tomisloading]

You're welcome 😊

[@fightscene817]

Incredible tutorial! Thank ..............I kindly request additional Framer Motion tutorials.

[@tomisloading]

That I can do 😁😁

[@ShaunDVine]

Great video, just what I needed for a project that I am working on. Which Framer snippets extension are you using in VS. Code?

[@techcheck3042]

Badass 😎

[@tomisloading]

😎

[@napoleon4328]

Thank You Pro

[@sacrafixe6822]

thanks this cleard so much concepts i have one request can you make a horizontal web site i have been trying to make it using react-scroll and other libraries but it gets so glutched and lagy please it would be a huge help

[@27sosite73]

nice ty

[@benfrese3573]

Thank you very much, nice tutorial so far and I can't wait to check the more complex stuff on your channel. One thing I want to give as feedback because I noticed it several times now in the first 12 minutes: you could skip over some of the more obvious things. For example showing us the CSS of the blue button again, later in the video, isn't necessary. I know it sounds nitpicky but the video is fast paced and these things break the flow a little bit and I'd assume pretty much anyone who watches a video like this knows how to style a button. I hope I could make clear that I mean no offense here :) Thanks again and taker care o/ EDIT: The fact that you wrote a whole library of components is such a huge plus for me btw because I can be sure that you present best practices here.

[@tomisloading]

Thank you for the feedback!! Genuinely appreciate it, still need to find the right balance 🙂

[@benfrese3573]

@@tomisloading Content is already top-notch!

[@hauladv]

thanks you so much

[@tomisloading]

Of course! Happy it helps :)

[@lucasgonzalez8313]

Awesome! I have a doubt with the different animations for different media query or devices

[@tomisloading]

Ooh, so different animations on different screen sizes would actually make a GREAT video! You could use a basic event listener on window size, but you could also use something like window.matchMedia. If you look up “Responsive animations with Framer Motion” on google you should find an article by Samuel Kraft which appears to give an outline of this (I haven’t read the full article haha)

[@mufcandika]

please make video about using createBrowserRouter and AnimatePresence

[@opponion2821]

Can anyone give me an advice pls. I have a row of elements each one has a small transition delay meaning they appear one after another one. I want to add whileHover effect of scale up the element but this effect is being affected by that transition delay. Idk how to fix this issue, been stuck with it for a while. Setting a specific transition for whileHover fixes when u hover over but after moving the cursor out, again transition delay will affect the time for element to get back to normal scale ;(

[@binodkhatri7738]

really awesome lesson ! thanks. btw what is the theme name you are using in your vscode ?

[@tomisloading]

Andromeda!

[@malvoliosf]

My guess about color-transformations: you will like CSV values much more than RGB values. The transformation will feel more natural and less arbitrary. (Great video by the way.)

[@tomisloading]

Thank you!! Yea RGB probably doesn't feel the most natural for sure, going between hex values imo feels the cleanest since it's essentially just number to number haha. Fortunately works either way 😂

[@malvoliosf]

@@tomisloading No, I mean that big changes in RBG (or hex values) produce a slightly transcendental effect, as the screen visits colors that have no apparent relationship with each other: “It’s blue, now it’s turquoise, now it’s green for some reason, now it’s getting red.” I believe (and I haven’t tested this) that if you specify CSV values, the effect will be more “getting less blueish and more reddish, while going from lightish to darkish”.

[@akadaygame8634]

in framer motion, how to handle laggy for the first time.. when I access the web, and run the animation, before the animation start it's not really smooth.. but when I run it again, it's OK..

[@studyhotspot9719]

Why is this channel so underrated???

[@tomisloading]

Haha thank you! Growing slowly but we’re getting there :)

[@InfraUpdates-]

​​@@tomisloadingTo much noicy talk need to talk more smoothly and gradually

[@riadqerimi6701]

Make one with pages and tell us how to use it change pages with animation

[@Bh4ne]

Great video, was super easy, but the performance of the websites?

[@tomisloading]

Thank you! And performance is great! Like anything, you can overdo it haha, but for the most part

[@degendev6633]

are there different implementations involved if one were to use framer motion in the /app router instead of the /pages router for nextjs?

[@tomisloading]

For page transitions, but beyond that, none that I can think of :)

[@degendev6633]

@@tomisloading what about page transitions? could you elaborate more?

[@tomisloading]

​@@degendev6633 So Next 13 and lower used the pages router, and in the pages router, you've got access to _app and _document files which wrap all pages of the site. You can then add AnimatePresence around entire pages of your app and manage page transitions that way. Next 14s routing is a bit different, I believe you could do the same using the root layout file, though I haven't used 14 a whole lot yet so i might be a bit off. Code will probably be 99% the same, just a difference in where you put it haha

[@degendev6633]

@@tomisloading ah i see. thanks tom!

[@salaheddinebenchraa6906]

Please!!! We want this to be free AGAIN!!!

[@theoniemann8042]

hey very nice vid ! just wondering what is you vscode theme ?

[@tomisloading]

Andromeda!

[@theoniemann8042]

@@tomisloading thx so much

[@niteshprajapat7918]

Is this Framer motion course is enough to learn?

[@codePracticeId]

16:00

[@F1mus]

Is your usage of springs correct? It seems really jumpy... I think React is recreating your spring on every render. I looked at the docs and it seems that you need to call set on the spring.

[@iUmerFarooq]

Is it possible to use it with vue/nuxt

[@tomisloading]

No, but check out the package “motion one”! It’s by the same guy who built framer motion, different developer experience but creates the same awesome animations!

[@arslanmuhammad4190]

Hi, Please Reply me is it Free library for animations?

[@tomisloading]

Hi, yes, Framer Motion is free and open source!

[@riccardopellegrino5447]

The number of ads is craaaaazy, thanks for the content though

[@tomisloading]

Oh weird, I just set it on auto haha, I’ll take a look at this!

[@isaiasc2620]

Please reply to this comment. This VSCode Theme is cool, what is it?

[@tomisloading]

Andromeda!

[@AbhiShake-pl3cf]

Is tom loading due to slow framer motion animations? :p

[@Gunz1234]

loved the video ❤ but 1 issue is that you sound nervous or really fast while speaking its nothing bad your explaining it really good but just that was something i didnt like 😅

[@karanbadhwar4113]

Brother, Huge fan of your Work but a gentle and not at all negative criticism . but please speak slowly next time and speak clearly as it was hard to understand without subtitles, cause few words you were speaking like randomly but I had re watch certain parts mutliple times.

[@catalincatalin4101]

Try to change the playback speed to 0.75, I think it will be more enjoyable for you.

[@karanbadhwar4113]

@@catalincatalin4101 done, actually I completed the video at .85 speed but the problem was the words were dissolved as he was speaking it would have been better if he had been completing the words. But overall the content was good I managed to complete it though and thanks fir your advice too 🤗

[@IamAgrocerybag]

I had no issues understanding him at any point. Him speaking slower would detriment those of us with quick comprehension.

[@karanbadhwar4113]

@@IamAgrocerybag well bro happy for you but that doesn’t mean right if you understand it I have to understand it too. I was just stating my issue, as per your point there must be a lot of people who might have had the same issue as me so I was conveying my message

[@TragicGFuel]

​@@karanbadhwar4113it's not the fault of someone else that you cannot understand someone else's speech. He was speaking at a very normal pace, not fast at all.

[@razarajpoot9811]

Amazing video. much appreciated. Like and sub done.

[@ronitgurjar5747]

Hey man...not gonna lie waiting for u to post this🔥🔥🤌🏻❤️🗿

[@tomisloading]

Haha heck yea!! Hope I did a decent job 😂

[@ronitgurjar5747]

@@tomisloading I am wonder i this is the start of a new series.....soon spline?

[@tomisloading]

@@ronitgurjar5747 Ooo that's not a bad idea 🤔

[@ronitgurjar5747]

@@tomisloading heck yeah 🔥🔥🔥 can't wait 🔥

[@criztiandev]

Do you have discord sir ?

[@tomisloading]

Hey, I do! Just realized it isn’t linked here haha, I’ll add it when I’m back at my computer!

[@tomisloading]

Just added the link to the description!