Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mrkos67

utility function to get all actively animating objects?

Recommended Posts

Say I have  a couple of overlapping, yet offset, tweens within a timeline. As the timeline progresses, is there a way to get which objects are animating at any given time, like in the tick function? 

Link to post
Share on other sites

Hey mrkos67. Are you saying that you're interested in finding out which targets are being animated or which tweens/timelines are active?

Link to post
Share on other sites

Here's my situation: I'm producing an animated slideshow of images crossfading with each other, drawing onto a canvas. Since animating on a canvas necessitates a timer function or using the tick function, how do I know which images need to be animated at any given timer tick? 

Link to post
Share on other sites

Answering your original question, you can get the targets of a given tween by using .targets(). Getting all of the currently active tweens is a bit more complex but .getTweensOf() can be used, especially if you're wanting to get all of the active DOM elements. 

 

2 minutes ago, mrkos67 said:

Here's my situation: I'm producing an animated slideshow of images crossfading with each other, drawing onto a canvas. Since animating on a canvas necessitates a timer function or using the tick function, how do I know which images need to be animated at any given timer tick? 

That sounds more like something that you should set up in your code. But it's pretty hard to say without seeing a minimal demo of the situation.

Link to post
Share on other sites

Yeah, that would be highly inefficient to constantly ask GSAP "which targets are animating right now?" on every single tick. It'd be far better to structure your code to manage that in a different way. Like Zach said, it's very tough to offer advice without a minimal demo but examples are:

  1. If you're animating the opacity of things, for example, then just loop through your Array of objects and skip rendering any that have opacity: 0
  2. Use onStart/onComplete callbacks to push the target(s) in/out of an "active" Array

There are other techniques as well, but hopefully this gives you some ideas. 

  • Like 1
Link to post
Share on other sites

roger that. I had ideas similar to your points #1 and #2 about self-managing the active tweens/objects, but didn't know if there was a built in utility function already (that wasn't too inefficient).

 

Thanks for the help all, this'll get me started, and if i get something working, i'll post a quick pen. 

  • Like 1
Link to post
Share on other sites

got a very basic version of a cross-fading, panning, scaling slideshow working! here's the pen: 

See the Pen NWbRPWq by mrkos67 (@mrkos67) on CodePen

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

×