Jump to content


Updating a tween using TimelineMax

Moderator Tag

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

Hi, I'm having trouble getting this to work, so I'm wondering if anyone can help?


Basically, I'm creating a TimelineMax instance and populating it with some tweens.


One of the tweens I'm using to set a div at exactly the window height and another at exactly 0 (cleaned up to make it more generic):

tl.to(selectors.$myElement, 0, posObj({ display: 'block', y: $(window).height(), z: 0.001}), "myLabel");

The problem is that the div heights are being resized on browser resize, so that two divs stacked up on each other no longer butt up against each other. I tried approaching it by looping through the tl.getChildren, finding tweens with a "y" var, then updating that number with the new window height, but this doesn't seem to be working as expected.


 var updateTweens = function () {
            tl.getChildren().map(function ( item) {
            });        }; 

So is there a better way to accomplish this? Bear in mind that I have around 30 tweens to work with and when I tried to use the "tl.add(var myTween=new TweenMax(el, time, vars));" approach everything sort of broke.


But any help is greatly appreciated.



Link to comment
Share on other sites

Hi and welcome to the Greensock forums.


The best way would be to store that particular tween in a variable, then add the variable to the timeline and finally update using the updateTo() method:

var tl = new TimelineMax(),
    tn1 = TweenLite.set(selectors.$myElement, {display:'block', y:$(window.height(), force3D:true)});


tn1.updateTo({y:$(window).height()}, false);

Some notes about this code:


1.- Instead of using a zero duration tween, you can use the set() method, also you can add the force3D:true parameter to the vars instead of adding a little z value.


2.- The tween is appended to the timeline using the add() method which is incredibly useful and flexible when it comes to... well add anything to a timeline, it can be a tween, timeline, callback, label and anything that it can be added to a timeline.


3.- The updateTo() method is the best way to change values  of any of the vars of a particular tween, be careful though that it can't change everything in the tween, just the tween's values for the indicated vars.




Link to comment
Share on other sites

Thanks for the help, but it's still not working exactly right.


Following your example, I'm setting the "y" value right when the tween starts, and then resizing the browser and inspecting the results. So theoretically, if I resize without scrolling, tl.progress(0) ought to reset the y value immediately.

 castTween.updateTo( posObj({ y: $(window).height()})) ;

The posObj function just does a few hacks for IE8 that aren't relevant here since they're not triggered.


I then look in the debugger and I can see that the original height was around 440, and the new window height is indeed much higher (in this case around 650). I look in Firebug, and the results are still like this:


<section id="cast-landing" style="display: block; top: 0.05px; transform: translate3d(0px, 444px, 0px);">

So it's not updating that translate3d property at all. What am I missing?

Link to comment
Share on other sites

I'm not sure I have a full grasp of what's going on here, but have you tried invalidating the tween with castTween.invalidate() as well ? It will clear the recorded starting values which I think is what you are referring to.

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.