Controling a timeline with an if/else statement

[mrowka3d]

Hello Animation Friends,

 

Looking for help if anyone wants the challenge

 

I have a timeline (tl_click) in my codepen that is not pausing the way I'd expect it.

 

The timeline:

tl_click.pause() // WORKS: timeline pauses on load
  .addLabel("open") // WORKS: timeline goes here when user clicks on the dot and this plays
  .to("#dot1_center", 1.5, {scale: 4, y: -15, x: -15, repeat: 0, ease: Elastic. easeOut.config( 1, 0.3)}, "open")
  .to("#dot1_close", 1.5, {fill: "#ffffff", repeat: 0, scale: 4, y: -9, x: -9, ease: Elastic. easeOut.config( 1, 0.3)}, "open")
  .call(function(){ dot_state = false })
  .pause() // DOES NOT WORK: timeline seems to pass here and plays on through to the end of the timeline
  .addLabel("close")
  .to("#dot1_center", 1, {scale: 1, y: 0, x: 0, repeat: 0, ease: Power4. easeOut}, "close")
  .to("#dot1_close", 1, {fill: "#4f2582", repeat: 0, scale: 1, y: 0, x: 0, ease: Power4. easeOut}, "close")
  .call(function(){ state = true }); // DOES NOT WORK: as this timeline runs to the end, my state variable does not seem to change back to true.

The click action:

function clickAnimation() {
    dot_state = true;
    if (state = true) {
        tl_click.play(), "open";
    } else {
        tl_click.play(), "close";
    }
}

The connection:

dot_click.addEventListener('click', clickAnimation);

I was hoping that when the user clicks on the dot, that it plays its open state then stops at my second pause function. But it plays right on through to the closing animation.

 

And the if else statement doesn't seem to work, but it does work on other demo's I've seen today.

 

I'm sure my syntax is just off.

 

Thank you for any help,

gregg

 

 

 

See the Pen oWbQdP?editors=0010 by mrowka3d (@mrowka3d) on CodePen

[Carl]

if you want to schedule a pause to occur at a specific time in a timeline use addPause() where you now have pause().

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/

 

As for telling your timeline which label it should play your syntax is a little funky

//good
tl_click.play("open")

//bad
tl_click.play(), "open";

[mrowka3d]

Thank you Carl for syntax help!

[mrowka3d]

Thank you so much for your help Carl!

 

I had a few other syntax errors in my last codepen that was breaking everything. But with those fixed... check out my amazing floating pulsing open/close button:

See the Pen oWbQdP by mrowka3d (@mrowka3d) on CodePen

 

Woop Woop!