Jump to content
Search Community

Binding functions to timeline

SimpleEmotion test
Moderator Tag

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

Is there anyway to bind a function to a tweenline that will be called successively over a period of time.

 

I am aware of the `.add(function(){..dostuff..})` syntax, but unfortunately this only calls the function once. 

 

Something like this would suffice:

myTimeline.bind(1.5, function(e){ something = dostuff(e)}, "-=.5")
Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums.

 

There are two possible solutions for that.

 

The first one is to create a setInterval and stop it when you want in your timeline.

 

Another option is to create a delayedCall() instance that repeats itself. The advantage of this is that delayed calls have the same mechanisms of any other GSAP instance, such as pause(), play(), restart(), etc. So like this you can control at which point of your timeline you want the delayed call to start and when you want to stop it.

var tl = new TimelineLite(),
    myCall = TweenLite.delayedCall(1.5, myFunction).paused(true);

// at this point the delayed call is paused

function myFunction(){
  // do stuff

  // finally restart the delayed call
  myCall.restart(true);
}

// then add it to the timeline

tl
  // a bunch of tweens
  // start the delayed call
  .call(function(){myCall.play();})
  // more tweens
  // then stop the delayed call
  .call(function(){miCall.pause();});
  • Like 2
Link to comment
Share on other sites

If I understood your question correctly, Rodrigo's solution sounds solid and you could also consider using an onRepeat callback in a repeating TweenMax, like:

TweenMax.to({}, 1, {repeat:20, onRepeat:yourFunction}); //calls yourFunction 20 times, 1 second between each call. 

You're welcome to dump that into a timeline if you want too. 

  • Like 1
Link to comment
Share on other sites

Correct me if I am wrong. But doesn't TweenLite do some optimizing by batching all dom interactions to a single requestAnimationFrame Update?

 

The goal in binding a function to a Tweenline would be to gain the performance optimization of a signally wrapped function bound to requestAnimationFrame.

 

If this is not currently a part of the Tweenline API I assume the next best option would be:

var timeline = new TimeLine()
.to(...)
.add(tweenStuff, "-=.5")
.from(...)



function tweenStuff(){

var progress = timeline.progress();

..dostuff..

window.requestAnimationFrame(tweenStuff)

}
Link to comment
Share on other sites

Hi SimpleEmotion  :)

 

how about this : 

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

var tl = new TimelineLite()

tl.to('.red',1,{x:200})
  .add(function(){TweenLite.ticker.addEventListener("tick", myFn)})
  .add(function(){TweenLite.ticker.removeEventListener("tick", myFn)},'+=2')
  .to('.red',1,{x:0});

function myFn(){ console.log("run") };

pls check TweenLite.ticker Doc. : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/

  • Like 1
Link to comment
Share on other sites

hmm, it sounds like you might be referring to an onUpdate callback.

Notice how onUpdates are applied to both the timeline and a tween in the timeline:

 

var tl = new TimelineLite({onUpdate:timelineUpdate});


tl.to("#redBox", 2, {x:550})
  .to("#blueBox", 2, {x:550, onUpdate:tweenUpdate})


function timelineUpdate() {
  $progress.text(tl.progress().toFixed(2));
}


function tweenUpdate() {
  TweenLite.set(this.target, {rotation:rotation+=4})
}

 

 

http://codepen.io/GreenSock/pen/QbBYeJ

  • Like 1
Link to comment
Share on other sites

To answer your question about requestAnimationFrame, yes, GSAP optimizes everything to run off of a single requestAnimationFrame loop and you can tap into that many different ways (as indicated above in the answers from Rodrigo/Diaco/Carl). I must have misunderstood your original question - I thought you were looking to call a function every XX seconds or something. But if you're trying to call it on every "tick", yes, either add an event listener to the main ticker or use an onUpdate on a tween/timeline. 

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