Start animation when element is in viewport.

[infacto]

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

[ghost]

The most modern way is to use the Intersection Observer API. I've created a small wrapper for it. It can cover some simple cases. See example with anime.js https://github.com/web2033/trigger

[kn0wn]

Hi @infacto! I don't think this implementation would fit the animejs style currently - at least not in terms of a built in function. As @web2033 stated above a more modern way of implementing this would be utilising the Intersection Observer API

[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.

[Sceat]

Hi @infacto! I don't think this implementation would fit the animejs style currently - at least not in terms of a built in function. As @web2033 stated above a more modern way of implementing this would be utilising the Intersection Observer API

It would actually be very handy as an additional option

[juliangarnier]

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

[lizyChy0329]

Planned for v4 :) 计划用于 v4 :) Still working on what the API should look like.仍在研究 API 应该是什么样子。

https://motion.dev/dom/in-view this helper is so great