Integrate animations using JavaScript in Shopify themes?

Store Design

Topic summary

The discussion addresses implementing scroll-based and hover animations in Shopify themes while maintaining site speed and compatibility with theme updates.

Implementation Approach:

  • Create a new JavaScript file (e.g., animation.js or custom-animations.js) in the assets folder
  • Link the file in theme.liquid following existing JavaScript file patterns
  • Use DOMContentLoaded event listener to ensure proper initialization

Code Examples Provided:

  • Hover animations: Scale transformation on button mouseover/mouseout events
  • Scroll animations: Fade-in effect triggered when elements enter viewport using getBoundingClientRect()

Performance Recommendations:

  • Write clean, optimized JavaScript code
  • Consider lightweight animation libraries:
    • AOS (Animate on Scroll) - simple data attribute implementation
    • GSAP - more powerful but heavier
    • Lottie - for JSON-based animations

Resolution: The original poster confirmed the solutions were helpful. The thread provides both custom JavaScript approaches and library-based alternatives for adding animations without compromising site performance.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to add scroll-based or hover animations to enhance my storefront’s interactivity. Where should I place the JavaScript code, and are there best practices for doing this without affecting site speed or theme updates?

3

Hello @Williamjakes2 ,

You can create a new file under assets → animation.js and include it in theme.liquid
You can check in theme.liquid how other js files are connected.

About site speed, use clean javascript and it will not affect the site speed.

Regards
Guleria

4

Hi,

Hope this will help

  • Locate or Create a JavaScript File (assets/theme.js or assets/global.js or create a new one - custom-animations.js)

  • Add Animation JavaScript Code

Hover Animation Example

document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.button');

  buttons.forEach(button => {
    button.addEventListener('mouseover', () => {
      button.style.transform = 'scale(1.1)';
      button.style.transition = 'transform 0.3s ease';
    });

    button.addEventListener('mouseout', () => {
      button.style.transform = 'scale(1)';
    });
  });
});

Scroll Animation Example (Fade-in)

document.addEventListener('DOMContentLoaded', () => {
  const fadeItems = document.querySelectorAll('.fade-in');

  function fadeInOnScroll() {
    fadeItems.forEach(item => {
      const rect = item.getBoundingClientRect();
      if (rect.top < window.innerHeight) {
        item.style.opacity = 1;
        item.style.transform = 'translateY(0)';
        item.style.transition = 'opacity 1s ease, transform 1s ease';
      }
    });
  }

  window.addEventListener('scroll', fadeInOnScroll);
});
  • Link JavaScript File in Theme
5

Hi @Williamjakes2 ,

Adding animations with JavaScript in a Shopify theme can significantly enhance your storefront’s interactivity — scroll animations, hover effects, fade-ins, parallax, etc. However, it’s essential to implement them carefully to avoid affecting performance or breaking with theme updates.
Use Animation Libraries Wisely
Consider lightweight libraries like:

  • GSAP (powerful, but heavier)
  • AOS (Animate on Scroll)
  • Lottie for JSON-based animations

Add data-aos=“fade-up” to HTML elements to animate on scroll.

Please let me know if it works as expected
Best regards!

6

Thanks Mate, for your help.