Modal transitions in theme provider?

[jenseo]

Hi there,
I've been looking into creating my own React dashboard and this really looks like it will be a great start! If I decide to give it a go, you can probably expect some PR:s from me down the road if I know myself :D

One thing I noticed is that the modal animations/transitions is quite aggressive for my taste (they look great, just that my brain can't handle the cognitive load). I would prefer to tone them down quite a bit and was thinking, would it make sense to let the user override the modal/other transitions with their own configs? Perhaps in the theme provider or otherwise as props?

Just some food for though, would be nice to hear your thoughts on this!

My best regards, and hands down for the effort you have put into this!

[shannonhochkins]

Hey man! Of course, and no problems with future PRs, the animations won't be for everyone, and I've had feedback before that every thing feels slow with the animations do I do agree it needs a bit of love!

[shannonhochkins]

@jenseo I'll have something for this really soon! There's been a lot of improvements to the existing animation performance, as well as the documentation saying the default time was 0.25 seconds but it was actually 1s which is why everything felt slow :D

The POC here is working nicely, and allows you to change the animation individually or globally across your application.

This might seem a bit "scary" looking at this new ModalProvider options, however it provides the ultimate control to animate the modal, content and header of the modal independantly using framer motion, and here's some examples of animations out there for reference: https://fireship.io/lessons/framer-motion-modal/

<HassConnect hassUrl="http://localhost:8123">
  <ThemeProvider includeThemeControls />
  <ModalProvider options={{
    animationDuration: .5,
    modalAnimation(duration) {
      return {
        content: {
          variants: {
            exit: {
              transition: {
                duration,
              },
              y: '-5%',
              scale: 0.95,
              opacity: 0
            },
            animate: {
              opacity: 1,
              scale: 1,
              y: '0%',
              transition: {
                duration,
                delay: 0.3,
              }
            },
            initial: {
              opacity: 0,
              scale: 0.9,
              y: '0%',
              transition: {
                duration,
              }
            },
          }
        },
        modal: {
          variants: {
            exit: {
              y: '-20vh',
              transition: {
                duration: 1,
                delay: 0.3,
              },
              opacity: 0
            },
            animate: {
              y: '0%',
              opacity: 1,
              transition: {
                duration,
              }
            },
            initial: {
              y: '50vh',
              opacity: 0,
              transition: {
                duration,
              }
            },
          }
        },
      };
    }
  }}>
    <Column gap="1rem" fullWidth>
      <ButtonCard entity="light.something" />
    </Column>
  </ModalProvider>
</HassConnect>

[jenseo]

Boom! That's awesome! Been busy at work lately so haven't had time to fiddle, but looking forward to this!

[shannonhochkins]

Same reason I've not been making a whole bunch of changes or progress on the side hussle! Work consumes us sometimes!

What's your thoughts on just providing this custom approach as well as also providing a few more defaults like being able to provide

{
    animation: 'scaleIn'
}

And it would just use a prebuilt animation - I'm tending to NOT support this as this new change will provide the ultimate flexibility

[shannonhochkins]

Release as a part of 3.2.0