Jump to content
Search Community

Class based render - gsap.ticker

Parrot Puppet test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hey GSAP!

Is there a benefit to rendering a gsap animation with the ticker compared to 'requestAnimationFrame()', my thought would be that the objects in the scene would render on the same wave as gsap.

When I try to use the ticker instead of 'requestAnimationFrame()' I am unable to access the constructor of the class.

Let me know your thoughts, thanks!

        //this.animate();
        gsap.ticker.fps(60);
        gsap.ticker.add(this.animate);
    }

    animate() {

        //const game = this;
        //requestAnimationFrame(function () { game.animate(); });


        this.renderer.render(this.scene, this.camera);
    }

 

See the Pen poEyeMw by John_Joe_Parrott (@John_Joe_Parrott) on CodePen

Link to comment
Share on other sites

  • Solution

Yep, using the ticker ensures that your render call is made after GSAP does its updates, though in practical reality as long as you add your requestAnimtionFrame handler after GSAP has been loaded and started, you'll typically get the same result. 

 

The issue in your code is simply a scope thing. In other words, "this" isn't what you think it is inside your function. There are two simple solutions you can choose from: 

  1. Use bind()
    gsap.ticker.add(this.yourFunction.bind(this));

     

  2. Wrap it in a function that maintains the scope: 
    gsap.ticker.add(() => this.yourFunction());

     

Does that clear things up? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

It looks like you edited your post, @jparrott, so maybe you already figured this out but you said: 

Quote

 

when I updated the ticker to bind the scope it is lagging in comparison to not using the ticker


class Viewport {
    constructor() {
    
        // RENDER LOOP
        gsap.ticker.add(() => this.animate);
    }

    animate() {
        this.renderer.render(this.scene, this.camera);
    }
}

 

 

 

That's because in your constructor you're setting things up to wait 1 tick before calling the animate() method (where you do the render). You can solve that by calling animate() directly there too. 👍

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