React-modal: Animation

[Bloomca]

Hi there!

I am wondering, what is the best approach to animate this modal?

The problem is – to create robust animation, which is easy to reuse across the whole application I have to create two wrappers to create actual animations and pass correct handlers to close modals.

So, what is the best way to deal with animations, is it possible with a single wrapper?
Maybe I just miss something obvious.

Thanks for any advice!

[megapctr]

Hi, you can try to start off by taking a look at this example

Basically you add css for .ReactModal__(Overlay/Content)--(after-open/before-close) css classes

[megapctr]

Here's a snippet I came up with:

.ReactModalPortal > * {
    // When the modal is closed, overlay div has no css class
    // This selector should be overridden by the `&--after-open` class below
    opacity: 0;
}
.ReactModal__Overlay {
    transition: opacity 200ms ease-in-out;
    background: rgba(0, 0, 0, 0.15);
    &--after-open {
        opacity: 1;
    }
    &--before-close {
        opacity: 0;
    }
}

You should also provide a closeTimeoutMS prop to the <Modal /> components, otherwise the closing animation will not work

[Bloomca]

@megapctr oh, thanks a lot, didn't notice this class changing.

It definitely solves my problem, so thanks a lot.
Though it could cause some troubles if need different type of animation.

But anyway, now it'll work. Thanks again!

[Jiia]

Avoid using wildcard * selector with these changes.

.ReactModalPortal > div {
    opacity: 0;
}

.ReactModalPortal .ReactModal__Overlay {
  transition: opacity 200ms ease-in-out;
  background: rgba(0, 0, 0, 0.15);
  &--after-open {
    opacity: 1;
  }
  &--before-close {
      opacity: 0;
  }
}

[edorivai]

Would it be possible to integrate animating the modal with rc-animate?

[segulino]

Hi! Sorry for reopen this old issue, it's possible to use something similar to @megapctr solution but using Radium for modal styling?

[Bloomca]

@segulino you can define global classes in radium as well.

So, I personally would separate animation and radium styles here (if they overlap, there is an ugly solution to add !important in css rules).

[clems36]

Hi. Thanks for the animation snippet. The after-open animation works fine for me but the before-close doesn't. No animation is triggered by it, any idea why ?

[Bloomca]

@clementino36 Have you provided closeTimeoutMS prop to the Modal? It might be an issue.

[clems36]

My bad for not reading the docs enough. Thank you!

[segulino]

@Bloomca thanks for your answer, but I don't understand how use this for use in my component, my modal component looks same this:

<Modal
      style={imageModal ? styles.modalImage : styles.modalForm}
      isOpen={isOpen}
      contentLabel={contentLabel}
      onRequestClose={onRequestClose}
    >...

And my Styles.js

const overlayStyle = {
  backgroundColor: modalOverlayColor,
  zIndex: 2
};

export default {
  modalForm: {
    overlay: overlayStyle,
    content: {
      display: 'flex',
      backgroundColor: white,
      overflow: 'auto',
      marginRight: '30%',
      marginLeft: '30%',
      ....

Could you help me with the way that I can include afterOpen / beforeClose selectors on this?

[Bloomca]

Hi @segulino, yeah, sure -- here is a rough example how it can look like:

<Style
  rules={{
     '.ReactModalPortal > div': {
        opacity: 0,
     },
     '.ReactModalPortal .ReactModal__Overlay': {
         transition: 'opacity 200ms ease-in-out',
         background: 'rgba(0, 0, 0, 0.15)',
     },
     '.ReactModalPortal .ReactModal__Overlay--after-open': {
        opacity: 1,
     },
     '.ReactModalPortal .ReactModal__Overlay--before-close': {
        opacity: 0,
     },
  }}
/>
<Modal
      style={imageModal ? styles.modalImage : styles.modalForm}
      isOpen={isOpen}
      contentLabel={contentLabel}
      onRequestClose={onRequestClose}
    >...

Style component from Radium allows to define global styles on classes.

Something like this should work. But I can recommend to put Style component to the top level, so you don't render it again.

[segulino]

I think I understood the behavior of the Radium Style component with this, and your example works great. Thanks for your time and help @Bloomca !

[vsanthanam]

I'm having the opposite issues -- open animation isn't showing, but close animation is. closeTimeOutMS prop is set.

[leoyli]

It seems I have to use !important to overwrite the background somehow...

[simonayzman]

Do people have suggestions on how to animate with direction? I have mine pinned to the bottom of the screen, and want it to animate up from the bottom, and animate down on close. Current content style:

      content: {
        top: 'auto',
        left: '0%',
        right: '0%',
        bottom: '0%',
        borderRadius: '0',
        padding: '0 0',
        overflow: 'visible',
      },

[starsoluzioni]

Hi, I followed the instructions and didn't manage to make it work.
In particular, the opening animation works, but the closing one doesn't.
My style looks like this:

.ReactModal__Overlay` {
  transition: opacity 500ms ease-in-out;
  opacity: 0;
}

.ReactModal__Overlay--after-open{
  opacity: 1;
}

.ReactModal__Overlay--before-close{
  opacity: 0;
}

And my component is:

<Modal isOpen={isOpen} contentLabel={"Text"} className="TextPopModal shadow" closeTimeoutMS={500}>
/* STUFF */
</Modal>

I tried getting rid of the classes, but I get the same behaviour.
Does anyone have any suggestion?
Thanks

[JinWangQ]

@starsoluzioni I have same issue. We missed onRequestClose, hope it helps.

 handleClose = () => {
    this.setState({
      modalIsOpen: !this.state.modalIsOpen
    });
  };

<Modal isOpen={this.state.isOpen} onRequestClose={this.handleClose} contentLabel={"Text"} className="TextPopModal shadow" closeTimeoutMS={500}>
/* STUFF */
</Modal>

[fallenleavesguy]

The base class and afterOpen class is apply at the same time, it it no animation when open modal, but has animation on close

[cactusjosh]

For those that struggled to get the close animation to work, try boosting closeTimeoutMS to something a fair bit greater than your animation time. My example:

closeTimeoutMS={500}

transition: opacity 200ms linear;

Works for me.