Question: Intersection Observer - Animation

Question

I spent the weekend trying to get my head around the Intersection Observer Animation for an animation that I'm trying to achieve. From my understanding of the intersection observer my code should work as I intended but the reality is it doesn't 🥲

My goal is that the scroll animation starts when the element reaches a certain point within the viewport. In my codepen, I've marked the point where the animation should start with a border. However, the animation starts as soon as the div enters the viewport.

Also, when the element gets below the border again, the animation should stop.

I would very much appreciate any help to achieve my goal.

Code example: https://codepen.io/aki-sol/pen/RwJPJrW?editors=1111

Also, if you have any feedback on my animation approach I'm very happy to receive criticism/ better way of approaching this.

<div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>

<div class="box">
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
</div>

<div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>

body {
  position: relatvie;
  heig;
}

body:after {
  content: '';
  position: fixed;
  bottom: 40%;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid blue;
}

.text {
  background-color: brown;
  color: white;
  height: 150vh;
}

.box {
    display: flex;
    position: relative;
}

.box-content {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  margin-right: 50px;
}

const boxElement = document.querySelector(".box");

//this function calls the aniamtion function and observes the window scroll position
function getWindowScrollPos() {
    let windowPosition = window.scrollY;

    window.addEventListener("scroll", () => {
        windowPosition = window.scrollY;

        animateBox(boxElement, windowPosition);
    });
}

function animateBox(box, scrollPosition) {
    let boxOffsetPosition = scrollPosition;

    box.style.left = `${-boxOffsetPosition}px `;
}

function boxObserver(element) {
    const observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    getWindowScrollPos();
                }
            });
        },
        { rootMargin: "0% 0% 60% 0%" }
    );

    observer.observe(element);
}

boxObserver(boxElement);

Thanks a lot!

Answer 1

There are two things to note here, I guess.

First, the Intersection Observer (along with Resize Observer) is not the best thing to test in online sandboxes, because they run code in an iframe, which leads to such a behavior. You should try to run your code in a browser.

There are questions related to this problem. E.g.: In codepen, Intersection observer has different behavior from browser window

Second, you're probably misunderstanding rootMargin. You set it to 0% 0% 60% 0% which means “add 60% of the height of the root to the very root, and use it as a bottom border for intersection”.

What you actually want to is to decrease the bottom border, not to increase. So, just set it to 0% 0% -40% 0% and it will work.

The Intersection Observer tutorial that helped me a bit to understand the rootMargin weirdness. Maybe it will be useful for you too.

Demo

Here's your snippet that I changed a bit to make it work inside an iframe. I've added a container node and use it instead of window.

const boxElement = document.querySelector('.box');
const container = document.getElementById('container');

function setupListener() {
  let scrollPosition = container.scrollTop;
  animateBox(boxElement, scrollPosition);

  container.addEventListener('scroll', () => {
    scrollPosition = container.scrollTop;

    animateBox(boxElement, scrollPosition);
  });
}

function animateBox(box, scrollPosition) {
  let boxOffsetPosition = scrollPosition;
  box.style.left = `${-boxOffsetPosition}px`;
}

function boxObserver(element) {
  const observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setupListener();
        }
      });
    },
    {
      root: document.getElementById('container'),
      rootMargin: `0px 0px -40% 0px`
    }
  );

  observer.observe(element);
}

boxObserver(boxElement);

body {
  margin: 0;
  overflow: hidden;
}

body:after {
  content: "";
  position: fixed;
  bottom: 40%;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid blue;
}

.container {
  overflow: scroll;
  max-height: 100vh;
}

.text {
  background-color: brown;
  color: white;
  height: 150vh;
}

.box {
  display: flex;
  position: relative;
}

.box-content {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  margin-right: 50px;
}

<div class="container" id="container">
  <div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
  </div>

  <div class="box">
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
  </div>

  <div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
  </div>
 
</div>

What may be improved

Also, if you have any feedback on my animation approach I'm very happy to receive criticism/ better way of approaching this.

Well, you surely should think about the scroll listener you will have after the intersection started. If you don't remove it, it will hang. Or even worse, they will be increasing during each intersection. Not a good thing.

Also it's better to animate transform, not left. It's good for optimization. Otherwise you'll get junky animation which will freeze the whole site. Check this set of articles by Google: web.dev/animations/.