Animation Run fast on 144hz

[hichay]

I take this Fishing Game (codepen.io) and test. it have 2 diffirent animation. when i use the 60hz screen it slow as normal. but when using with the 144hz it run really fast. So i just wanna to ask anyway to fix it?

See the Pen ymzNOO by MarioD (@MarioD) on CodePen

[GreenSock]

Yes, that's because of the way you've set things up (completely unrelated to GSAP) - you're using a requestAnimationFrame() loop and each time that gets called, you're adding values and drawing accordingly. So the if requestAnimationFrame() gets called twice as frequently, your animation goes twice as fast. 

 

That's why GSAP doesn't do things like that - it's time-based, not tick-based. 

 

I'd recommend using GSAP instead of your requestAnimationFrame() loop or add logic in there to base things on time instead. These forums are for GSAP-specific questions, though - it's beyond the scope of help we can provide to rework your project for you with the logic issues. 

 

Good luck!

[hichay]

1 hour ago, GreenSock said:

Yes, that's because of the way you've set things up (completely unrelated to GSAP) - you're using a requestAnimationFrame() loop and each time that gets called, you're adding values and drawing accordingly. So the if requestAnimationFrame() gets called twice as frequently, your animation goes twice as fast. 

 

That's why GSAP doesn't do things like that - it's time-based, not tick-based. 

 

I'd recommend using GSAP instead of your requestAnimationFrame() loop or add logic in there to base things on time instead. These forums are for GSAP-specific questions, though - it's beyond the scope of help we can provide to rework your project for you with the logic issues. 

 

Good luck!

Thank for you answer. So if i use the GSAP to replace the requestAnimationFrame(). what function should i replace to it. this is not my project im just take it and using it on my minigame. but as i know this project using the https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

[GreenSock]

That's a VERY old version of GSAP. I'd strongly recommend updating to the latest, 3.10.4. There's no more need for TweenMax, TweenLite, TimelineMax, or TimelineLite - they've been condensed into a simple "gsap" object. See:

 

 

It's not a simple "swap this one line in and magically all your animations will be driven by GSAP..." - you need to fundamentally rewire the structure of things so that it's not tick-based. We can't do that work for you for free, but I was trying to share the basic idea to get you moving in the right direction. 

 

With GSAP, you set up tweens and they'll run at the same speed no matter what the frame rate is. But it's a different way of thinking than "add 10px every tick to this property..." 

 

If you still need some help, you can either post in the "Jobs & Freelance" forum, or contact us about paid consulting services. 

 

Good luck!