Use translate3d() by default for automatic interpolation of translations in order to utilize hardware acceleration.

[ghost]

🚀 Feature Proposal

When creating a spring that interpolates transition properties of type translateX(), translateY(), and/or translateZ(), react-spring should automatically convert these properties to translate3d(tx, ty, tz) as this forces the browser to utilize hardware acceleration, which produces a noticeable impact on animation performance.

Motivation

CPU animation can be quite choppy at times. Hardware acceleration animation can provide a noticeable improvement, so why not make it the default behavior?

Example

// The spring:

const spring = useSpring({
    from: { transform: "translateX(0px)" },
    transform: "translateX(500px)" 
});

// Current behavior:

<div style="transform: translateX(<!--animated values goes here-->)"></div>

// Desired behavior. Notice how translateX() was automatically converted to translate3d().

<div style="transform: translate3d(<!--animated values goes here-->)" /></div>

[aleclarson]

With v9, you can pass transform props directly to the style prop of any animated element.

More info here: #782

[ghost]

Sweet