Jump to content
Search Community

Calling a function just before a timeline starts to play

farhoudz test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.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.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.


Link to comment
Share on other sites

  • Solution

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)


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

function DN(){
 if ( tl.reversed() ){
 } else {

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...