search

lsirivong / gatsby-plugin-modal-routing

A gatsby plugin for routable modals
44 stars 30 forks source link

Animate on closing modal #26

Closed ghost closed 5 years ago

ghost commented 5 years ago

Is it possible to animate on closing modal?

nextlevelshit commented 5 years ago 
/*
  Function that will be run when the modal is requested to be closed (either by clicking on overlay or pressing ESC)
  Note: It is not called if isOpen is changed by other means.
*/
onRequestClose={handleRequestCloseFunc}

Could these be an option? You can add modalProps parameter for that plugin in gatsby-config.js. Or just read the docs for modalProps.

lsirivong commented 5 years ago

This is currently supported (although, poorly) with react-modal's transition classes in combination with the closeTimeoutMS option.

I'm currently working on some improvements so the modal content is rendered while the modal is animating closed, right now (in v1.0.3) the modal content will be emptied while it animates.

lsirivong commented 5 years ago

The example site now uses v1.1.0-beta to show animated open/close styles: https://gatsby-starter-with-gatsby-plugin-modal-routing.netlify.com/

Related code: https://github.com/lsirivong/gatsby-starter-with-gatsby-plugin-modal-routing/commit/cccb842a203b714f22abff5c647a58c4ad566ed9

I'd appreciate if anyone hoping to use this could test out the beta and let me know if they have any issues before I cut an official release. Thanks!