Vue 2 problem with duration

[gargara1]

I am using GSAP in laravel - vue 2 application, but my tweens speed is slower than the duration I set. I suppose it has to be something with frame rate. This is throughout the whole application. I use "gsap": "^3.10.4", please if anyone else experienced similar problem to let me know if there is a way to fix it. This is a simple example of how I use it:

                const tween = gsap.to(this.$refs.userMenu, {
                    height: "210px",
                    duration: 0.2,
                });
                tween.play();
                console.log(tween);

Although the duration is set to 0.2 and is correctly applied to the tween it takes around a second for the tween to finish.  Any suggestions will be greatly appreciated.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

 

Are you absolutely and positively sure that the GSAP instance starts at some point and ends beyond it's duration? I've been using GSAP for 11 years and never seen the core engine of GSAP make a tween longer than it's duration. 99% of the time (for not saying 100%) this has to do with other factors bogging the CPU and creating delays because of it.

 

You should review your setup (perhaps Laravel is taking a bit longer to load everything, if you are using it for the front end in combination with Vue. If you are using just Vue for the front end and Laravel as an API maybe a response is taking too long) and see if there is something creating a delay or clogging the CPU.

 

I suggest you to take a look at GSAP's ticker lag smoothing and the lazy configuration in order to apply them globally or directly on your tween.

 

Lazy

When a tween renders for the very first time and reads its starting values, GSAP will try to delay writing of values until the very end of the current "tick" which can improve performance because it avoids the read/write/read/write layout thrashing that browsers dislike. To disable lazy rendering for a particular tween, set lazy: false. In most cases, there's no need to set lazy. To learn more, watch this video. Default: true (except for zero-duration tweens).

https://greensock.com/docs/v3/GSAP/Tween/vars

 

Lag Smoothing (scroll to the middle of the page):

https://greensock.com/docs/v3/GSAP/gsap.ticker

 

You can check the duration of the GSAP instance by running something like this:

let startTime;
const tween = gsap.to(this.$refs.userMenu, {
  height: "210px",
  duration: 0.2,
  onStart: () => startTime = Date.now(),
  onComplete: () => {
    console.log("Time Elapsed:", startTime -  Date.now());
  },
});

The duration should be close to 200 there (it'll never be exactly 200 since takes some time to calculate and log those, but it should be off by no more than 5 ms. The GSAP instance should last 0.2 seconds though since internally GSAP tracks the time to be very precise.

 

Finally is worth mentioning that you are animating the height of an element and is important to know what effect that has on the layout and how it affects the CPU as I mentioned before.

 

Happy Tweening!

[GreenSock]

Yeah, like @Rodrigo said, this sounds very suspicious to me. The only reason this could happen (aside from something else in your code causing the problem, like accidentally setting the timeScale to 0.2) is if you create the tween and then within the next 0.2 seconds, there's a HUGE amount of JavaScript you're executing (or something else on the main thread) that's causing everything to come to a complete stop while the CPU is busy, and then a second later, it finally frees up and processes things again (at which point the tween finishes). 

 

It's super difficult to troubleshoot blind, though. If you still need help, please provide a minimal demo that clearly shows the problem and we'll take a peek. 

[gargara1]

Hello guys, thank you so much for the answers and the help provided. Anyhow in my case there were no codepen that can help with the problem. I found out what is causing this problems with the tweens in the application. It turns out that I have classes on parents div's that has transitions added to their styles. These transitions got forwarded to child elements and messed up with the gsap tweens. For example set method results into animation. I have not found anyone else experiencing similar problems, so I hope this will help someone else who may be facing such troubles.