search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Possible to do native style page transitions in gatsby? #17433

Closed rchrdnsh closed 5 years ago

rchrdnsh commented 5 years ago

I would love to be able to make page transitions like in the following article in gatsby:

https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

just wanted to know if what possible, and if so, are there any resources about it at all?

Thanks 😄

jonathanprozzi commented 5 years ago

Hello @rchrdnsh -- That article is awesome!

You may want to check out gatsby-plugin-transition-link

The plugin page has some site examples and also includes directions for use with animation libraries such as react-spring, react-pose, gsap, and anime.

Hope this is helpful!

rchrdnsh commented 5 years ago

I tried that plugin a while back, but the animations were not interruptible, which was a deal breaker at the time, plus those are only page transitions as far as i know, whereas I am trying to animate many things in many places, and libraries like react-spring, framer-motion, GSAP, etc, are a bit more capable. But I can circle back around and check out the plugin again now and see if things have changed :-)

LekoArts commented 5 years ago

Thank you for opening this!

You can maybe try https://github.com/berzniz/react-overdrive but it's not really a problem with Gatsby, you can use anything that works with React.

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby!