On-Scroll Reveal Animation with React & Framer Motion

Let's make a reusable reveal animation, triggered on scroll, using React and Framer Motion!

📚 Project Links

🔗 My Links

[akshatdubey]

Simple and straight to the point. Great video!

[hauvert_]

Subscribed. The voice and straight forward method of the tutorial is perfect. Sounds like it's playing x2 speed which is great. No wasting time.

[MatthewCarr-ne]

You're awesome dude, I appreciate the straightforward content. No bs.

[thanhluannguyen]

This is so awesome tutorial. Thank you so much! :>

[KappaEducation]

You got a subscriber. I always loved animation in webdev, and I can't wait to explore your channel and all the resources you are posting about.

[jackson]

Very good Video and well explained, thank you so much for your Effor. Cant wait for other Videos!

[ultragamersvk]

Very useful, Thank you so much for this

[sabricharim]

This product supports purchasing power parity. Because you're located in Algeria, the price has been discounted by 60% to $6.

[davewaterman]

You explained this really clearly, thank you! Teaching seemed to come naturally.

[monyetbesar]

Great video man, well explained and easy to follow. Subbed!

[Solo_playz]

Thank you man you really explained it well even though I'm able to understand this framer thing in one video means you deserve 🏆
😂 Thanks again 👍🏼

[alirezanikzad]

you explain it so nice ty so much <3

[ashrafsayed]

you are perfect brother keep going <3

[tejas]

Great and informative video. In my current project, I made a sidebar; everything is working perfectly fine except one thing. In your above web application, when you scroll to the About section, the About in the sidebar is highlighted. When you scroll to projects, the project in the sidebar is highlighted, and so on. I want to achieve the same thing in my current project. Can you please suggest something and explain how you did this? I am using React.js. Thanks.

[faculogos]

Hi Tom! I'm finishing my portfolio adding some animations thanks to your tutorials. Thank you so much! I'm very anxious to show it to you very soon. Here is something I couldn't found out and wanted to ask:
1) This is not a question, but I founded I could do the same with " whileInView='visible'. Meaby this function wasn't eable when you made your video.
2) Even though, a want to do this: when the element gets out from the viewport because I scrolled down, I want it to stay animated (that would be "once: true"). But when I come back to the top of my page I want to reset the animations (that would be "once: false") so the elements animate again. I am adding a "isOnce" state, then a useEffect whith a window.addEventListener and saying: setIsOnce (window.scrollY > elementRectTop). But is not working (not with "whileInView" and not with "animate:{mainControls}". Can you give me your opinion? Thank you again!

[mssprakashyashwanth]

Great video, I wonder how you caught up with such an astonishing design

[shanemur]

More advanced tutorials on Framer Motion please!

[FascalRanky]

Curious as to why you didn't use Framer's whileInView property?

[dictatorgaming]

Just Nicksindian doing his side jobs 😂😂

[jaysp]

Why taking 2 animation controller, we can do that also with 1 animation controlller