Search the Community
Showing results for tags 'timeline status'.
Found 1 result
-
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]); }
