mrkos67 Posted February 9, 2021 Share Posted February 9, 2021 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 comment Share on other sites More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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 comment Share on other sites More sharing options...
mrkos67 Posted February 9, 2021 Author Share Posted February 9, 2021 targets, ideally. Link to comment Share on other sites More sharing options...
mrkos67 Posted February 9, 2021 Author Share Posted February 9, 2021 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 comment Share on other sites More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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 comment Share on other sites More sharing options...
GreenSock Posted February 9, 2021 Share Posted February 9, 2021 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: 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 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. 1 Link to comment Share on other sites More sharing options...
mrkos67 Posted February 9, 2021 Author Share Posted February 9, 2021 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. 1 Link to comment Share on other sites More sharing options...
mrkos67 Posted February 9, 2021 Author Share Posted February 9, 2021 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now