Calling a function just before a timeline starts to play

[farhoudz 8 Likes (Newbie)]

I have a clickable icon which when clicked by user I want to reverse a timeline and after the reverse process is finished play another timeline but the point is that I want to call a function just before the second timeline starts to play so here is the functions I would like to call :

function day() { $('section').removeClass('night').addClass('day'); } 

function night() { $('section').removeClass('day').addClass('night'); }

and here is the click function I wrote:

$('.up').click(function() {

TweenMax.delayedCall(0, function(){tlFour.reverse()});    
TweenMax.delayedCall(5.4, function(){tlThree.call(day, 0); tlThree.play()}); 

}

In which the second 5.4 delay is the time needed for tlFour timeline reverse to finish and here are my timelines :

 

var tlThree = new TimelineMax();

tlThree.pause();

tlThree.add( TweenMax.to(".layer-twentyTwo", 0.5, {left:0}) );
tlThree.add( TweenMax.to(".layer-twentyThree", 0.5, {top:0}) );
tlThree.add( TweenMax.to(".layer-twentyFour", 0.5, {top:0}) );
tlThree.add( TweenMax.to(".layer-twentyFive", 0.5, {left:0}) );
tlThree.add( TweenMax.to('.detail[data-title="cleanEnergy"]', 0.5, {alpha:1}) );
tlThree.add( TweenMax.to('.up[data-dest="greenHouse"]', 0.5, {delay:0.2, display:"block", alpha:1}) );
tlThree.add( TweenMax.to('.down[data-dest="greenPlanet"]', 0.5, {delay:0.2, display:"block", alpha:1}) );

var tlFour = new TimelineMax();

tlFour.pause();
      
tlFour.call(night, 0);
tlFour.add( TweenMax.to(".layer-twentySix", 0.5, {alpha:1}) );
tlFour.add( TweenMax.to(".layer-twentySeven", 0.5, {top:0}) );
tlFour.add( TweenMax.to(".layer-twentyEight", 0.5, {left:0}) );
tlFour.add( TweenMax.to(".layer-twentyNine", 0.5, {top:0}) );
tlFour.add( TweenMax.to(".layer-thirty", 0.5, {left:0}) );
tlFour.add( TweenMax.to(".layer-thirtyOne, .layer-thirtyTwo", 0.5, {left:0}) );
tlFour.add( TweenMax.to(".layer-thirtyThree", 0.5, {top:0}) );
tlFour.add( TweenMax.to('.detail[data-title="greenPlanet"]', 0.5, {alpha:1}) );
tlFour.add( TweenMax.to('.up[data-dest="cleanEnergy"]', 0.5, {delay:0.2, display:"block", alpha:1}) );
tlFour.add( TweenMax.to(".review", 0.5, {delay:0.2, display:"block", alpha:1}) );

Please note that tlFour.call(night, 0); is for the time that tlFour timeline plays as a result of another click and I would like to reverse that but as the timeline reverse method does not reverse calling functions I had to call the day() function to reverse that but the problem is that this function executes after tlThree is played completely but I want it to be called just before that, any other Ideas on how to write this code in a better way is also appreciated because I am new to GSAP, Thank you

 

 

PS: for tlFour the night() function is called just before the timeline begins to play and that is fine but for tlThree this is not happening and that is the problem.

 

[Diaco 1,948 Likes (Superhero)]

Hi farhoudz 

 

try this for your calling  :

$('.up').click(function() {
tlFour.reverse().eventCallback("onReverseComplete", function(){ day(); tlThree.play(); });
});

but i think in your case ,this's better solution for you :

var tl = new TimelineMax();

tl.call(DN, 0)
  .to(".red",3,{x:200}) 

tl.reverse();

$('.red').click(function() { 
tl.reversed() ? tl.play() : tl.reverse();
});

function DN(){
 if ( tl.reversed() ){
    console.log("day")
    $('section').removeClass('night').addClass('day');
 } else {
    console.log("night")
    $('section').removeClass('day').addClass('night');
 }
}

See the Pen ByNMjy by MAW (@MAW) on CodePen

[farhoudz 8 Likes (Newbie)]

Thank you Diaco you are a life saver

[farhoudz 8 Likes (Newbie)]

Diaco.AW Could you please tell me if there is any way to reverse a timeline in a different way compare to when it plays for example in my case above, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline for the scene change ?

 

Thanks in advance