DEV Community

Cover image for Scroll animation in Javascript using IntersectionObserver

Scroll animation in Javascript using IntersectionObserver

Keerthi on June 30, 2021

Using animation in your portfolio site would be a great way to capture the users attention and make them stay longer on your site. In this post I ...
Collapse
 
anicode profile image
Abhis •

There is also a amazing library Motionia.js which does the same , but with lots of customizations on built-in animations more than 100+ , so you don't have to write animations , also the animation triggers when the element is in viewport.

Collapse
 
aarmstrongplott profile image
Ashley Armstrong •

I’ve used intersection observer a couple of times instead of something like AOS and love it!

Collapse
 
keefdrive profile image
Keerthi •

I find that you have more control and better customisation options when using IntersectionObserver rather than using a library.

Collapse
 
jlizanab profile image
José Lizana •

Thanks !!!

Collapse
 
keefdrive profile image
Keerthi •

Thanks, hope its useful to you as well

Collapse
 
salitehkat profile image
Salitehkat • • Edited

Hi, thanks so much for this.
I am very newbie trying to achive something super complicated for me.Its the same as this example, but each card entry triggers a different animation (in this example the 3 cards and elements have equal animation). Ive been fighting for a week without any success. Please can you give me any idea , based on your code, what should I add or change? thanks so much again. Sali
ps; I am editing to specify better. Basically the idea is that intersection observer "observes" the card but triggers an animation of another element (not the card) Eg: Card 1 entry= triggers animation of element 1, card 2 entry triggers animation of element 2, ect...
Thank you x4.

Collapse
 
codecustard profile image
Emmanuel •

Really interesting effect!

Collapse
 
keefdrive profile image
Keerthi •

Thanks, hope it helps you to build something similar

Collapse
 
egimenos profile image
Ernesto Gimeno •

Well explained, thank you!

Collapse
 
keefdrive profile image
Keerthi •

Thanks, much appreciated

Collapse
 
idevgames profile image
iDev-Games •

Nice article! You can take out the complexities and use Trig.js which is optimised, purpose built for this and much more.