0

I'm having issues on page transition animation using Reach-Router Not React-Router, GSAP, and React-Transition-Group in combination.

I did research and found example on page-transition animation using Reach-Router and React-Transition-Group

https://reach.tech/router/example/animation

This example uses CSS to animate, But I wanted to animate it with GSAP and it uses is pure JavaScript not CSS. So, it mean I wouldn't need to use TransitionGroup and CSSTransition.

Later on I found another example on page transition animation with GSAP.

https://stackblitz.com/edit/gsap-react-route-animation

But it uses react-router not reach-router. Since react-router and reach-router look almost close to each other. I decide to go on my own experiment starting with GSAP, RTG and React-Router so I can have better understanding how it work... Here's my sandbox.

https://codesandbox.io/s/react-router-gsap-pgu24

Animation worked! Then, I did another experiment getting exactly copy of code and convert some area to make it compatible with Reach-Router. Here's my sandbox.

https://codesandbox.io/s/reach-router-gsap-h5rny?fontsize=14

Everything works except for animation. Its been struggling for me to find what's the problem and I not understanding here. Did I missing something? Please need help?

sirrus
  • 341
  • 1
  • 7
  • 16
  • Looks like your Reach routing is wrong. The nav that you have in your example isn't using Reach at all. Try basing it more off of Reach docs. – Zach Saucier Sep 12 '19 at 22:54
  • Thanks for replying-- Actually Reach-Router's route and nav is working. Although, I found a solution to problem. It did not detect location or a matched path of a child component to initiate animation. More about Location: https://reach.tech/router/api/Location and more about Match https://reach.tech/router/api/Match – sirrus Sep 14 '19 at 11:04

0 Answers0