Jump to content
Search Community

Callback function in middle of timeline?

Vincentccw 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

Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation?
I want to call the displayContent() after the height=0 animation is called, how should I do that?
 
var $outerBox = $selectedTab.parent('.standard-width');

var animate = new TimelineLite({
             paused:true
            //onComplete:myFunction,
           //onCompleteParams:["param1"]
 });


animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut})
 .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn})

animate.play();

function displayContent(){
    $selectedTab.css({display:'block'});// display selected tab
}

 

Link to comment
Share on other sites

  • Solution

Hi :)

 

you can use .add() to insert your functions every where in timelines : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

 

like this :

var tl = new TimelineLite()

tl.to("#redBox", 1, {x:550})
  .add( function(){ console.log( tl.progress() ) } )
  .to("#blueBox", 1, {x:550})
  .add( info , tl.duration()/3 );

function info(){  console.log( tl.progress() ) };

and pls check this blog post : Understanding the Position Parameter

  • Like 5
Link to comment
Share on other sites

  • 1 year later...

I can't seem to get mine to work. Here's my code:

 

(Note: I have other buttons not shown in code that play the timeline after every scene.)

var tl = new TimelineMax({paused:true});
	
tl.add("scene01")
        .from(".bg1", .5, {left:"+=10%", autoAlpha:0}, "scene01")
        .add(insertBG("01.png",".testcard"), "scene01")
     .add("scene02").addPause()
       .to(".bg1", .5, {autoAlpha:0}, "scene02")
       .from(".bg2", .5, {left:"+=10%", autoAlpha:0}, "scene02");

function insertBG(bgName, cardName) {
     $(cardName).css('background-image', 'url(images/'+ bgName +')');	
}

It throws the following error at the .add(insertBG()) call :

 

"Cannot add undefined into the timeline; it is not a tween, timeline, function, or string."

 

The insertBG()  function works fine when called directly outside the timeline... What am I doing wrong? Thanks!

Link to comment
Share on other sites

Hi reubenlara :)

 

Welcome to the GreenSock forum.

 

You can add a function using the add() method, but it doesn't take parameters. Please use the call() method like this:

// change this
.add(insertBG("01.png",".testcard"), "scene01")

// to this
.call(insertBG, ["01.png",".testcard"], this, "scene01")

That should get you working correctly. Here's some more info about call()

 

https://greensock.com/docs/#/HTML5/Animation/TimelineMax/call/

 

If you have other questions, it's usually best to start a new topic. When you post on the end of a thread that is marked answered your question could get overlooked and we want to get you the best answers possible.

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
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...