Documentation for @twilio-paste/animation-library

[bvsillorequez]

Is there documentation for @twilio-paste/animation-library? I looked on paste but didn't see anything referring to the animation library.

I am trying to implement a slide animation using the animation-library per this discussion #1660 and from what I'm assuming, is that I need to use the react-spring documentation.

[bvsillorequez]

Also, how does animated work with paste components?

[richbachman]

Hi @bvsillorequez

You're right, we currently don't have any documentation for the animation library on our docs site. Go ahead and use the react-sprint documentation: https://react-spring.io.

For animated, take a look at how we're using using it in Modal: https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/modal/src/Modal.tsx#L11.

Let us know if that helps.

[bvsillorequez]

Thanks. I was able to follow most of that and I have a working animation. I am having trouble with testing in jest. Do you know how to test in jest so that the animation completes before making assertions? I am getting this complaint TestingLibraryElementError: Found multiple elements by: and I think its because the test sees the element twice, during the animation and on completion.

[richbachman]

It looks like we've ran across a similar issue before, and unfortunately haven't had much luck in coming up with a solution. Take a look at this discussion and a team members question on the react-spring repo. Let me know if you feel like thats inline with what you're running across. If not, is it possible see a code example?

[SiTaggart]

There is a prop on Theme.Provider called disableAnimations. You can set it to true, but I suspect it will only disable to transitions.

Give it a shot, see if it helps.

I will say though that seeing multiple elements with TestingLibrary might also just be multiple renders of the previous tests in the same document. I've seen that before, and you just need to make sure your tests are rendering and tearing down correctly.