tweenMax update in render RequestAnimationFrame

[Anaximandro]

Hello everybody,
first congratulations for the library look amazing.
I'm new with this be patient.
I 'm working with threejs (basic level) but I want use your functionalities of tweenMax and TimelineLite.
With tween.js you can make this :
 

function render(time){

  requestAnimationFrame();
  TWEEN.update(time);

}

Is it possible to do the same with tweenMax?
I need update TweenMax with render.

Sorry for my english.

[GreenSock]

Welcome to the forums, @Anaximandro. 

 

GSAP is already based on requestAnimationFrame, so there's nothing extra you need to do. Are you just asking how to call your own function after GSAP does all of its updates? If so, see https://greensock.com/docs/TweenLite/static.ticker

 

Otherwise, please describe what your goal is so that we can better help you. 

 

If your goal is to control the playhead position on your animations, there are a bunch of easy ways to do this. The most common is probably setting the progress() method of a timeline or tween. Or you can set the time() or totalTime(). 

 

Happy tweening!

[Anaximandro]

Ok thanks.
I would like the time of the tweens are based in loop render because I use ccapture.js ( A library to capture canvas-based animations at a fixed framerate) and this library record by render loop.
I check static.ticker to know how work

[GreenSock]

GSAP doesn't really let you set the time of the ticker itself, but you could definitely just put all your animations into a master timeline and then control that playhead to do your rendering. I'd highly recommend reading this article about how to build your animations in a modular fashion: 

https://css-tricks.com/writing-smarter-animation-code/

 

Enjoy!

[Anaximandro]

Hello Jack,

thanks for the answers.
I read about tick and I have created one

See the Pen vMqEYe by korbentDallas (@korbentDallas) on CodePen

following  your opinion of master timeline.

All animations are in master timeline. I configure two buttons with 'Record' and 'Save'. The problem is time to renderer.
I believe understand you can create one event each tick but I would like to do upside down. Call tick from render
When you try to create a video the time animation is wrong.

What would be the steps to follow to control playhead ?

Sorry for my english...

 

[GreenSock]

Sorry, I don't really understand your question. 

 

You can call timeline.time(YOUR_TIME_HERE) to control exactly what time you want it to render at immediately. Like, maybe call that and then do your render? 

[Anaximandro]

Don't worry is for my english. I try to explain it.

I want to synchronize tweenMax( internal clock gsap) with render.
First, I want to call render() , second call requestanimationframe(render) and third call tweenMax into the render.

[Dipscom]

It does sounds like Jack's suggestion of using the timeline.time(YOUR_TIME_HERE) is the way to go as you said you already have the time elapsed and wants the other library to handle the calls to the requestAnimation frame.

 

Something along the lines:

 

function render(time) {
  timleline.time(time);
  requestAnimationFrame(render);
}

 

Make sure you have your timeline paused from the start and it should be fine.

 

Also, I prefer to schedule the call to requestAnimationFrame at the end of the block to make sure all the logic is complete prior to potentially calling it all again.

[Anaximandro]

Hi Dipscom,
I had done the test that Jack's suggestion without stop time line.
Now I have done the same but not working, you can see in the previous codepen
 

var main = new TimelineMax();
main.pause();
main.add( lineOne )
    .add( lineTwo )
    .add( lineThree );

   function render(time){
       main.time(time)
       requestAnimationFrame( render );
       stats.update();
       renderer.render(scene, camera);
       if( capturer ) capturer.capture( renderer.domElement )
      
   }

 

[Dipscom]

Well, you're not really doing what you say you want to do.

 

You said you were calling a render() method passing a 'time' parameter and you said the capture library you were using is the one running on each render loop (which I believe it is the requestAnimationFrame call) but your code does not not reflect that.

 

Currently your code break because you are calling your main timeline and passing it a 'time' variable but the 'time' variable does not exist.

 

function render(time){ // Where is this time meant to come from?
  /*
  	When you call render() at the bottom of your code, this time is undefined,
  	which causes the main.time(time) bellow to fail but does not crash the application
  */
  main.time(time)
  /*
  	Then, here you are scheduling a new call to the render() function.
    Again, you are not passing any time variable to the callback, thus, nothing will work.
  */
  requestAnimationFrame( render );
  stats.update();
  renderer.render(scene, camera);
  if( capturer ) capturer.capture( renderer.domElement )
      
}

 

In reality what you want to do is use GSAP's ticker and call your render function from there as Jack initially suggested.

 

It would be something like:

 

TweenLite.ticker.addEventListener("tick", render);

function render(){
  stats.update();
  renderer.render(scene, camera);
  if( capturer ) capturer.capture( renderer.domElement );    
}

 

[Anaximandro]

ok thanks for explanation!!

If you put (console.log(time)) in render time exists and has value.

I tried your suggestion but frames per second are crazy.

I will try to understand this good.

[Dipscom]

I don't think what you looking at is a timestamp but it is just an integer that is used to identify the requestAnimationFrame. See the link: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Return_value

[davidlochhead.xyz]

Just a note to say this thread helped me hook up GSAP with CCapture. Thanks.