Styling on animated modal transition (Office hours: 9/24/2020)

[andioneto]

The specific questions I have are around a POC I have for animated modal view.

• I would love to review the styling and interactions of the animated modal and get the team's thoughts.
• I noticed some differences using useTransition from @twilio-paste/animation library and react-spring directly, I would love to review that as well and see if there is some guidance that I'm missing.

Background: Follow up on Discussion 639 around a replacement for the animated modal view wrapper from our legacy react-components/ui-component-modal
Stage of design: Exploration, POC and feedback
Research: see below 👇
Links to mockups or prototype: Animated modal view, please note that as I type this, I need to do some cleanup work to decouple the logic and iterate on the first POC. Mostly interested in reviewing the experience and render in the session, not implementation details.

Thank you! 🙌

[SiTaggart]

Hi @andipants12

For the overall style of the transition we'd recommend trying to follow the current slide animation that mimics the directionality of next and back. Some things to consider:

• Position of the animated wrapper: right now both forms stack during the transition because they are relatively positioned to them selves and the modal body container. You'll likely need some form of absolute positioning if you plan of animating both forms in and out of view at the same time.
• Absolute positioning will collapse the modal body. You'll have to manage how tall that content area needs to be. That may change depending on the content
• This might trigger the modal heights to jump as you progress through the forms.

Most Importantly you must manage user focus between states. As you transition between the forms react-spring is trashing the DOM and the user is losing focus. As the DOM the user was current focused on disappeared the browser tries to get close, but mostly gives up and starts curser at the beginning of the available DOM. Ideally as the animation finishes you should be placing focus inside the first new input that is visible.

As for the second part, the differences, I'm not aware of any but I'm also not familiar with react-spring right now. If the current version of react-spring has changed it's API to the version we're wrapping, that might be the cause. But you might need to give full details to help us understand what differences you are seeing. I'm probably not going to be a lot of help on that one though.

[richbachman]

Hi @andipants12

+1 to all of Simons comments above.

Not sure if this will be helpful since its written with CSS, but I found a react-spring example of the scrolling effect you might be going for: https://codesandbox.io/embed/1y3yyqpq7q

You may be able to use that and translate it using Paste.

[andioneto]

@richbachman That's the demo I used as inspiration for the modal views FYI 😄

[andioneto]

Also, I went ahead and forked that demo and updated it to work with the version of react-spring we are using.
https://codesandbox.io/s/wild-water-vsbvf?file=/src/index.js

[andioneto]

@richbachman @SiTaggart Thank you both! 👏 I think this gives me a really good jumping off point and I'd like to take my name off of the sign up sheet for today in favor of another question that someone needs reviewed. Is that possible? I'll follow up in Slack since this is a bit time sensitive.
Again thanks, this is great.
@vnguyen94

[andioneto]

Okey @richbachman and @SiTaggart I took your feedback and iterated a bit.
I didn't make the positioning absolute, instead I made the modal body component display: flex-inline and that seemed to create the appearance of horizontal sliding without the added complexity of recomputing modal height and content height on every re-render 😅

I also dug a bit more into the API differences between [email protected] and @twilio-paste/core@latest. I looks like Paste is using the web export version 9.0.0-rc.3, which as far as I can tell is still unreleased. I didn't see anything that maps directly to the bug I'm having in the change log (and I didn't dig through all of the issues) but I'm curious why we aren't using the latest stable release?

I spent some time testing it again last night, and alas, was not able to get the slide transition to work, correctly mapping over the array by index and animating correctly.

[richbachman]

Hey @andipants12 sorry for the late response on this one. I was digging into the animation library yesterday and noticed that we were using a release candidate. I'm not sure why thats the case. I'm flying solo on the engineering side this week, but will ask the team when every one is back next week and will get back with you.

In the meantime, I'll play around with this some more and see if we can't figure it out. Is the codesandbox link in the original discussion post still a good one to fork from?

[andioneto]

@richbachman Yes it is. I did get it working with the release candidate version, but it seems like I'm doing something kind of brittle. I forked off of the main repo I shared. Will post that updated fork later today. Thanks for getting back to me on this!

[TheSisb]

Hi @andipants12! Originally we intended to use the latest stable release, however we realized that we wouldn't be able to implement the level of a11y we require on that release. We rely on functionality in V9 to respect the "prefers-reduced-motion" browser flag.

Unfortunately, react-spring v8 didn't have a mechanism to globally modify/disable animations so I bumped that library to v9 RC3.
(#450)

I tried clicking on your Codesandbox in the first post of this discussion but I'm not sure if its current state was the one you originally shared. I'm having a hard time getting it working.

I noticed some differences using useTransition from @twilio-paste/animation library and react-spring directly, I would love to review that as well and see if there is some guidance that I'm missing.

Yeah this is a small undocumented change in the RC that bit me for a good 30mins on the Paste Modal as well. I'm hopeful that new V9 documentation will be released soon.

[SiTaggart]

I found this pretty useful recently to highlight some of the differences https://aleclarson.github.io/react-spring/v9/