How to Create On-Scroll Image Animations with Next.js & Framer Motion

🚀 In today's video, I will be demonstrating the power of Framer Motion and how this can be used in your Next.js projects to create stunning, seamless image animations.
Access the starting github repository on my website here: tutorials.emersonvisuals.com/...
Explore more of my tutorials here: tutorials.emersonvisuals.com/
🔍 Learn how to incorporate these resources into your development workflow, whether you're starting fresh or fine-tuning an existing project.
🎨 Ready to elevate your design and coding game? Watch now and happy designing! 🚀
0:00 - introduction
0:32 - explaining how it works
2:28 - project start (github file in description)
3:07 - installing & importing framer motion
3:46 - adding framer motion to the divs
4:05 - first animation example (opacity + delay)
6:39 - second animation example (transitions + delay)
8:55 - third animation example (combination)
9:54 - viewport property (controlling how often the animation occurs)
11:25 - conclusion
#nextjs #framermotion #onscroll #imageanimation
The music used in this video is "City Of Angels" by LAKEY INSPIRED. You can find more of his music on his official RUclips channel: ruclips.net/channel/UCOmy...
This track is licensed under the Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License. You can read the full license here: creativecommons.org/licenses/...
The music is promoted by NCM goo.gl/fh3rEJ.

[@voldemortvi4264]

Great tutorial

[@emersonvisuals]

Thank you so much!

[@timothyroberts5622]

Thanks so much for the awesome tutorial! Goes to show how powerful framer motion is when using it with Next.js or React!

[@emersonvisuals]

You're very welcome!

[@sebastianrubina2586]

Gracias Luisito Comunica Programador

[@emersonvisuals]

Thank you!