Change vars in TimeLine

[Romano]

Hello

I'm using TimeLineLite.

 

When you resize the window, it is necessary to recalculate the offset. How to do it?

 

Sample:

 

var tl = new TimelineLite({paused: true});
    var tweener = TweenMax.to($("#mylayer"), 10, {left: "-10%", delay: 1});

    $(window).resize(function (e) {
        tweener.updateTo({left:"20%"}, false);
       

    });

 

updateTo - not working (

 

Can u help me?

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The reason updateTo() is not working is because is not specifically designed to work with plugins values (says so in the docs), in this case the CSS Plugin. For this case what you could do is wrap the values you're updating in a css:{} key:pair in the config object, like this:

$(window).resize(function (e)
{
  tweener.updateTo( {css:{left:"20%"}}, false);
});

The reason is that as soon as you create the TweenMax instance GSAP creates an object and wraps everything related to the CSS Plugin in that css:{} wrapper, so when you're telling the engine to update those values GSAP can't find them, but if you specify that they reside in the CSS Plugin config object GSAP knows exactly where and what to look for and it updates the values accordingly.

 

That should do the trick.

 

Rodrigo.

[GreenSock]

For the record, updateTo() doesn't officially support updating plugin-related values mid-tween. It would take a while to explain the mechanics involved, but in general my advice would be to just create a new tween if there's any way you can.