Jump to content
Search Community

Modifying .fromTo() fromVars and toVars objects from TimelineLite instance

James Hopkins test
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 there,

 

I'm creating a TimelineLite instance, and added a fromTo() method. I've created both fromVars and toVars using object literal syntax, but I need to be able to have several keys as variables (left or right CSS offsets depending on a condition) - so I need to use bracket notation.

 

I had used TweenLite previously using the non-OO style, and was able to initially pause the fromTo() method, modify the previously-set CSS properties using var and it's child property startAt, and then resume the tweens.

 

Is there any way of achieving the same thing using TimelineLite in the OO style?

 

Thanks for any help in advance.

 

James

Link to comment
Share on other sites

Yes, I agree with Jonathan, a demo would be most helpful.

 

If you need to change fromTo() vars you will most likely need to have a reference to the tween you are trying to modify which TimelineLite's fromTo() does not provide. Perhaps if you know the index of the tween that will work but you may have to do something like

//create the tween
var tween = TweenLite.fromTo(obj, 1, fromVars, toVars);

//add the tween to a timeline
tl.add(tween)

Either way, a demo will help. 

 

Thanks.

  • Like 1
Link to comment
Share on other sites

Cheers for the (incredibly) swift response, guys. My codepen example of my previous attempt which works (with a simple TweenLite instance) is at

See the Pen CheFB by anon (@anon) on CodePen

. The issue is that I'm not sure if I can access vars in the same way using the TimelineLite constructor approach. I'm likely to have around 10 .fromTo() instances in my Timeline, and I want to selectively amend fromVars and toVars objects on a particular instance.

 

Although offset is a string, it will become a variable, whereby it's value will depend based on a condition.

Link to comment
Share on other sites

There's nothing stopping me doing that; it's just a case of neatness :)

Using the function invocation method, I was able to simply parse object literals directly into the method, and modify those object keys directly from within the invocation (having initially paused the tween). However it seems that using the TimelineLite constructor in this way, I need to firstly employ an arguably superfluous variable reference in which to store my object laterals.

The reason for the post as simply to make sure I wasn't missing anything obvious!

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.
×
×
  • Create New...