IntersectionObserver?! Scroll Activated Animations & More with No Dependencies

promo.linode.c... - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to take a look at something called the Intersection Observer, which is a fancy way of describing how to determine when certain HTML elements come into view. You can then do stuff like attach CSS styles, classes, and other stuff. This will allow you to do things like scroll activated animations, lazy loading images, etc.. All of this is without any third party scripts.
Codepen demo:
codepen.io/des...
Link referenced in the video:
developer.mozi...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

What are you doing? Sub up already!

[@IllusionIRL]

Damn dude nice one again, my another youtubers Grafikart make this aswell in french but both version together is better !

[@fatimafadou4295]

I do not understand Why did you do foreach image in images

[@Rafael-ky5hw]

done.

[@scottonanski4173]

Pro-tip: ctrl+r. Love ya. :)

[@silaszayne6343]

instablaster...

[@rishabhkalra9505]

This was actually pretty cool. I liked the whole idea to make seamless animations with this api. I always used to think making animations like this from scratch means a lot of css. This is a lot easier. Thanks for such great demo. Your channel is the only channel i follow for front-end tips and tricks. Keep up the good work :)

[@peepwebdev575]

If anyone is struggling to get the staggered animations to work at the end. Make sure your using backtick. He said it really quickly so easy to miss. I'm new to JS so i had no idea there is a difference between ` and ' . This is for: `anim1 2s ${entry.target.dataset.delay} forwards ease-out`

[@dafimperator]

I love the way you teach, thanks as hell!

[@annasognosia]

thank you

[@DiegoMilian117]

Thanks man! You're the best.

[@lcho9871]

In light of ease, how about a tutorial on using this technique to implement a simple virtual horizontal scroll on, let say a html table or items ? Thank you.

[@luchogonzalez6431]

love u

[@bigfoot131]

You make this stuff look so easy. can u be so kind as to show how we can implement this in react?

[@igoroliveira9146]

Hello, What is the song at the beginning? :)

[@dotsona07]

JavaScript has been really killing it lately. So happy I don't have to use plugins to do this stuff anymore.

[@preet8457]

WOW, I was looking for this for ages. Finally, I got it. thank you. Vanilla JS is awesome.

[@spiderous]

Finally we have good programming experience without using third party libraries as JQuery to make it convenient to use. :)

[@Almighty_Flat_Earth]

Do some use case videos about MutationObserver and ResizeObserver.

[@kaungkhantzaw4979]

I was about to create a small project using intersection observer from other tutorials and you upload the tutorial ! FeelsGoodMan

[@elmersbalm5219]

thanks for keeping in the mistakes. Coding is frustrating and hard, seeing a polished tutorial is beyond frustrating!

[@SunnyVakil]

Hi Garry, Can you make one tutorial video on How to make Web components with Vanilla JS? this video is really great.

[@lefxxwill7740]

I thought absolutely positioned elements don't respect margins.. ?

[@rafalpotasz]

This is crazy useful. I haven’t written a line of JS yet, I’m just building my understanding of positioning and shape manipulations in CSS first but this is going to be the first thing I try in JS after learning some basics. Many thanks!

[@tune_into_gaming]

clear explanation it worked on my website thanks man.....

[@priyanshsharma9313]

I loved your tshirt more than the animation man, Love Metallica

[@mahsamrz5787]

Hi there How can i make this happen with Barba.js too?

[@matheusrodrigues-gk2os]

Someone can help me please ??? I was using this tutorial, and i would to set the follow keyframe to my divs to move down to up : @keyframes anim1 { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } However, before the keyframe starts the divs start move down to up without stop ! Only after when i scroll more them, the keyframe occurs normal.

[@Adanmacreates]

You are saving my senior coding project because sadly my university has failed me lmao.

[@kashif_i]

Thanks for explanation! Very useful.

[@HamzaKhan-qm5bl]

Can we call a function inside intersection observer?i have been trying to do that but it doesn't work

[@SergiuBurduja-y1l]

align-items, not place-items.

[@shortsExperiment_]

Awesome!!! I was looking for an easy way to do scroll animation without any third party scripts, and then your video appeared.....

[@davidsaso1234]

Two problems; when you scroll away from the element which is being animated, it resets inmediatly and it plays the animation from the beginning once you scroll back to it. I'd like for it to do the animation backwards as soon as you scroll away form it, so that if you scroll back, you can see it going back to its original state as if it was undoing the animation. The second problem is that, let's say you have two sections of 100vh, if an element from section two is moved into section one because you wanted to slide in from the top (transform: translateY(100vh)) BUT at the same time is hidden from section one because overflow in section two has been set to hidden, the browser will treat it as being in the viewport because it has been moved into section one the whole time so it won't trigger the animation.

[@ck0024]

Now I will make my own *AOS*

[@poooooow]

Big thx. You helped me a lot improving my work and projects.

[@doubleyousl3726]

15:20

[@Jennifer-ju8de]

EUHM

[@asithanilanga6797]

You are the best!! Finally found it haha! Thank you so very much!!

[@anzefajfar3072]

Great, but not really practical, since the support is sub 90%...

[@anawhite2562]

I don't know about you but I just love vanilla JS. Feels real for some reason. Why is that I wonder. Thanks so much for this video!

