jrhager84 Posted May 3, 2020 Share Posted May 3, 2020 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! Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2020 Share Posted May 3, 2020 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) } 3 Link to comment Share on other sites More sharing options...
jrhager84 Posted May 3, 2020 Author Share Posted May 3, 2020 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? Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2020 Share Posted May 3, 2020 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. Link to comment Share on other sites More sharing options...
jrhager84 Posted May 3, 2020 Author Share Posted May 3, 2020 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! Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2020 Share Posted May 3, 2020 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) } Link to comment Share on other sites More sharing options...
jrhager84 Posted May 3, 2020 Author Share Posted May 3, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now