Jump to content
GreenSock

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

Overwrite tween

Go to solution Solved by OSUblake,

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

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

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

  • Solution

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