Trigger Animations on Scroll using HTML, CSS & JavaScript - Intersection Observer API

[@AstridISanchez]

Thank you. I finally got to understand it

[@restsheets2962]

That's exactly what I wanted. Thanks!!

[@TylerPotts]

Glad to hear it!

[@gabrielaluppe]

First of all, thank you so much for clarifying something so interesting in such an easy-to-understand way. I have a question: when I don't scroll enough (less than 100vh), my boxes keep "dancing" on the screen. They repeatedly trigger the effect over and over. How can I prevent this? I followed the tutorial step by step, but of course, in just fifteen minutes, we can’t cover all the tricks. If you or someone else knows the solution, I’d love to learn!

[@Geoffboyardee]

Great tutorial. Thank you for all the variations how to implement this.✨

[@FakeMister]

Present!

[@TylerPotts]

:D

[@kimwilliams654]

Love it... got it to work except for responsiveness.... is it possible to make it responsive? TY!!!!

[@lakshitsagar6299]

Thanks a lot, this seems very easy to implement. I will put this in my portfolio...Thanks again✨✨✨✨

[@TylerPotts]

Glad it was helpful!

[@tonivanderweert7014]

Great. I subscribed. Thanks a Lot.

[@skolotoi4588]

great... that's exactly what I wanted :) thank u bro!! :)

[@kimayapanash8998]

How to use this in React? If you can help

[@TylerPotts]

Hey so you can use it pretty much in the same way but put your code in the use effect hook, there's some cleaner ways to do it in React, maybe I'll cover it in a video at a later date. Edit: Oh and you should use the ref attribute to target the elements you want to animate :)

[@ayogrey7608]

This😍😍😍😍