Timeline animation pause / resume with conditionals not working

[Demorus]

I am having trouble getting my timeline animation to pause and resume with my conditional statements. The script below is in a seperate script tag

 

 if ( $(".ball").hasClass( "active" ) ) {        
      textAnimation.pause();
    }
       else {
 textAnimation.resume();
     }

 

Why is this happening? there are no errors and the animation name is written as it should. I also read the documentation and I am using pause() and resume() correctly.

[Diaco]

Hi Demorus 

 

Pls make a reduced codepen demo available for better response

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

check this out :

 

See the Pen ByyqjK by MAW (@MAW) on CodePen

 

in your case check that your tl variable defined as global var ( not in a function scope ) too 

[Jonathan]

Hello Demorus, and Welcome to the GreenSock Forum!

 

You could try and use the GSAP isActive() method:

:

.isActive( ) : Boolean

Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).

:

isActive() .. Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines). So for example, if a tween is in the middle of tweening, it's active, but after it is finished (or before it begins), it is not active. If it is paused or if it is placed inside of a timeline that's paused (or if any of its ancestor timelines are paused), isActive() will return false. If the playhead is directly on top of the animation's start time (even if it hasn't rendered quite yet), that counts as "active".

You may also check the progress() or totalProgress(), but those don't take into consideration the paused state or the position of the parent timeline's playhead.

 

With your code it would look like this:

:

// tl represents your timeline instance variable
if (tl.isActive()=== true) {        
      textAnimation.pause();
} else {
     textAnimation.resume();
}

:

The tl instance above would be the current timeline instance you are checking for isActive()

 

Hope that helps