Can you conditionally append .from() methods?

[jrhager84]

I have a <div> that has data attributes of animationType and animateChildren. I'm trying to conditionally set animation timelines based on the values of those properties. I have it set via switch statement, and I'm essentially trying to either store the command in a variable, append to it, and fire after the case is evaluated, *or* have the conditional chaining happen in the switch case that has 'animateChildren' attribute. Is there a way to conditionally *add* .from() animations to the end of a timeline based on an if statement? Let's say (with this pseudo-code):

gsap.timeine().from(the code here)
	if (some condition == false) {
      .from(code1) 
    } 
	if (another condition == true) {
      	.from(code2)
    };

intended results based on above conditions:

gsap.timeline().from(main code).from(code2);

Hopefully that makes sense. Thanks!

[OSUblake]

You can build a timeline like that, you just need a reference to the timeline.

 

var tl = gsap.timeine().from(the code here)

if (some condition == false) {
  tl.from(code1) 
} 
if (another condition == true) {
  tl.from(code2)
}

 

[jrhager84]

1 minute ago, OSUblake said:

You can build a timeline like that, you just need a reference to the timeline.

 

var tl = gsap.timeine().from(the code here)

if (some condition == false) {
  tl.from(code1) 
} 
if (another condition == true) {
  tl.from(code2)
}

 

so 'tl' would contain the base animation, and invoking .from() afterwards would be chaining it?

 

[OSUblake]

Try it out. tl is the instance. You're just adding to it. You can create a timeline in any order using the position parameter. 

 

[jrhager84]

I don't have it set up yet. Just so I understand you. Are both code examples you gave the same? Or if I'm creating a timeline a should push and then fire? Just making sure I understand you correctly. Thanks!

[OSUblake]

No. You don't push anything. Just forget the last code example. I was only comparing the logic flow of an array to a timeline, which I assumed you might understand better.

 

Do it just like I showed here. 

 

var tl = gsap.timeine().from(the code here)

if (some condition == false) {
  tl.from(code1) 
} 
if (another condition == true) {
  tl.from(code2)
}

 

 

[jrhager84]

53 minutes ago, OSUblake said:

No. You don't push anything. Just forget the last code example. I was only comparing the logic flow of an array to a timeline, which I assumed you might understand better.

 

Do it just like I showed here. 

 

var tl = gsap.timeine().from(the code here)

if (some condition == false) {
  tl.from(code1) 
} 
if (another condition == true) {
  tl.from(code2)
}

 

 

I see. I thought I understood it. Just wanted to make sure. I appreciate you taking the time to explain it in more than one way!