Jump to content
GreenSock

Jonathan

How to make tween or timeline accept new selector value

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,

im making this animation run and then the onComplete callback increments the 'current' variable by one, so it would advance to the next element to animate.

But the problem im having is that the variable (currrent) increments by one, but the tween in the doSomething() function seems to not update the selector/element in that tween.

my example below:

var $ul = $("ul"),    
    $li = $ul.children(),    
    liCount = $li.length,    
    current = 0;

function doSomething() {
   var someTimeline = new TimelineMax({ onComplete:updateCurrent });
   someTimeline.add( TweenMax.to($li.eq(current), 1, {css:{opacity:0}}) );
   return someTimeline;		
}	

function updateCurrent(){
   current = ++current;}function restartTimeline() {    
   tl.restart();
}

var tl = new TimelineMax({ repeat:-1, onComplete:restartTimeline });
tl.add(doSomething(), "slide1");

But when i run it, it looks like the tween in the doSomething function is stored in memory so the selector/element never gets updated with the new increment.

// when the animation first runs the selector is:$li.eq(0)   //  $li.eq(current)// then the current variable gets incremented// then when it runs a 2nd time$li.eq(1)   //  $li.eq(current)

Is there a way to update the tween so it accepts the newly incremented variable in the tween?

Do i have to kill the someTimeline variable TimelineMax instance. So when the 'current' variable gets incremented the tween will accept the new selector.

Thanks ahead of time for any help!

Link to comment
Share on other sites

Hi,

 

In this cases is better to create a loop for the collection, in your case the li items, and  create a tween for each one. I'm going to presume that you're building a menu and looking to add a mouseover and mouseout animation. Take a look at this codepen of the Greensock collection:

 

See the Pen af138af51e5decd43c3c57e8d60d39a7 by GreenSock (@GreenSock) on CodePen

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

thanks for the quick answer! :)

 

but im actually using it for a slider im making .. but was wondering why it wouldnt accept the new increment. So i will run the tween in a loop.

 

basically im creating a parent timeline that calls child timelines that will have a fade animation and then wait 5 seconds. And then the onComplete callback will increment the 'current' variable. The current variable is what drives the next slide.

 

because the slider will have a next and previous button... and an autoplay feature

 

so im fleshing out the slider as a timeline, so when each child timeline finishes it will callback the current variable to change and then the next time the timeline restarts it will be animating the next slide.

 

Im just trying to make a slider solely from a GSAP timeline.. so i can control it using all the playback controls.

 

So i need way to have it accept a element selector that changes mid stream through an animation run.

Link to comment
Share on other sites

Ok, then look at this codepen:

 

See the Pen Bgjzw by rhernando (@rhernando) on CodePen

 

Is far from being perfect but is a start, you could fork it and play with in order to create your app.

 

Although I keep thinking, specially since that sample, that the best approach for the slider issue is not a parent timeline, but a recursive function that animates the following or previous item. What I mean is create just one GSAP instance instead of a timeline, that enhances the chance of screwing it up at some point. Just my two cents.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

thanks rhernando!!  .. I will play around the pen you made.. I appreciate your advice and time!

Link to comment
Share on other sites

rhernando here is a code pen test of me trying with the timeline only approach:

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

also here is your code pen example slightly modified for showing one slide at a time... its gonna give me ideas:

 

See the Pen sJlix by jonathan (@jonathan) on CodePen

 

i will still have to try and test my  timeline version with a loop, so there is only one child timeline, maybe for a next slide animation and a previous slide animation.

 

I still need to find if the GSAP API has a method for updating the tween or timeline if one of the object properties are changed.. like the element/selector.

 

I wonder if there is a way through GSAP using one of the KILL methods, or UPDATETO methods?

 

thanks for the help rhernando!

Link to comment
Share on other sites

Looks good, nice touch with the progress bar at the top.

 

One thing you could add is an onReverseComplete call for your main timeline, because right now if the main timeline repeats twice and you toggle the direction the slider will reverse just twice. But adding a timeline.reverse(0) in the reverse complete callback will reverse the timeline from the end, like that the slider can cycle endlessly in either direction. Like this:

tl = new TimelineMax({ 
                      paused:true, 
                      repeat:-1,
                      onComplete: restartTimeline,
                      onCompleteParams: ["{self}"],
                      onReverseComplete: revserseTimeline,
                      onReverseCompleteParams: ["{self}"],
});

function revserseTimeline()
{
    tl.reverse(0);
}

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

cool.. i just updated my pen with those onReverseComplete changes

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

thanks Rodrigo

Link to comment
Share on other sites

just in case anyone wants to know, How to make tween or timeline accept new selector value..

 

and after getting advice from Jack.. he suggested that I need to use one of the kill methods on the tween, If I want to re-declare a new target/selector.

 

He explained that when a tween is run, you can not change the tweens target, since the animation is technically running in memory.

 

So after following Jacks advice, I killed the tween after its completion and then re-declared it with a new selector. After that I was able to animate the new target.

 

I hope this helps someone else!

Link to comment
Share on other sites

Thanks for sharing, jonathan. And just to clarify, the issue isn't so much that the tween is "running in memory" as much as it's related to how there's a bunch of recording of values initially when the tween is created that's expensive to re-do. Like it has to look at the target, see if it's selector text, yank out any array elements, record starting values (for each one if there are multiple targets), etc. So it isn't as if you can just change one variable and it magically handles everything fluidly. And to accommodate on-the-fly target swapping, we'd have to inject a bunch of code and it just doesn't seem worthwhile. It's easier to just kill() your tween and create another one. 

 

Cheers!

Link to comment
Share on other sites

Thanks for the clarification Jack! :)

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