Share Posted June 24, 2015 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 More sharing options...
Share Posted June 24, 2015 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 24, 2015 Thanks, now its working. Link to comment Share on other sites More sharing options...
Share Posted March 6, 2018 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now