I have a simple blog that i'm developing using create-react-app (using react-scripts@next to get CSS Modules support).

Repo Demo

The problem i'm having is the CSS hover transitions are very laggy and slow. I previously implemented this interface using Node EJS templates and everything was snappy and fast.

I'm thinking the problem maybe has to do with the PostSummary ponent receiving new props and re-rendering constantly, but all the props appear to be static once they're loaded.

I checked the Chrome performance tab and it said the majority of the cycles were being used by paint time (and not load time).

Very confused, anything I can test to resolve the issue?

I have a simple blog that i'm developing using create-react-app (using react-scripts@next to get CSS Modules support).

Repo Demo

The problem i'm having is the CSS hover transitions are very laggy and slow. I previously implemented this interface using Node EJS templates and everything was snappy and fast.

I'm thinking the problem maybe has to do with the PostSummary ponent receiving new props and re-rendering constantly, but all the props appear to be static once they're loaded.

I checked the Chrome performance tab and it said the majority of the cycles were being used by paint time (and not load time).

Very confused, anything I can test to resolve the issue?

• javascript
• css
• reactjs
• create-react-app
• css-modules

• not sure what do you mean by "CSS hover transitions are very laggy and slow" but it seems fine when i hover over the boxes – Sagiv b.g Commented Aug 11, 2018 at 20:08
• did you try to add the transform scale also from 1 at the transition? – zagzter Commented Aug 11, 2018 at 20:13

2 Answers 2

When you have animations that you know will fire, it's good practice to use the will-change rule, to help the browser be more efficient.

Adding the following rule improves performance in Chrome substantially:

will-change: transform, box-shadow, z-index;

Also, check out this article. It provides AWESOME tricks to help improve the performance and animations on your website.

https://medium./outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

One thing I see is that on hover you're changing the z-index. That has a possibility of slowing things down, so just be mindful when using any of the positioning rules. The transform: translate rules are much more performant than top, left, right, bottom, z-index. Not sure if you can get around using z-index or not with your design, but it's good to keep it in mind anyways.

Animating large images will cause performance issues. The first image in your example is: width: 5264px; height: 3393px;. Optimize the images for web and they should load quicker and animate smoothly.

Consider animating text and pure HTML elements, but try to avoid animating large images.

When you resize an image by transitioning it has to render the image multiple times during the transition and is very "expensive".