Start animation when element is in viewport.

Description

I really like this animation library and will love it if there is a build in feature to start the animation if the element becomes in view. I don’t know if this has to do with scroll or if there is a feature in browser that’s triggered if a specific element is in viewport or not. Also tracking the scroll position and sync with the animation would be nice.

Scroll tracking can be very challenging in my experience. Many libraries only tracks the window / body scroll event, which is annoying. Every element can be scrolled and should be handled. I don’t know if it is possible to get the scroll content of an element. Or if we have to define the container manually. Or is there a more simple solution to detect element in view without implement an custom scroll tracker.

I see that the Anime website has some scroll and in-view animations. I’m not yet deep in the source code, but it seems to be a custom implementation, right? The ruler scroll example is very cool. I would be glad if these features are integrated to Anime and easy accessible for all. Without hacking and without using 10 years old libs.

• Start animation when element is in view port (with optional offset?)
• Define scroll context. Not only the body is scollable. Every element can be the container.
• Search for a simple browser feature to detect “is element in view”?
• Option to animate once or every time it becomes in view.

Examples

• AOS
• ScrollReveal
• ScrollMagic
• Waypoints
• Locomotive-Scroll
• ScrollTrigger

Code

Just some code samples from my experiences. Not sure if this helps. For inspirations we could look how other libs do it.

this.element = 'element to animate';
this.scrollContext = document.querySelector(selector);
scrollContext.addEventListener('scroll', this.handleScroll.bind(this));

handleScroll() {
  const inView = this.isElementInViewport();
  // ...
}

isElementInViewport(offset = 0) {
  const { top, bottom, height } = this.element.getBoundingClientRect();
  const holderRect = this.scrollContext.getBoundingClientRect();
    return top <= holderRect.top + offset
      ? holderRect.top + offset - top <= height
      : bottom - holderRect.bottom + offset <= height;
}

animejs: 3.2.0

[juliangarnier]

Planned for v4 😃 Still working on what the API should look like.

[yellow1912]

I also agree that this should not be inside animejs code at all. I do have some code to wrap around animejs and handle things like that but I haven’t gotten around writing and proper test code yet to publish.