Jump to content
Search Community

Prakash

Members

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Prakash

    Check if timeline is running

    in GSAP

    Posted

    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]);
}

     

×
×
  • Create New...