Jump to content
GreenSock

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

tweenMax update in render RequestAnimationFrame

Recommended Posts

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.

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 )
      
   }

 

Link to comment
Share on other sites

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 );    
}

 

  • Like 1
Link to comment
Share on other sites

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.

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