Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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?
Solved! Go to the solution
This is an accepted solution.
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:
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:
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!
Was your question answered? Giving MooseDesk's reply a Like or marking it as an Accepted Solution!
Install now. Be our early bird and get all features free forever.
This is an accepted solution.
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:
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:
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!
Was your question answered? Giving MooseDesk's reply a Like or marking it as an Accepted Solution!
Install now. Be our early bird and get all features free forever.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025