Animations in React Spectrum

[tanishqkancharla]

Hello! I'm trying to have animations for Spectrum Views like as they enter/disappear. What is the best way to set up Spectrum components to do this? I know there's animation timing/duration CSS variables in the theming CSS module, but I'm not really sure how to access or use them. Ideally, I want an API where I can define entering View props, exiting View props, and potentially a duration prop. Is there a way I set up something like that?

[snowystinger]

I think you're just looking for https://alligator.io/react/react-transition-group/
The Spectrum components like View aren't really attached to anything in the CSS other than offering some easy access so some Spectrum CSS variables.
Since they are CSS variables though, you can access them from anywhere in CSS as long as you're under the root where they are defined.
A final note on it, Spectrum isn't very big on animations as part of the design system. So you won't find many transitions defined in it.

[tanishqkancharla]

Well (and sorry if this is a dumb question), my problem is like if I wrap a component around the View component:

<Transition in={inProp} timeout={500}>
      <View>
        I am a Spectrum View
      </View>
  </Transition>

then the css is applied correctly to the outer component but as soon as the outer component mounts, the View does not animate in; it just appears, nullifying the point of having the transition component. I'm not sure if react-transition-group exhibits this behavior, but the animation library I am using (Framer motion) does since it renders the container element. That's my problem, and I know there's a few solutions, like using UNSAFE_className and writing CSS to properly transition the View component. I just wanted to see if there's a better way of doing it that was already thought of.

[snowystinger]

So, the reason for UNSAFE on the UNSAFE_className is two fold, it's there to discourage people from customizing components that are meant to be Spectrum defined (think of it as enforcement) and two, we may swap out the internals of a component. UNSAFE_className will always be the outermost dom node, but the internal structure could change, so using it for things like descendent selectors can be dangerous. See https://react-spectrum.adobe.com/react-spectrum/styling.html#escape-hatches
If you aren't working on an Adobe product though, it can help in times like this where your design system has some different requirements but is overall very similar to Spectrum. The Transistion component just handles mounting and swapping classnames, no actual animations, so you may need to write something to translate from it to prefixed with UNSAFE and then write your classes for the animations. You will have access to the Spectrum CSS variables in your classes, so you can choose to have it match certain timings if you wish. Again though, there aren't many in Spectrum DNA.
Last couple thoughts: the link to our guidance on styling shared above, if you can share more about your use case, it may inform our design to include something like this. No guarantees, but can't hurt.
Why are you trying to use View in particular? it really doesn't do anything except provide a container that can only be styled in Spectrum compliant ways.

[tanishqkancharla]

Thank you got all the help and explanation! Sure, I can tell you a little bit more! I'm working on building a frontend for a note-taking app. One of the main ideas is that when you click on a link to another note, it opens up the note on the side of the current note. The note being mounted and dismounted needs to be animated in/out. This use case as a dynamic web app does not seem well represented in Spectrum, like you were saying.

I've made a code sandbox that demonstrates what I'm doing: link

You cans see that I've hardcoded the variants for the css here. The motion itself is being controlled by spring animation through Framer Motion. Like I mentioned before (now it might make more sense with some context), I want an interface where ideally I can specify entrance and exit states for a View, and it'll perform those animations through motion's components. I'm not sure how to go about building this though. I've tried a bunch of things like using Views "customComponent" prop and css variables but everything's failed. I haven't tried react-transition-group, but ideally I want the more spring-like behavior Framer Motion provides.

As to why I'm using a generic View: there's not really anything else that fits this use case I believe. The notes themselves do not contain anything too fancy: just some text content for the most part.

Thanks again for your advice!

[snowystinger]

Great, so the thing I'd add to this is that you could just use a div you don't have to use a View. You can use anything you like. View is just a handy container in Spectrum for Spectrum, it's nothing but a div with style props that understand Spectrum. However, you could use something else around the View if you wanted the View for styling the container but something else around it to handle the animation. You can also do it inside, like you've done in that codesandbox. Very cool to see it working with Framer-Motion, thank you for sharing, all that to say, it looks like you're doing it great.

The last thing I might add is that this may have some accessibility requirements, as that looks like a summary/details in some regards https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/
Also, be sure to respect users who wish to disable animations, this is also an accessibility concern.