CSS Animations : Triggering Animations When Scrolled Into View

[@bobbybruce9314]

Your explanation did not only do its job, it also made CSS animations and transitions clearer for me. Thank you!

[@AllisonFoleyisHere]

One of the best tutorials I've watched in a while! You have earned my follow & saved me so much time. Hope you see more content like this in the future! Thank you so much.

[@johnslowsky8426]

As always, very helpful with clarity and purpose. Thanks

[@ManOnBass]

Thanks a lot Karl, your tutorial is enlightening!

[@izzyheslop7522]

This saved me from insanity thank you soooo much

[@letisschiller5185]

really good explained thank you so much!

[@motionhalych]

Amazing and detailed explanation. Thank you!)

[@KarlCleveland]

The JavaScript file used in this demo is available at: karlcleveland.com/js/animateIfInView.js

[@marysoil3209]

Nice content! Hope to learn more from you, people should know your channel exists! Thank you!

[@ARKEYmax]

Genius! Really helpful tutorial!

[@greyboy2]

Great tutorial but it doesn't work in Safari or IOS. Do you have a workaround please?

[@BadGirl-pn3qu]

Can it be done with CSS only?

[@glaucodilieto]

Thanks for this. How would I modify the JS so that the animation only happens when the element first comes into view, but not every single time you scroll up and down? I think it's nice when it happens first time, but it's too much when it happens every single time. Basically I'd like the .in-view class to be applied once and then remain in place until the next page load.

[@poweroverwhelming1847]

I ever you havent found a solution for this, just simply delete the entry.target.classList.remove('in-view'); code in the JS file

[@glaucodilieto]

@@poweroverwhelming1847 Thank you I will try!