Animation runs only once in Chrome

Technical Q&A
, , ,

Topic summary

A developer is experiencing an animation issue in Chrome (version 142.0.7444.162) on Shopify sites.

The Problem:

  • Animations (both GSAP and CSS-based) work correctly on initial page load
  • After navigating to another page and returning via browser back/forward buttons, animations fail to run again
  • Issue appears specific to Chrome browser

Technical Context:

  • The code uses DOMContentLoaded event listeners to trigger animations
  • Example includes GSAP animations (.to() method) and CSS class-based animations
  • The developer questions whether this is a compatibility issue between Shopify and Chrome’s back/forward cache (bfcache)

Status: The issue remains unresolved with no responses yet. The core question is whether Shopify’s architecture conflicts with Chrome’s caching mechanisms, preventing animations from re-initializing on cached page loads.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I’m having an issue with Shopify in Chrome - When I trigger an animation (GSAP or simple css), navigate to another page, and then return, the animation no longer runs. I’m using Chrome 142.0.7444.162 (latest)

Simple example:

test-section.liquid:

<p class="animate-gsap">Hello</p>

<div class="animate">World</div>

{% javascript %}
document.addEventListener('DOMContentLoaded', function() {
    gsap.to(".animate-gsap", { 
        x: 300, 
        duration: 0.3, 
        ease: "power1.inOut" 
    });
});
document.addEventListener('DOMContentLoaded', function() {
  const element = document.querySelector('.animate');
  element.classList.add('move'); 
});
{% endjavascript %}

Is Shopify not compatible with Chrome’s back/forward cache (bfcache)?

ezgif-3a4a9cf4997e862e

2

@Liam-hi hello, did you click on back button rather than the link? because clicking on back button can give this issue, may be because page session is not loaded again.

3

Hi @Liam-hi
May be you can try putting the animation code into the event of pageshow like this:

window.addEventListener('pageshow', function() {
  const element = document.querySelector('.animate');
  element.classList.add('move');
});