Adding a conditional in between timeline steps

[loganvenderlic]

Hey guys, I have a timeline that affects an element that sometimes has a child button inside of it and sometimes does not. Therefore, when it doesn't have the button inside of it, I'm getting the "GSAP target null not found" warning in the console. 

 

I was hoping I could do something like this...

hoverClipPathtl
    .to(clipContainer, {
        clipPath: "polygon(0% 0%, 50% 0%, 100% 0%, 100% 28.03%, 48.24% 28.03%, 48.24% 86.89%, 19.93% 86.89%, 19.93% 100%, 0% 100%)"
    })
    .to(clipContainer, {
        clipPath: "polygon(0% 0%, 50% 0%, 100% 0%, 100% 0%, 48.24% 0%, 48.24% 40.39%, 19.93% 40.39%, 19.93% 100%, 0% 100%)"
    })
    .to(clipContainer, {
        clipPath:"polygon(0% 0%, 50% 0%, 100% 0%, 100% 0%, 48.24% 0%, 48.24% 0%, 21.43% 0%, 21.18% 0%, 0% 0%)"
    })
    if (button) {
    .to(buttonBG, {
        backgroundColor: "#000000a6"
    })
    .to(button, {
        opacity: 1
    });
    }

 

But that doesn't work. Is there a way to do this so that the button tweens only run when the button exists? Thanks!

[GreenSock]

That's invalid JavaScript. 

// BAD
tl.to(...).to(...)
if (someCondition) { // <-- PROBLEM! You broke the chain with an if statement
 .to(...) 
}
.to(...);
     
// GOOD
tl.to(...).to(...);
if (someCondition) {
  tl.to(...); // not chaining.
}
tl.to(...);

If you still need help, please make sure you provide a minimal demo, like a CodePen or Stackblitz and we'd be happy to take a peek. 

[loganvenderlic]

Ahh thank you so much! Sorry I didn't catch that. I really appreciate your help.