How to reset ScrollTrigger animations when returning to page?

[Vivodionisio]

Hi, I was wondering if anyone might have a solution to the problem of resetting ScrollTrigger animations when returning to a page, so that the animations can run again?

Currently you'll see in App.js that I've wrapped the react-router-dom Routes component in a ScrollToTop component which scroll's the window back to the top each time the location key changes. But since the page started at the bottom (where it was left before navigating away) the ScrollTrigger animations have already run. I've attached a minimal demo

Thanks in advance for any help or advice. 

 

https://codesandbox.io/s/blissful-chihiro-erft2s?file=/src/Page1.js

[GreenSock]

When I go to that link, I just see compile errors, like: 

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
▶ 18 stack frames were collapsed.
$csb$eval
/src/index.js:7:9
   4 | import App from "./App";
   5 | 
   6 | const rootElement = document.getElementById("root");
>  7 | ReactDOM.render(
     |         ^
   8 |   <StrictMode>
   9 |     <App />
  10 |   </StrictMode>,

Are you saying that you've got non-scrubbing ScrollTriggers (ones that use toggleActions) and you want them to reset when you scroll back up? The default toggleActions is "play none none none" meaning it calls play() on the animations on the way down (onEnter), but doesn't call anything on them onLeave, onEnterBack, or onLeaveBack. So if you want them to reset when you go back up, you could just do: 

toggleActions: "play none none reset"

// or if you want them to reverse() on the way back:
toggleActions: "play none none reverse"

//or just restart them every time down: 
toggleActions: "restart none none none"

I hope that helps. 

[Vivodionisio]

Hi Jack, thanks for your swift reply. This does provide a good solution. Although this was an issue I ran into when making a minimal demo for demonstrate a different problem, which I have just solved, with no small amount of luck - I'm still trying to understand it.

I'll mention it best I can, should it be helpful to anyone else. It had to do with wanting each page to begin at scroll position 0. To achieve this I wrapped routes in a function which fired a scrollTo(0, 0) method each time the location's key changed. This worked just fine until I added ScrollSmoother to a set of dynamic ArtPiece pages. Now it appeared the ScrollSmoother was interfering with the scrollTo function. Not when refreshing the page however; only when navigating from there to other's in the dynamic set. I figured the ScrollSmoother from the previous page was hanging around and remembered about putting a unique key on the Routes component, so that dynamic pages (that render out the same component) such as my ArtPiece component, will be treated as components in there own right, separate from one another. Now i believe a new ScrollSmoother is being created for each ArtPiece page. In any case, it's working! Hoorah. Sorry for the low res description.