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

IntersectionObserver to pause/play animations

See original GitHub issue

Particles animation can affect website performance and a good improvement could be detecting if particles container is visible on the screen

I’ve thought about Intersection Observer API to check this but some browsers can’t use this feature so a check of the API availability is needed.

This could interact with the existing pauseOnBlur property (that pauses animations when the window loses its focus) or a new one can be used, personally I prefer the first solution.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
issue-label-bot[bot]commented, Oct 6, 2020

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.96. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

0reactions
KolCrookscommented, Oct 9, 2020

I created a pull request that implements what we have talked about #942. Preview here: Image

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to auto play/pause videos like Netflix | by Akash Thakur
First can be achieved by intersection observer API and the second with page visibility API. Let's look at the implementation below.
Read more >
Play/pause CSS animations with IntersectionObserver
In this demo, all CSS animations are paused by default. Scroll (slowly!) downwards, and watch the info-bar at the bottom. An element will...
Read more >
Minimize browser repainting: Simplest code for intersection in ...
var observer = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { // Pause/Play the animation if ...
Read more >
How To Implement React “useInView” Custom Hook
Intersection Observer, animations, and multiple refs ... pause/play a video when it is exiting/entering the view; count how many times an ...
Read more >
Quick look into the Intersection Observer API - Notificare
Auto-Pause Videos. Another common use case for the IntersectionObserver would be to pause/play a video whenever that element is visible or ...
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
Previous page

TypeError: undefined is not a function error for iOS devices with Retina displays on 1.18.3

Next page

Triangles issues/questions