Jump to content
Search Community

Check if timeline is running

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

in my current project that is a fullscreen site, the visitor first sees an introduction animation.

After thsi animation the timeline is paused.

The user now can navigate through diffrent screens by using the mousewheel.

Each screens animations are part of the main timeline that is declared global and are labeled.

 

I am using TimelineMax and the main timeline is declared global to access it from everywhere where its needed.

 

Navigating through the screens and all animations are working but I have the following problem:

 

When an timeline section (screen animation group) is running I dont want the user to be able to scroll further untill the animation is finished.

But I cant check the current state / status of the main timeline. I have tried .active(), .paused() but according to my logging output they dont seem to change.

 

So how can I access the current state of the timeline?

 

Markup:

<!-- HTML TAG AND <head> -->
<body>
  <!-- Screens do also have some markup inside but thats unnecessary -->
  <div id="screen-1" class="screen"></div>
  <div id="screen-2" class="screen"></div>
  <div id="screen-3" class="screen"></div>
  <div id="screen-4" class="screen"></div>
</body>

JavaScript TimelineCreation

$(function(){
  //Get necessary DOM elements with jQuery
  //and declaring timeline
  var tl = new TimelineMax();

  /*
   ...
   some more code
   ...
  */

  //Creating timeline
  //Introduction animation
  tl.add(TweenMax.to(/* my animation */));
  //Labels are declared in an array, each screen has an own label
  tl.addLabel(sceneLabel[0]);
  //add more animations
  tl.addLabel(sceneLabel[1]);
  // more animations ...
  tl.addLabel(sceneLabel[n]); 

});

Mousewheelhandler

function mouseWheelHandler(e) {
  //Following condition as always false no matter when triggered,
  //also tried .paused() but its also not working
  if ( tl.isActive() === true ) {
    return;
  }
  if (e.deltaY > 0) {
    //Scrolldown
    console.log("scrollDown");
    currentScreen += 1;
  }
  else if (e.deltaY < 0) {
    //Scrollup
    currentScreen -= 1;
  }
  if (currentScreen > maxScreens) {
    currentScreen = maxScreens - 1;
    return;
  }
  else if (currentScreen <= 0) {
    currentScreen = 1;
    return;
  }
  tl.tweenTo(sceneLabels[currentScreen]);
}
Link to comment
Share on other sites

  • Solution

First, here is a handy demo on using isActive() http://codepen.io/GreenSock/pen/Pwzomo which may help you and others see how and when it is useful.

 

The trick with your code is that you are not playing the timeline (tl) you are generating a tween by using tweenTo() that literally scrubs the playhead forward/backwards.

 

The timeline has no idea that another tween is acting upon it.

 

The trick is to create a reference to the tween that tweenTo() generates and then see if that tween isActive().

 

like

//first set up a gobal var
var sceneController;


//later in some function
sceneController = tl.TweenTo(sceneLabels[currentScreen]);

//and then later
if(sceneController).isActive()) {}

There's a guy in this thread who explains it quite well in much further detail:)

 

http://greensock.com/forums/topic/11469-isactive-not-working-in-custom-scene-manager/?p=46618

  • Like 2
Link to comment
Share on other sites

  • 2 years later...
On 6/24/2015 at 4:54 PM, BornToCreate said:

Hello,

in my current project that is a fullscreen site, the visitor first sees an introduction animation.

After thsi animation the timeline is paused.

The user now can navigate through diffrent screens by using the mousewheel.

Each screens animations are part of the main timeline that is declared global and are labeled.

 

I am using TimelineMax and the main timeline is declared global to access it from everywhere where its needed.

 

Navigating through the screens and all animations are working but I have the following problem:

 

When an timeline section (screen animation group) is running I dont want the user to be able to scroll further untill the animation is finished.

But I cant check the current state / status of the main timeline. I have tried .active(), .paused() but according to my logging output they dont seem to change.

 

So how can I access the current state of the timeline?

 

Markup:


<!-- HTML TAG AND <head> -->
<body>
  <!-- Screens do also have some markup inside but thats unnecessary -->
  <div id="screen-1" class="screen"></div>
  <div id="screen-2" class="screen"></div>
  <div id="screen-3" class="screen"></div>
  <div id="screen-4" class="screen"></div>
</body>

JavaScript TimelineCreation


$(function(){
  //Get necessary DOM elements with jQuery
  //and declaring timeline
  var tl = new TimelineMax();

  /*
   ...
   some more code
   ...
  */

  //Creating timeline
  //Introduction animation
  tl.add(TweenMax.to(/* my animation */));
  //Labels are declared in an array, each screen has an own label
  tl.addLabel(sceneLabel[0]);
  //add more animations
  tl.addLabel(sceneLabel[1]);
  // more animations ...
  tl.addLabel(sceneLabel[n]); 

});

Mousewheelhandler


function mouseWheelHandler(e) {
  //Following condition as always false no matter when triggered,
  //also tried .paused() but its also not working
  if ( tl.isActive() === true ) {
    return;
  }
  if (e.deltaY > 0) {
    //Scrolldown
    console.log("scrollDown");
    currentScreen += 1;
  }
  else if (e.deltaY < 0) {
    //Scrollup
    currentScreen -= 1;
  }
  if (currentScreen > maxScreens) {
    currentScreen = maxScreens - 1;
    return;
  }
  else if (currentScreen <= 0) {
    currentScreen = 1;
    return;
  }
  tl.tweenTo(sceneLabels[currentScreen]);
}

 

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