Animated Page Transitions in React using GSAP

[trompx]

Thanks a lot for your input everyone.

@agm1984 my usecase is a bit different, what I really try to achieve is being able to transition from page A->B with a certain type of animation and animate the page elements In and Out with a different duration than the one of the page themself. I can have canvas / webgl on those pages and I'd need to react to the end of their animations in the transition container to trigger the next action (according to the transition type: OutAndIn, OutThenIn...).

@elegantseagulls I've worked some time ago on an implementation but with classic es6 modules (no react, and no next.js) so I have to change a lot of stuff (I used to work with event emitter but is is not the react way so I try to come up with something better).

@Rodrigo thanks again one more time to trying to come up with a working demo  When you pass a key={path} on the transition component, it can have two behaviours. If you animate it again before it has finished animating (with popstate really fast), the animation is different.

Anyway, your ideas helped me and put me in the right direction, thanks again!

[Rodrigo]

1 hour ago, trompx said:

If you animate it again before it has finished animating (with popstate really fast), the animation is different.

Yeah my bad... you have to kill animations and clear props in order to avoid that. The sample is updated.

 

Happy Tweening!!!