Jump to content
GreenSock

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

update variables in an animation cycles

Recommended Posts

 

Hello,

I have an animation of many cycles in which I would like to be able to move one of the variables of one of the cycles depending on a conditional. It can?

 

 

I want to update the variables one, two and three

 

animation.to(".C",.5,{x:one})
.to(".O",.5,{opacity:0})
.from(".create-r",.5,{y:100,opacity:0})
.from(".create-e",.5,{y:100,opacity:0})
.from(".create-a",.5,{y:100,opacity:0})
.from(".create-t",.5,{y:100,opacity:0})
.from(".create-e2",.5,{y:100,opacity:0})
.to(".create",.5,{opacity:0,opacity:0})
.to(".empo-e",.5,{x:two})
.from(".empowere-M",.5,{y:100,opacity:0})
.from(".empowere-P",.5,{y:100,opacity:0})
.from(".empowere-O",.5,{y:100,opacity:0})
.from(".empowere-W",.5,{y:100,opacity:0})
.from(".empowere-E",.5,{y:100,opacity:0})
.from(".empowere-R",.5,{y:100,opacity:0})
.from(".empowere-E2",.5,{y:100})
.to(".empo",.5,{opacity:0})
.to(".empowere-M",.5,{x:three,})
.from(".move-O",.5,{y:100,opacity:0})
.from(".move-V",.5,{y:100,opacity:0})
.from(".move-E",.5,{y:100,opacity:0})
.to(".move",.5,{opacity:0})
.from(".connect-c3",.5,{y:100,opacity:0})
.from(".connect-o2",.5,{y:100,opacity:0})
.from(".connect-n3",.5,{y:100,opacity:0,})
.from(".connect-n4",.5,{y:100,opacity:0})
.from(".connect-e2",.5,{y:100,opacity:0})
.from(".connect-c4",.5,{y:100,opacity:0})
.from(".connect-t2",.5,{y:100,opacity:0})
.to(".connect",.5,{opacity:0})
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Is not quite clear what exactly you want to do, but I'm guessing that you want to update the opacity values of some instances after you have created the timeline? If that's the case the recommendation is to create a function that builds the timeline and when you call that function set the values you want:

 

var animation;
var myCondition = true;

function createTimeline () {
  animation = new TimelineMax()
  	.to(".O",.5,{opacity: myCondition ? 0 : 1})
	.from(".create-r",.5,{y:100, opacity:  myCondition ? 0 : 1});
};

 

Also if you can, please provide a reduced sample illustrating what your issue is. Take a look at the post and video @Carl made for that purpose:

 

 

Happy Tweening!!

  • Like 2
Link to comment
Share on other sites

13 minutes ago, Rodrigo said:

Hi and welcome to the GreenSock forums.

 

Is not quite clear what exactly you want to do, but I'm guessing that you want to update the opacity values of some instances after you have created the timeline? If that's the case the recommendation is to create a function that builds the timeline and when you call that function set the values you want:

 


var animation;
var myCondition = true;

function createTimeline () {
  animation = new TimelineMax()
  	.to(".O",.5,{opacity: myCondition ? 0 : 1})
	.from(".create-r",.5,{y:100, opacity:  myCondition ? 0 : 1});
};

 

Also if you can, please provide a reduced sample illustrating what your issue is. Take a look at the post and video @Carl made for that purpose:

 

 

Happy Tweening!!

See the Pen QYReBd by kelvin-alejandro-arias-arias (@kelvin-alejandro-arias-arias) on CodePen


the 3 variables are 3 letters that must move different space in x depending on the width of the screen 

Link to comment
Share on other sites

Can you please create a reduced test case that's not 300 lines of code? I think that'd really help get you an answer. Most of us don't have time to decipher that much code and try to piece together a solution for you, but we'd be happy to peek at something more reduced. Perhaps just one letter, and explain what you need that to do at various sizes? 

 

Note: the updateTo() method does not work with plugin values (like CSSPlugin). 

 

It might be cleanest to just seek(0).kill() your original timeline and then rebuild it when you need to change those variables. Or I suppose you could edit the tween.vars.css.x and then invalidate() the timeline after you seek(0). I'm not entirely sure that's the effect you want. 

  • Like 3
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.
×