Replies: 10 comments 2 replies
-
I struggled with this for a while and faced the same issues you're describing. I ended up finding a workable solution, though there's probably scope for improvement; https://github.com/nickmcmillan/gatsby-use-react-spring-route-transitions |
Beta Was this translation helpful? Give feedback.
-
I had issues getting the hooks to work as well. I went the render props route and everything seems to work fine now. Code below as an example. Hope you figure this out!
|
Beta Was this translation helpful? Give feedback.
-
Has anyone got this to work with anything besides opacity? tearing my hair out over this, have been struggling for about a whole week now. |
Beta Was this translation helpful? Give feedback.
-
@tompiler I’ve managed to get it working with left and right positioning to create a slide animation. If you want to do some sort of overlay transition when exiting the page I’d imagine you could create an overlay div and have the opacity set to 0 and have it animate into view when changing pages 🤔 |
Beta Was this translation helpful? Give feedback.
-
@DRD161 Thanks for the suggestion - I'm basically trying to wrangle this with gatsby-plugin-transition-link library, and the state prop that is passed to the TransitionLink variable, but it just doesn't work properly, passes through nulls when it should be carrying state and various other issues. The documentation of that plugin is about as lacking as it is for react-spring. Not complaining, but I'd happily foot up cash for better docs or help. Its a sad situation when I spend this much time achieving nothing. Imagine a lot of people are in the same situation. |
Beta Was this translation helpful? Give feedback.
-
Hi guys The answer found on Spectrum works well for me - https://spectrum.chat/react-spring/general/transitioning-pages-in-gatsby~17877b6f-56f5-40e7-ae3c-188dba64b3ca Solution on Code Sandbox: https://s1rg4.sse.codesandbox.io/ |
Beta Was this translation helpful? Give feedback.
-
@tompiler Yeah I had a few issues myself trying to get that to work. I decided to use the render props react-spring provides. I also spoke with @aleclarson who told me that he is hoping to improve the docs in the next release so that should help with some of the confusion. |
Beta Was this translation helpful? Give feedback.
-
@JakeElder Thanks for posting this - I'll take a look! @DRD161 thanks again - I've finally cracked it I think, going to be writing a blog post once its all finished and will use that to try and help out with the docs. |
Beta Was this translation helpful? Give feedback.
-
Anyone that wants to write a guide for this, let me know. I will repost it on the official website (once v9 is released), with a link to your personal blog. 👍 |
Beta Was this translation helpful? Give feedback.
-
Was there any concrete solutions to this? Issue I'm currently having is on route change the component mounts and enter animates, but unmounts immediately so there is no leave animation. The layout I use in my wrapPageElement:
|
Beta Was this translation helpful? Give feedback.
-
I'm trying to use React Spring to transition pages in Gatsby, similar to this - http://joshdcuneo.com/gatsby-animate-page-transitions/
Here is a Code Sandbox of my implementation attempt - https://codesandbox.io/s/great-sky-3g2lo?fontsize=14&hidenavigation=1&theme=dark
It uses Gatsby's
wrapPageElement
API to add the transition ingatsby-browser.js
Currently, when a page transition is triggered, React Spring is animating the origin page out and the target page in. That is to say that during the transition period, there are two pages that are animating as specified in the hook. However, the source page instantly updates to have the DOM structure of the target page. So, there are two identical pages, one transitioning out, one transitioning in.
What am I doing wrong? I've tried all sorts of things with useRef and React.cloneElement but I can't get the origin page to remain as it should
Notes
position: absolute
during transition so they overlap. I currently have them side by side to debugBeta Was this translation helpful? Give feedback.
All reactions