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