Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jimmi Heiserman

Have animations use less resources or pause when not on screen?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

This may be a better question for a general Dev question site, but you guys are so knowledgeable of this stuff I have to ask it here.

 

I recently created a bunch of self-contained svg animations for a client, where each svg contains it's own JavaScript and loads gsap engine and utilizes that for it's animation. A really nice trick really, kind of like an animated png; just drop it into your code as an <object>, not an img or such.

 

But they (any animation really) hog a lot of resources when many are on a page, or when they are large. Do you know of a way to pause the animations, or  auto display:none, when not on screen/below the fold? If there is a nice gsap feature that handles this, great. I imagine it's more of a JavaScript detection code to determine if it's actually on screen, and I don't know if that's possible from a self-contained svg file.

 

Anyway, shot in the dark how people handle resource management with gsap in situations like this. Thanks.

Link to post
Share on other sites

Hello @Jimmi Heiserman,

 

To detect when an element is visible in the viewport you can try and use the HTML5 Intersection Observer API:

 

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

Quote

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

 

Happy Tweening!

  • Like 5
Link to post
Share on other sites

Yup, this is exactly what I'm looking for. Perfect solution to keep frame rate high and not waste resources.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×