Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A question from a newbie

See original GitHub issue

Hi Anime team,

I am a new person here, I heard about this library when I saw a random Youtube video’s title yesterday. I come to the official website and the demo looks interesting. I am considering using this library for my personal portfolio website as currently I am trying to find a way to optimize my animation. My website has some animation and it sometimes feels laggy, especially the grid system with a bunch of cells (when a cell gets touched, it will create a wave from that cell and the wave will travel to the rest of the cells in that grid). Currently, after reducing the number of cells in the grid system and even trying to use will-change for the background-color property, things don’t look so smooth though, especially on mobile devices.

So my question is: besides the API you guys write in order to create animation in an easy way, are there any secret sauces (some kind of low-level optimizations) to the library for performance optimization? I think using this library will definitely help to create animation easily but I also need some good optimization too, and if you guys do have some “secret sauces” in it, I am very happy to learn more about this library.

Thank you and look forward to your reply 😁

I also attached a short video about my personal website for your reference (in person, it will feel a bit smoother because of the screen recorder).

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

NguyenfromVNcommented, Oct 21, 2022

after careful testing, my final solution is to use setInterval to manually control the fps, and it works great though. I “lock” the fps at 20, so if the browser is willing to offer more resources to achieve a higher fps, it will never can to that, and thus other parts of the site can spend those resources freely and lag is no longer a thing on my site, on both PC and mobiles devices 😋 20fps fits my need when it is the sweet point between UX and the machine’s resources (24fps can also run well, but the difference in smoothness is super small, and by reducing 4fps, the other parts of the site can run even smoother)

so my conclusion:

  • try CSS animation first
  • if you need more control, use JS animation (requestAnimationFrame)
  • if you want more performance, try to limit your fps by using setInterval (requestAnimationFrame can also work as we have t param to know about the timing, thus we can limit the fps)

anyway, thanks a lot for the support 👌

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I ask better "newbie" questions in a language I'm ...
Why is the stress on a body not a vector? What are these plastic rods and crimps under my couch cushion and can...
Read more >
How are newbie questions tolerated here?
Checklist: Read the site rules and the guidelines for how to ask a question. Understand that this is not a typical internet forum....
Read more >
What are some questions newbies on Quora should answer in ...
There are no specific questions or topics a newbie should ask. The best advice I can offer is that you follow a wide...
Read more >
Office Newbie: 8 Questions You Should Ask On Your First Day
Office Newbie: 8 Questions You Should Ask On Your First Day · 1) What are the 10 things that you would like me...
Read more >
A newbie question - phylobabble
A newbie question. Offcourse. Would it be possible for an admin to prompt everytime (not force) a customized alert box when a certain...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found