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 --><divid="screen-1"class="screen"></div><divid="screen-2"class="screen"></div><divid="screen-3"class="screen"></div><divid="screen-4"class="screen"></div></body>
JavaScript TimelineCreation
$(function(){//Get necessary DOM elements with jQuery//and declaring timelinevar tl =newTimelineMax();/*
...
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 workingif( tl.isActive()===true){return;}if(e.deltaY >0){//Scrolldown
console.log("scrollDown");
currentScreen +=1;}elseif(e.deltaY <0){//Scrollup
currentScreen -=1;}if(currentScreen > maxScreens){
currentScreen = maxScreens -1;return;}elseif(currentScreen <=0){
currentScreen =1;return;}
tl.tweenTo(sceneLabels[currentScreen]);}
Check if timeline is running
in GSAP
Posted