update variables in an animation cycles

[kelvinxD21]

 

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})

[Rodrigo]

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!!

[kelvinxD21]

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 

[GreenSock]

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.