React-spring: Is there a way to global disable transitions?

[igorcouto]

🤓 Question

We are using cypress to ui testing are facing problems with headless browser & animations. Is there a way to global disable so we can add a parameter to our build?

Thank you.

[drcmda]

not yet but we could maybe add a global for this, you'd then do

import { Globals, useSpring, animated, etc } from 'react-spring'
Globals.assign({ config: { immediate: true } })

This could then override all configs systemwide. I still don't know 100% if this would work ootb, if there's any requestAnimationFrame in there it would still be a frame late i guess. But we could try ...

[dominiczaq]

Hey, I have similar problem when unit testing with 'react-testing-library'

I've created codesandbox which presents my question: https://codesandbox.io/embed/reactspring-unmount-component-after-transition-ends-1n5nf
When you inspect the element in devtools you can see that after clicking on the image the component transition from opacity 1 to 0 and then unmounts.

I've added test (App.test.js) with react-testing-library. The final step of the test is failing.

expect(getByTestId('image')).not.toBeInTheDocument()

In the stacktrace you can see that component has opacity = 0 but it stays mounted.

expect(element).not.toBeInTheDocument()

{"location": null} contains: <div class="bg" data-testid="image" style="opacity: 0; background-image: url(https://images.unsplash.com/photo-1544511916-0148ccdeb877?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1901&q=80i&auto=format&fit=crop);" />

How can I go about testing this?

[danielhusar]

+1 to globally disabling animatons.
This will make also usage with services such as percy that do visual testing much easier.
(we currently disable all css animations, but disabling react-spring animations is not possible)
@drcmda Would you accept PR based on the proposal you have?

[aleclarson]

@danielhusar It's already implemented for v9 in #670 (along with other API changes)

[ygorlf]

Awesome @aleclarson, is there a roadmap to publish this version on npm?
really interested in use the Global disable...

[aleclarson]

@ygorlf I'm facing a few setbacks with #687 or it would be released already! 😅

[ygorlf]

No worries, I'll keep tracking the status here, thank you so much ;)

[aleclarson]

Fixed in v9.0.0-beta.9

import { Globals } from 'react-spring'

Globals.assign({
  skipAnimation: true,
})

When true, all animations jump to their end values instantly. No requestAnimationFrame calls either.

[danieltott]

If anyone is landing here from google, currently enabling skipAnimation breaks useTransition in the beta (version 9.0.0-beta.34). It's unclear if it is resolved in canary - I wasn't able to get it working and unfortunately don't have any more time to dig in right now so I had to revert to version 8 ¯_(ツ)_/¯

Just thought I would try to help anyone coming across this.