Jump to content
Search Community

How to update the element being animated in TweenMax?

gimperdaniel test
Moderator Tag

Go to solution Solved by Carl,

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

Here's my tween:

TweenMax.to($(".myel.active .fact"),2,{y:"-=10",opacity:0,repeat:10,onComplete:nextFact});

nextFact is a function that determines the next element. So it pretty much removes .active class from one child and then assigns it to the next. However after the first run, nextFact updates the .active class, but TweenMax is still looking at the old element, and it keeps animating the old element, not the new child with a .active class.

 

So... how do I tell TweenMax that .myel.active has changed?

Link to comment
Share on other sites

  • Solution

Yup, TweenMax has no idea that you are switching the classes around. It stores a reference to the target element that existed at the time the tween was created, otherwise it would be very inefficient to search the DOM for the target element every time the tween repeats or restarts.

 

An easy way around this would be to just use a tween with a single iteration and onComplete call a function that creates a new tween like:

var tween;

function moveActive() {

   //remove active class if necessary
   //add active class to something
   
   activeElement = $(".active"); 
   tween = TweenMax.to(activeElement, 1, {x:200, onComplete:moveActive})
}

moveActive();
  • Like 2
Link to comment
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.
×
×
  • Create New...