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

Learn how to animate your website on scroll using html, css and javascript. We look into javascripts Intersection Observer API to detect when elements are in view then animate on scroll!
// SOURCE CODE
github.com/TylerPottsDev/yt-j...
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
ruclips.net/user/tylerpottsjoin
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@Geoffboyardee]

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

[@restsheets2962]

That's exactly what I wanted. Thanks!!

[@TylerPotts]

Glad to hear it!

[@FakeMister]

Present!

[@TylerPotts]

:D

[@lakshitsagar6299]

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

[@TylerPotts]

Glad it was helpful!

[@skolotoi4588]

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

[@tonivanderweert7014]

Great. I subscribed. Thanks a Lot.

[@kimwilliams654]

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

[@ayogrey7608]

This😍😍😍😍

[@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 :)