Jump to content
Search Community

Using Gsap3 with WebXR

Marko82 test
Moderator Tag

Recommended Posts

Hi Everyone,


I have been working on the project involving WebXR, using ThreeJs and Gsap 3. And I have notice that when you initialize webXR session (clicking on 'Enter VR' button) update of Gsap's timelines just stops.  They mention in How to create VR content on ThreeJs' website that you need to call setAnimationLoop() from their renderer and to pass callback and that you can't use window.requestAnimationFrame() function (I need to investigate this topic more).

The problem was solved calling gsap.ticker.tick() from the callback function. For testing, I have added listener to gsap.ticker and it was working fine when webXR session is not initialized.

Is there a better method to update gsap timelines, and am I missing something?

I used Oculus Quest for headset and Oculus Browser which is based on Chromium.

Link to comment
Share on other sites

Hey Marko and welcome to the GreenSock forums! Thanks a lot for being a Business Green member, we couldn't do what we do without people like you.


Can you please create a minimal example that produces this error? We'd like to figure out exactly what's going on and if we can do anything to get around it. 

Link to comment
Share on other sites

  • 1 year later...

I currently have the same problem, when I enter the VR immersion, the timelines stop and when I exit the VR immersion to the internal browser of the Quest these timelines continue playing, this does not happen if it is entered from the Firefox browser for quest. happens in quest one and two.

look this videos:(Quest Broswer) https://youtu.be/Ajrj8TnF-mg  (Filezilla Virtual Firefox) https://youtu.be/_asBfxb9xDk

Link to comment
Share on other sites

You can test the page at the following link: https://storage.googleapis.com/webaframe/index.html


here I call the library



these lines move the totems up



I had not noticed the error until today, I had been working with a htc ViVe, until they noticed the error, today I got the Quest to debug, but I don't know very well how to do it, I'm working on it

Link to comment
Share on other sites

So sync gsap.ticker with aframe tick
            AFRAME.registerComponent('fps30component', {
              init: function () {
                this.tick = AFRAME.utils.throttleTick(this.tick30this);
              tick: function (timedelta) {
<a-scene fps30component>
  • Like 1
Link to comment
Share on other sites

  • 6 months later...
  • 2 years later...

I bumped into this post because I wanted to make sure gsap works in immersive mode with WebXR. Because the browser cancels any rAF and uses it's own vr session raF. 


Is it compatible?

Link to comment
Share on other sites



If you add this to your app file:

useGSAP(() => {
  console.log("current GSAP frame", gsap.ticker.frame);
  setTimeout(() => console.log("current GSAP frame", gsap.ticker.frame), 100);

You'll see that both logs are more than zero, that means that the GSAP Ticker is actually running, which means you could use GSAP in this particular project.


If you have a specific GSAP related issue, remember to include your GSAP specific code.


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

It would be super helpful if you could just create the most minimal, basic demo in Stackblitz that illustrates the issue. The link you provided has a lot of different files and it isn't at all clear (to me at least) what you're asking, which file you're talking about, how to reproduce the problem, etc. 


I noticed that you've got duration: 500 on an animation and I wonder if you thought that durations were in milliseconds (they're in seconds), so perhaps you meant duration: 0.5?

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