[@rockyd3v807]

The word "forwards" in the animation seems to be giving me issues with the modals on my page, the background drop down of the modal is now on the top layer and modal does not behave normally, could some one lend me a hand? modal was created with bs4

[@prabhkang226]

You just solved one of the biggest hurdle of making basic landing pages

[@jamesthaoulin3955]

Thanks for your tutorial Gary. Very informative I'de like to use this API using a smooth scrolling container but for a reason i ignore, entry are not targeted. When i remove my smooth scroll container, everything is running fine thoe. Any idea why this happen? Thanks

[@chefbennyj]

Edge browser is faster by applying styles but all the other browsers seem to do better applying classes with transition properties.

[@SebastianPerezG]

Maybe I will change the height :100vh for min-height:100vh ..

[@seanknowles4769]

What we really need is a fullstack course covering Sapper SSR/Svelte with all the bells all whistles

[@vincesanchez7790]

does IntersectionObserver is async in action???

[@SelenaFreeJack]

I love you man. One of the best youtubers. I've been looking for something like this for the past 10 hours.

[@rinatvaliullov3247]

Very cool! And we don't need any external library even

[@MrAndi1281]

such a great tutorial!! thanks soo much

[@johnniegilkerson4724]

I installed the live scss compiler but cant get it to show at the bottom.

[@peternicholson26]

Thanks very much for this. I am at the start of a project at work that I have just used this technique on. Great timing! Legend

[@pixiedust6630]

I don't know why I always read ur name as "DesignIntercourse" at first glance. I then have to look again and correct myself lmao

[@robingergelyfi4829]

Anyone knows why I got tihs? : Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. at main.js:15 Therefore its not working for me and I have no idea whats wrong. Thanks!

[@chengjieyun59]

You forgot to change `observer.observe(images);` to `images.forEach(image => { observer.observe(image); });`

[@I.G.G.G.]

Your videos are so helpful man.

[@dawid_dahl]

Please continue to show the process like you always do. It’s greatly appreciated!

[@snakone]

thanks for the tutorial, i was looking for something like this. I have a menu with (swipeRight) event on the whole page and a Carousel at the bottom aswell. Carousel has it's own swipe events overlaping with the menu swipe, sometimes when you wanted to swipeRight on the Carousel, the menu goes instead. Now i can disable the menu (swipe) while I'm on the Carousel section :)

[@johnjohnson4484]

hey this is Gary "im not making this responsive" Simon with coursetro

[@rodrigonoales]

Thank you for such a great tutorial...

[@andonir.6320]

Is that the Yngwie guitar?

[@DesignCourse]

Yes. But I've sold it

[@andonir.6320]

@@DesignCourse You didn't like the scalloped feel?

[@luismelo4131]

can you do a tutorial of this api in vue cli?

[@arthurshaidullin7981]

thanks )

[@jeffreybriceno]

Pretty cool video.

[@swartex92]

cool!

[@chrizzzly_hh]

Nice tutorial, but not the best practise to include variables (delay) without a fallback if the data-delay isn't supplied! nevertheless - keep it up!

[@anawhite2562]

Any pointers on how to implement a fallback would be very much appreciated.

[@Bangalipula]

What about loading animation only for the first time? Like when I scroll back to top and scroll down again the animation won't show.

[@manugalaxy14]

Just delete the else part from this video.

[@hassantariq8847]

Thank you 💎👌🏻

[@FullStackMaster]

Great tips nice and clean!

[@JeffThePoustman]

HTML-CSS Setup 0:00 JS Setup 10:08 Intersection Observer Setup 11:54 Thanks for the helpful tutorial. I do like that you have all the setup in there-- it helps orient me the viewer, ensures that the whole thought process is explained. I added times for repeat viewing, as I want to go over the IO material again.

[@maksymyankivskyy2419]

Awsome !

[@cwinter90]

We actually use this to start/stop/reset playing of rotating videos

[@prakashale1627]

can you please do more videos on svg animation?

[@preet8457]

if you want to add more than one animation on different classes, how can we do that? In simple words how can we add 2 or more than 2 different animations on a single web page?

[@peternicholson26]

This is exactly what I was about to ask. It would be good to see how to change the javascript code to allow for multiple animations

[@preet8457]

@@peternicholson26, i got it. you have to change only two things. let me explain. in the very first line - const ( Change this ) = document.querySelectorAll('.classname'); in one of the last lines - (change this).forEach(image => { observer.observe(image) okay so change the words which I have written as (change this) to any other name. And set a new class and animation. that's it.

[@bombayblur3797]

I didnt see any pure CSS courses on coursetro.

[@DesignCourse]

I have a frontend developer's course (2019) that teaches HTML and CSS for beginners. Other than that, there's a bunch of niche tutorials on css.

[@prakashale1627]

Nice!

[@Dev_UI]

that's new for me! thanks for the tutz man!

[@siddhartharoy5263]

Yoooh, Awesome vid !

[@angierodriguez5830]

Finally a tutorial that explains things well and I actually learn something. Tons of tutorials on KZbin that just tell you what to write and don't explain anything. Some people just don't know how to teach but Gary, thank God, is not one of those.

[@maxtaylor3531]

This is freaky. I was literally just learning about this earlier today and you just posted a video about it!