Hacker News new | ask | show | jobs
by cehrlich 1291 days ago
I use Framer on some projects and I love its declarative approach to creating nice animations. It allows someone like me who doesn't know much about the topic to create really nice experiences.

But one thing that has been confusing me is its performance. The same simple animation might be smooth 60fps 9 times out of 10, but chug significantly the 10th time, on the same device etc. Any advice on how to profile this?

1 comments

I would start with the Performance tab in Chrome. Or if you're on a mobile device double checking you're not in low-powered mode, where animations are throttled to 30fps.

Would love to hear what you find!

I've recently had a similar problem making a game with javascript. I stated making it render with plain dom elements and transforms because it was simpler, however I noticed that sometimes it stuttered.

After looking at performance tab it turned out that dom modifications trigger uBlock to run it's internal checker(presumably to check in case you are adding some ads onto the page). It's not a problem in a normal circumstances, but when you are updating dom 10+ times a second it sometimes chugs. Rewrote rendering to use canvas and the problem went away.

Might me something similar here.