CSS' will-change property for performance boost

[Dushyant1295]

Can we use CSS' will-change property for the Performance boosts for inview translating section ?

<section
  data-scroll-section=""
  data-scroll-section-id="section1"
  data-scroll-section-inview=""
  style="
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -775, 0, 1);
    opacity: 1; pointer-events: all;">

</section>

// css

[data-scroll-section] {
  will-change: auto;
}
[data-scroll-section-inview] {
  will-change: transform, opacity;
}

but MDN says use it sparingly, not sure what's the best approach

@Jerek0 @xavierfoucrier

[xavierfoucrier]

Hello @Dushyant1295,

The will-change property has to be used sparingly, YES.

If your element is already using transform: matrix3d, it will enable a 3d layer in the browser that will compute the transformation with the GPU instead of the CPU. So basically enough to get a smooth rendering.

From the MDN doc:

The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.

As you may know, locomotive scroll transform the whole page content. Because of that - and expensive work - this can lead to a degraded user experience when scrolling, especially if your page content is big, with many scroll animations. From my experience, it's better to prevent using this property, since today, all (modern) browsers are optimized to use the GPU when it's needed.

Hope I answered your question :wink:

Feel free to close the issue if it's the case.

[Dushyant1295]

@xavierfoucrier thanks
Agree and understand