Jump to content
Search Community

Controling a timeline with an if/else statement

mrowka3d test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...