IntersectionObserver API
I want a page in which when I scroll the element comes in view. I have tried this out with matching the element's offset with the scrolled height of the page, but it did not work. Is there any other way without this api?
4 Replies
You may just want an example this was something I made using it, it does use React but it doesn't need to https://codepen.io/z-/pen/abzegbx?editors=0010
Basically create new IntersectionObserver with a function to call once it's visible, then make it observe an element. Now when the observer observes the element it will call the function for you to make it show. You may also want to then make the observer unobserve the element if you only need it oncce
https://codepen.io/z-/pen/yLRzvxK/7e70596d218432d4273650c514aec8c9?editors=0010 this is a minimal example
More in-depth example https://codepen.io/z-/pen/qBJPxQz/1164e4cd2852e2fc781fd7f4a22dbfe8?editors=0010
If you want an alternative you can leverage GreenSock lib. It uses IO and imo is really clean animation lib with amazing plugins. https://codepen.io/b1mind/pen/yLeoQOG