search

lsirivong / gatsby-plugin-modal-routing

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

Would I be able to animate the entrance/exit of a modal? #25

Closed rchrdnsh closed 5 years ago

rchrdnsh commented 5 years ago

Using something like framer-motion or react-spring, would it be possible to animate the entrance/exit of the modals, or would it be prohibited in any way by the design of the plugin/gatsby?

currnely have a gatsby app that does this with the menu and promo components?

www.alma.vacations (check it out on mobile to see what I mean)

Just want to make sure that this kind of animation would be supported before I dive in :-)

lsirivong commented 5 years ago

Hi @rchrdnsh!

I think this should be fine, but really it depends on how well supported the animation framework with react-modal is. In the past, I've used the css classes that react-modal applies for entrance/exiting which I believe should work as expected: http://reactcommunity.org/react-modal/styles/transitions.html

Let me know if you discover anything that this plugin could do to improve support, even some documentation of your discoveries would be appreciated!

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!