Jump to content


Controling a timeline with an if/else statement

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
  .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,





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

Link to comment
Share on other sites

  • Solution

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




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


tl_click.play(), "open";
  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
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.