This is a very good tutorial. Maybe it's just me, but one thing I've noticed, not just with this video, but in others as well (and even in the official docs), is that it's been difficult to find more info regarding "whileInView". In my experience, more often than not, you don't want an animation to start the moment the element is "in view" as the user is more than likely going to miss the majority of the animation. I finally found that in the 'viewport' prop, you can add 'amount', which is a number between 0 and 1, which act as the percentage of the element in the viewport. Hopefully, this is helpful for other people, as I was surprised by how nobody ever seems to mention this and it seems quite important. In fact, this is part of the reason, I've been sticking with gsap, as I find their scrollTrigger to be more helpful. Now that I've found this though, I'm going to try using framer motion more. Once again, thanks for the great tutorial!
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 😄
This is the one of the excellent video for framer motion. Easy to catch for the beginners. You will get to know about everything at the end of this course. Thankyou so much Tom for this wondefull crash course on framer motion and keep upload more videos. Dont lose your hope for low views and subscriber count because you are doing excellent work that none can do... (love you from India)
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
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!
The video was great, thank you for it! However, could you please ensure the captions are accurate? The auto-generated captions had misspellings, which gave us the wrong impression.
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
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)
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
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.)
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 😂
@@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”.
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.
@@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
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..
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 ;(
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.
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!
This is one of the best courses out there on Framer Motion. Thank you, Tom. Respect.
this is cuz u are lazy to read the docs
@@samoltman correct
This is a very good tutorial. Maybe it's just me, but one thing I've noticed, not just with this video, but in others as well (and even in the official docs), is that it's been difficult to find more info regarding "whileInView". In my experience, more often than not, you don't want an animation to start the moment the element is "in view" as the user is more than likely going to miss the majority of the animation. I finally found that in the 'viewport' prop, you can add 'amount', which is a number between 0 and 1, which act as the percentage of the element in the viewport. Hopefully, this is helpful for other people, as I was surprised by how nobody ever seems to mention this and it seems quite important. In fact, this is part of the reason, I've been sticking with gsap, as I find their scrollTrigger to be more helpful. Now that I've found this though, I'm going to try using framer motion more. Once again, thanks for the great tutorial!
Really nice comment man. Thank you
The fact that this video is free is mind boggling.
this is cuz u are lazy to read the docs
One of the best structured crash course
This has all what one would need to start. Kudos Tom !
Thanks for making us understand in such an easy way :)
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 😄
Thank you!! I’ll definitely do some deeper dive videos :)
Thank you bro
This is the one of the excellent video for framer motion. Easy to catch for the beginners. You will get to know about everything at the end of this course. Thankyou so much Tom for this wondefull crash course on framer motion and keep upload more videos. Dont lose your hope for low views and subscriber count because you are doing excellent work that none can do...
(love you from India)
thanks a lot man , this course gave me everything I needed to understand a project and work my way into it
This is awesome thanks! Loving Framer Motion and you're a really good teacher
Best Framer Motion tutorial I've ever used
Thank you! :)
This was really awesome. Couldn't have asked for more to get started.
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
Awesome! Thank you and WELL DONE!
Thank you!! :)
thats awesome. i thought it would be hard but with your explanations everything went like a breeze. thanks man!
this course is awesome! Thank you very much for this content Tom. This blow my mind. 🤯
thank you so much bro, this is best framer motion course i seen on youtube so far.
Happy you enjoyed it!! :)
Hi there, thanks for this tutorial. Helped me out starting with Motion.
This was such a helpful video. I've been playing around with these concepts all day. Thank you!
Super happy to help! :)
I am so so so much grateful. I am grateful that you kept my request. Thank you so very much for this video.
Happy I can help!!
amazing course Tom, you are a great teacher
best tutorial for framer motion ever! keep going buddy!
this is cuz u are lazy to read the docs
@@samoltman can you stop spamming people
@celestinenwachukwu919 what?
Great video, to me everything was clear and the way you explained it, was super easy. Thanks!
Thank you! 😁
Bro, literally love your content! We want more and more videos regularly.
Thank you so much!! Doing my best to get more videos out 😁
Amazing Tutorial Bro. Keep it up!
Maybe this is the is the framer motion tutorial I need.
broo, those hover.dev components are insane!!!. well done man👏👏
De facto Framer Motion tutorial, hands down!
THANK YOU SO MUCH, i learned everything that i need about framer in one video
Check out some of me other video! 😁
Amazing !!!! Thanks so much
Honestly I have tried frama motion lot of times and I see it as a very hard stuff,but with this explanation you did a very nice job,thanks alo5
Thank you so much for compile all of this, really great video
Thank you!! I’m happy it’s helpful :)
Thanks for this course ! I love it❤ . I hope you guys can make a video for example 🤭
Happy you enjoyed it!!
Nice introducton Tom! Subscribed to your channel.
Appreciate it!! :)
love the pace and energy! Keep up this good work buddy
unintentionally funny yet entertaining to watch
i absolutely love your content man!
Thank you!! 😁😁
Thank you!! 😁😁
Great vid!
Thank you! :D
I think you'd like the AutoTag plugin for VS Code. When you rename an element it automatically renames its paired one
Really loved it man..
Best video on framer motion
This video is amazing bro 🔥. Keep it up!
Thank you!!! 😁
Thank you so much...i learned alot from this video. Please post more...would lovce to learn more
Thank you, I will!!
Thank you Tom! Great efforts
Thank you!! :)
amazing content and help me a lot
pretty cool! thanks!
Thanks for this course! =)
Thank you youtube algorithm for giving me a chance to watch this incredible tutorial video.
thank you man
Incredible tutorial! Thank ..............I kindly request additional Framer Motion tutorials.
That I can do 😁😁
Nice, great explanation, new subscribed
Thank you!! 😁
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!
Thank you so much!!! Trying my best haha 😁😁
Thanks for superb intro to framer motion, Hope you will make advanced animation tutorial in future, best of luck 🎉
it was great! thank u!
The video was great, thank you for it! However, could you please ensure the captions are accurate? The auto-generated captions had misspellings, which gave us the wrong impression.
Awesome ❤
Thank you ! 🙏
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
Awesome! I have a doubt with the different animations for different media query or devices
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)
Such a gem
Great video. Waiting for more advanced one 🙏🙏
Thanks for sharing.
Thanks for this video man
Thank You So Much😍
You're welcome 😊
please make video about using createBrowserRouter and AnimatePresence
thank you for share your knowledge
Please which extension did you use for framer motion 😢.
Nice crash course too 🎉
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
Good video 💯
Why is this channel so underrated???
Haha thank you! Growing slowly but we’re getting there :)
@@tomisloadingTo much noicy talk need to talk more smoothly and gradually
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.)
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 😂
@@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”.
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.
Thank you for the feedback!! Genuinely appreciate it, still need to find the right balance 🙂
@@tomisloading Content is already top-notch!
amazing
are there different implementations involved if one were to use framer motion in the /app router instead of the /pages router for nextjs?
For page transitions, but beyond that, none that I can think of :)
@@tomisloading what about page transitions? could you elaborate more?
@@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
@@tomisloading ah i see. thanks tom!
really awesome lesson ! thanks. btw what is the theme name you are using in your vscode ?
Andromeda!
Great video, just what I needed for a project that I am working on. Which Framer snippets extension are you using in VS. Code?
Great video, was super easy, but the performance of the websites?
Thank you! And performance is great! Like anything, you can overdo it haha, but for the most part
Is there a point of using whileHover if you can just use regular css?
Awesome Vdeio
super!
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..
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 ;(
Thank You Pro
Badass 😎
😎
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.
how name this VSCode Theme, when you using in this video? Please tel me)
Andromeda
hey very nice vid ! just wondering what is you vscode theme ?
Andromeda!
@@tomisloading thx so much
Is this Framer motion course is enough to learn?
Okay, I am new here so i would like to ask, this still works with Motion? So far i know its a kind of separated libreary now
Exactly the same with motion 👍
thanks you so much
Of course! Happy it helps :)
will the same apply to javascript?
Make one with pages and tell us how to use it change pages with animation
Please reply to this comment. This VSCode Theme is cool, what is it?
Andromeda!
Hi, Please Reply me is it Free library for animations?
Hi, yes, Framer Motion is free and open source!
Is it possible to use it with vue/nuxt
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!
nice
ty
Please!!! We want this to be free AGAIN!!!
16:00
❤
The number of ads is craaaaazy, thanks for the content though
Oh weird, I just set it on auto haha, I’ll take a look at this!
I dunno man, just hit subsribe button after read few comments. I bet this channel will help me a lot
Is tom loading due to slow framer motion animations? :p