Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vincentccw

Callback function in middle of timeline?

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
}

 

Share this post


Link to post
Share on other sites

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 4

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×