feat(svg): animation alternative

[danilowoz]

This introduces a new approach to animate SVG gradients and work around the new chromium limitation.

BREAKING CHANGE: The keyTimes, gradientTransform and animateBegin options have been removed.

Preview: https://kn8w9s-6006.csb.app/?path=/story/react-content-loader--animate Close https://github.com/danilowoz/react-content-loader/issues/316

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[codesandbox-staging[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[amoshydra]

Tested in Safari 17.3, the linear gradient does not animate.

In Chrome 122.0.6261.94, this works reasonably well, if not identical. Edit: This also works reasonably well in Firefox 122

[tienifr]

Thanks @danilowoz for the PR

This is working well for me in:

• Chrome 122.0.6261.112 (Official Build) (arm64)
• Chrome 122.0.6261.64 on Android
• Firefox 123.0.1 (on Mac)
• Microsoft Edge Version 122.0.2365.63 (on Mac)

But it's not animating in:

• Safari Version 17.2.1 (19617.1.17.11.12) on Mac
• Safari on iOS 17.3.1

[tienifr]

@danilowoz According to https://stackoverflow.com/a/59932642, using animateTransform won't work for IE and Safari.

I think we can detect IE, Safari by userAgent and use animate for those browsers, that way, we can make sure it works well in all browsers. I'd be happy to contribute the changes for this if you feel that's the direction we can go with 👍

There's a proven, battle-tested way to check for Safari browser (both mobile and desktop) here

[amoshydra]

EDIT: my message below is incorrect

---

@tienifr instead of user agent detection, we should be able to check for support of gradientTransform like this:

const linearGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
console.log(linearGradient.gradientTransform); // return --u-n-d-e-f-i-n-e-d-- on unsupported browser

const canSupportGradientTransform = !!linearGradient.gradientTransform;

Browser	ReturnValue
Chrome 122	SVGAnimatedTransformList
Firefox 122	SVGAnimatedTransformList
Safari 17.3	undefined ++SVGAnimatedTransformList*

^ I am not able to test for IE for now.

[amoshydra]

oops! What I've mentioned above is incorrect.

Safari also return SVGAnimatedTransformList. the detection approach above doesn't work.

[danilowoz]

I don't want to rely on the userAgent property because then this component would be client-only. I'm looking for a one-fit-all solution, but I'm running out of ideas :(

[danilowoz]

Maybe we can go for the animateTransform approach:

• Safari will support it soon - it's currently in the preview step;
• Internet Explorer, well, it's a deprecated browser;

https://caniuse.com/?search=animateTransform

[tienifr]

Safari will support it soon - it's currently in the preview step;

@danilowoz I think there're certain applications that would need to work well on Safari now.

How about adding an optional useLegacyAnimate prop that will allow using the animate (as currently) instead of animateTransform. Any applications that want to support Safari now will pass useLegacyAnimate as true if they detect the Safari browser. So the logic of detecting browser will reside in the users of the library and not the library itself.

Later once Safari adds support for animateTransform, we can deprecate the useLegacyAnimate prop.

This change will be straight-forward to make and will allow react-content-loader to work on all platforms 👍

[abzokhattab]

Found this article where in the accepted answer the author was able to make the animateTransform work with safari and chrome

[danilowoz]

Ok, I got it running on Safari. Turns out, the linearGradient element requires an initial gradientTransform value to trigger the animation. Plus, I misread the caniuse.com/?search=animateTransform table, and actually, Safari fully supports animateTransform already, so we're good to go.

Considering deprecating the following props:

• keyTimes: I can't see how to support it in this new approach, and to be honest, I have never understood how it works. Anyway this library belongs not only to me, but also to the community.
• gradientTransform: that's a shame, but I couldn't make it work. This is used to allow for changing the gradient orientation and the animation direction.

Another round of review? I try fixing tests meanwhile.

[abzokhattab]

Tried Chrome, Firefox, and Safari, and they all work as expected. Great job @danilowoz

[Roeefl]

@danilowoz

feat(svg): animation alternative #317

+14,239 −64,905 

You crazy bro? 🥲 this is a full blown repo refactor XD

[danilowoz]

The output in NPM will be the same

[Roeefl]

My bad. Just saw a bunch of files, where I was expecting mostly 1 file changed.

Nicely done, great job & thanks for the quick response.

[tienifr]

@danilowoz Works well for me in all browsers too, thanks!!

[danilowoz]

All tests and build passed! I'm going to publish a new major version soon

[github-actions[bot]]

:tada: This PR is included in version 7.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: