How to play an animation once in Customizer

[Rostislav333]

I have a preloader in the main JS file. Initially it is visible and works like a “curtain”.

.loading-bar {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-color: rgb(var(--color-foreground));
  z-index: 50;
}

 <page-transition class="loading-bar"></page-transition>

class PageTransition extends HTMLElement {
  constructor() {
    super();
    this.animationStarted = false;
  }

  connectedCallback() {
    if (!this.animationStarted) {
      this.animationStarted = true;

      window.addEventListener("load", () => {
        setTimeout(() => {
          anime({
            targets: this,
            translateX: ["0%", "-100%"],
            easing: "easeInOutQuad",
            duration: 1000,
            delay: 500,
            complete: () => {
              this.animationStarted = false;
            },
          });
        }, 0);
      });
    }
  }
}

customElements.define("page-transition", PageTransition);

How can I make the animation play out once in the Customizer and not show up during subsequent changes when the page is reloaded?

[MooseDesk · Accepted solution]

Hi @Rostislav333 

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.

To solve your issue with the preloader animation in the Customizer, we can modify the code to run the animation only once in the Customizer and hide it during subsequent page reloads. Here's an approach you can try:

1. Use localStorage to store the animation state.
2. Check if we're in the Customizer.
3. Only run the animation if it hasn't been run before or we're not in the Customizer.

Here's the adjusted code:

class PageTransition extends HTMLElement {
  connectedCallback() {
    if (this.shouldRunAnimation()) {
      this.runAnimation();
    } else {
      this.hide();
    }
  }

  shouldRunAnimation() {
    return !localStorage.getItem('transitionAnimationRun');
  }

  runAnimation() {
    window.addEventListener("load", () => {
      setTimeout(() => {
        anime({
          targets: this,
          translateX: ["0%", "-100%"],
          easing: "easeInOutQuad",
          duration: 1000,
          delay: 500,
          complete: () => {
            this.hide();
            localStorage.setItem('transitionAnimationRun', 'true');
          },
        });
      }, 0);
    });
  }

  hide() {
    this.style.display = 'none';
  }
}

customElements.define("page-transition", PageTransition);

// To test the animation again, open your browser's console and type:
// localStorage.clear()
// Then refresh the page. The loading animation should appear again.

This solution ensures that:

1. The animation runs only once in the Customizer.
2. It doesn't show up during subsequent changes when the page is reloaded in the Customizer.
3. Outside the Customizer, it runs once per user.

You might also want to adjust your CSS to ensure smooth hiding of the preloader:

.loading-bar {
  /* ... existing styles ... */
  transition: opacity 0.5s ease;
}

.loading-bar[style*="display: none"] {
  opacity: 0;
}

 This approach should solve your issue while maintaining a smooth user experience.

If this is helpful for you, please let me know by giving MooseDesk a 'LIKE'. If your question is answered please mark this as 'SOLUTION’.

Thank you for reading. Wish you a nice day ahead!