(Non codepen demo) How to add scope when using GSAP's React Page Transition setup since we can't use useGSAP there?

[artyor]

Im using GSAP's starter template for React page transition, and since it's using React transition group, I'm wondering how can we add scope, so we can target other elements inside page and not just root element? As you can see Im animating out boxes from the first page.

Also I tried to do .revert() of timeline in this demo, is this the right way? It works but not sure if Im doing something wrong.

Demo:
https://stackblitz.com/edit/react-acgvpim9?file=src%2Frouter%2FRouter.js,src%2Fcontext%2FTransitionContext.js,src%2Fcomponents%2FTransition.js,src%2Fviews%2FBoxes.js

Thanks

[Rodrigo]

Hi,

 

On a personal note I fail to see the real need of this, but if you really need to do that you can definitely scope the elements with a more specific selector or using the selector utility method:

https://gsap.com/docs/v3/GSAP/UtilityMethods/selector()

 

Also in order to prevent the target not found warning in the console, you can use the route pathname in order to point to the elements that are actually in the DOM. The current approach you have creates an unwanted and odd delay in the animation:

const location = useLocation();

onExit={(node) => {
  // Here use location.pathname to target the right elements and create scope if you want
  tl.current = gsap
    .timeline({ paused: true })
    .to(`.box`, {
    x: 140,
    stagger: 0.2,
  })
    .to(node, { scale: 0.8, duration: 0.2 })
    .to(node, {
    xPercent: 100,
    autoAlpha: 0,
    duration: 0.2,
  })
    .play();
}}

Hopefully this helps

Happy Tweening!

[artyor]

@RodrigoHi Rodrigo, thanks for answering.

Well the need is pretty basic, for example, we want a specific element to be animated when transitioning to other page, and not just the whole page going opacity 0 or moving translating on X or Y axis. 

Im creating a very minimal website where I will have just 4-5 elements, and I will animate them in stagger on page transition, think it's a cool effect, just wanted to make sure if what I tried to do in demo on boxes page was alright (with cleaning animations with revert, since we cant use useGSAP here) and how would I add scope.

[Rodrigo]

Hi,

 

Yeah since that is just a JS function being executed (the onEnter and onExit callbacks/hooks), our useGSAP hook, or any other React hook is not going to work there. Is worth mentioning that these are one-off functions being called and that is highly unlikely that something could break if you switch to a different route mid-way through an existing animation. In that aspect there is no need to revert (or at least I don't see the need for it) so it should be fine as long as you point to the correct DOM elements, as I mentioned in my previous post in this thread, you're running the same Tween on every route, but not every route has the same elements, so is likely that you'll get that odd delay on routes that don't have any elements in the GSAP config.

 

Hopefully this helps.

Happy Tweening!