Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
andyr

Overwrite tween

Recommended Posts

var tl = new TimelineLite({paused:true});
tl.add(TweenLite.from('.ng_dialog', 0.2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0, onReverseComplete: hide}));

How do you update/overwrite "top" and "left".  I've tried various things from the docs, but no joy.

 

OR, add those two properties.  .set()?

 

Thanks.

Link to comment
Share on other sites

Line 25 - 

See the Pen EjavPd by andyroutledge (@andyroutledge) on CodePen

 

Applying the code from your CodePen, but can't get it to work.

Link to comment
Share on other sites

for timelines pls try like this :

var Tween = TweenMax.to(".box",2,{x:100});

var tl = new TimelineMax();
tl.add(Tween);

$("#change").on("click", function() {
  Tween.vars.css.x = 500;
  tl.seek(0).invalidate().restart();
});

See the Pen bddvgy by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Things go wrong at this line:

Tween.vars.css.x = 500;
Link to comment
Share on other sites

This seems to work: 

Tween.vars.css = {x:200};

tl.restart() works, but tl.seek(0).inavlidate().restart() does not.

 

 

Link to comment
Share on other sites

Hi andyr

 

There are several issues with your example. First, you are not adding the tween to your timeline. 

tl.add(tween);

// Should be
vm.tl.add(vm.tween);

Second, you are trying to invalidate and change the vars on your timeline.

vm.tl.vars.css.top = 200;

// Should be
vm.tween.css.top = 200;

Third, you should probably handle animation in an animation module and not the controller. The controller is a view model, so you really only need 1 line of code.

vm.show = false;

See the Pen pJJZdj by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks OSUblake.

 

Now solved.

 

Locally, I've got the animation in a directive, with the controller toggling (or could put inline as in your example) and passing in coords to the directive.  Will put into animation module.  Thanks.

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