Jump to content
Search Community

Tweening from one class to another (Timelinelite)

bromel test
Moderator Tag

Go to solution Solved by bromel,

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

Hello all,

 

I have a div for which I want to sequence a string of classes. There are three classes in total, I can tween the first two but as for the last one I can not seem to make it work on the timeline. I would appreciate if someone could correct my error. Here is the link.

 

See the Pen GFyjD by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

The target selectors you are passing are evaluated 'now', not at the start of each tween. If your code is this:

 

$("<div class='fly'>foo</div>").prependTo("body");

var tl = new TimelineLite();
tl.to(".fly", 3, {className:"flyaway", right:"632px"})
  .to(".flyaway", 2, {className:"flybye"}, 1)
  .to(".flybye", 2, {className:"dead"});
only the .fly selector will work - the next two tweens will select nothing which is why flybye and dead are not being applied.

 

It would work better if you used the same object selection on all tweens (and cache it for better performance):

var fly = $('.fly');
tl.to(fly, 3, {className:"flyaway", right:"632px"})
  .to(fly, 2, {className:"flybye"}, 1)
  .to(fly, 2, {className:"dead"});
  • Like 2
Link to comment
Share on other sites

  • Solution

Hello Jamie,
 
I much appreciate your answer on this and understand what you mean so in essence the full code looks like this:

$("<div class='fly'>foo</div>").prependTo("body");

var tl = new TimelineLite();


var fly = $('.fly');
tl.to(fly, 3, {className:"flyaway", right:"632px"})
  .to(fly, 2, {className:"flybye"}, 1)
  .to(fly, 2, {className:"dead"}); 

What I wanted to ask since I am completely new to Javascript/jquery/GSAP is more of how the cache object is being referenced when it is being applied. From a non-technical perspective it seems as if it will inherit the next class and hold that as 'fly' and then apply the next class and cache that has 'fly' also. This is just an assumption but is this more or less to what is actually happening with the object?

 

bromel

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