Execute scroll reset during out animation

[diegoviador]

Describe your problem 🧐

Hello SWUP community!

While working on a recent project, I have a question about whether it’s possible to execute the scroll during the first part of the OUT animation so that the scroll trigger animations don’t execute on the way up.

The sequence I’m looking for is animate out > scroll to top > destroy scroll trigger animation to reset them > animate in.

Currently, it works for me as animate out > destroy scroll triggers > scroll > animate in, and the animation doesn’t reset properly.

What is your question? 🙋‍♀️

I’m leaving a link with a small deployed demo. On the first load, you’ll see that all the animations trigger correctly as you scroll, but if you click on a link card in the “More Trend Stories” section at the bottom of the page, all the animations trigger during the transition and then don’t work when scrolling down again.

You can observe in the console that the console.log for the destroy scroll triggers executes right before SWUP scrolls to the top.

I’ve also tried using SwupScrollPlugin with doScrollingRightAway: true, but it scrolls right before the animation starts.

this.swup.hooks.on("content:replace", () => {
    this.contentReplaced();
});

this.swup.hooks.before("content:replace", () => {
    this.willReplaceContent(); //Here is where I execute all animation reset
});

Can anyone lend me a hand?

Thanks!

URL to minimal reproduction 🔗

https://stage--axa-future.netlify.app/ai-automation/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[andresclua]

hey @daun could you advise on this item?

[daun]

On vacation :) Maybe someone else will stop by and offer help. In the future, please avoid pinging maintainers directly. The GitHub discussions feature is more of a public discussion board for library users and less of a direct support channel. Thanks!

[andresclua]

Thanks for the heads up! we were able to fix the issue on our own. Enjoy your vacation! 😊

export function smoothScrollToTop() {
    return new Promise((resolve) => {
      const scrollStep = () => {
        if (window.scrollY === 0) {
          resolve();
        } else {
          requestAnimationFrame(scrollStep);
        }
      };
      
      window.scrollTo({ top: 0, behavior: 'smooth' });
      scrollStep();
    });
  }```
  

out: (next, infos) => {

   var tl = gsap.timeline({
     onComplete:  async() => {
      if(window.scrollY !== 0){
        await smoothScrollToTop();
      }
      next();
     },
   });
   tl.add(new Out());
 },
 ```