question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Start animation when element is in viewport.

See original GitHub issue

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

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
juliangarniercommented, Oct 29, 2022

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

1reaction
yellow1912commented, Sep 25, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I trigger this animation to start once in viewport?
The best way to do this is to move the animation into a separate class and then add it when your element intersects...
Read more >
Animate Elements If In Viewport - CodePen
Leveraging vanilla Javascript and CSS to animate elements if they appear in the viewport. Updates on load, scroll and resize events, and resets...
Read more >
How to trigger a CSS animation on scroll
This is a step-by-step tutorial for how to create a CSS animation and trigger it on scroll using the Intersection Observer API.
Read more >
Animate elements when scrolled into view with native JavaScript
You need to apply the animation when an element is scrolled into view. The following JavaScript calls init to build a NodeList (...
Read more >
Animate when in view | Webflow University
Animate an element when it scrolls into view · Because each section is the height of our viewport, let's size our cardboard box...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found