How to do this kinda effect? Sticky Scale?

Shopify Discussion

Topic summary

A user asks how to recreate a scroll-triggered animation effect seen on the Louis Vuitton mobile homepage, where images fade in and scale up as users scroll.

Solution Provided:
Another user (rajweb) shares complete code using HTML, CSS, and JavaScript with IntersectionObserver API. The effect uses opacity and translateY transforms triggered when elements become 30% visible.

Implementation Steps:

  • Wrap image banner content in a container with class image-container
  • Add CSS for opacity/transform transitions to base.css
  • Create scroll-reveal.js file with IntersectionObserver code
  • Link JavaScript file in theme.liquid before closing </body> tag

Current Status:
The original poster attempted implementation but encountered issues with file placement. The helper offered to continue via email for more detailed guidance on integrating the code into Shopify’s Image Banner section.

Key technical detail: Uses threshold: 0.3 to trigger animation when 30% of element is visible in viewport.

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

This effect while on scroll. Please view in mobile version. https://us.louisvuitton.com/eng-us/homepage

article_0-1746771469521.png
article_0-1746771469521.png754Ă—1632 178 KB

2

Hey @article ,

Here’s a complete and clean code using only HTML, CSS, and JavaScript (no libraries).

  1. HTML
  1. CSS (style.css)
body {
  margin: 0;
  font-family: sans-serif;
}

.spacer {
  height: 100vh; /* for scroll testing */
  background: #f5f5f5;
}

.scroll-reveal-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to top, #ffe9d2, #dbeeff);
}

.image-container {
  width: 90%;
  max-width: 400px;
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  transform: translateY(50px);
}

.image-container.reveal {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-image {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
  1. JavaScript (script.js)
document.addEventListener('DOMContentLoaded', () => {
  const target = document.querySelector('.image-container');

  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          target.classList.add('reveal');
          observer.unobserve(target);
        }
      });
    },
    {
      threshold: 0.3, // Trigger when 30% is visible
    }
  );

  observer.observe(target);
});

Replace:

“your-image.jpg” with the path to your desired image (you can use the LV image URL too).

Thanks

Rajat

Shopify Expert

1 Like
3

Thank you very much for your time! But I don’t really know how to use it. Could you please teach me how to use?

4

Absolutely! Feel free to reach out to me anytime — I’ll be glad to guide you through how to use it step by step.

Looking forward to helping you get comfortable with everything.

Best regards,
Rajat

1 Like
5

I tried to open a new section and pasted the HTML code to it. And pasted your CSS code to the bottom of base.css, and JavaScript to a asset/custom.js and I link it in theme.liquid… I think I did it wrong. Can you please help me with it?

6

Please teach me how to use it on my Shopify Image Banner! Thx

7

STEP 1: Edit the Image Banner section

Follow these steps;

  1. Online Store

  2. Themes

  3. Edit Code

  4. In the left sidebar, find: sections/image-banner.liquid((or something similar, depending on your theme like hero.liquid, etc.)

  5. Inside the image tag, wrap it like this:

Modify the image block

STEP 2: Add CSS for the animation

In your theme’s CSS file:

  1. Open: assets/base.css, theme.css, or styles.css (varies by theme)

  2. Paste this at the bottom:

.image-container {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.image-container.reveal {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-image {
  width: 100%;
  display: block;
  border-radius: 12px;
}

STEP 3: Add JavaScript

  1. Go to: assets folder

  2. Find or create a file named: scroll-reveal.js

document.addEventListener('DOMContentLoaded', function () {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('reveal');
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.3,
  });

  document.querySelectorAll('.image-container').forEach(container => {
    observer.observe(container);
  });
});

Then go to layout/theme.liquid

Find the tag and just above it, add:

{{ 'scroll-reveal.js' | asset_url | script_tag }}

Now your Image Banner will fade in and slide up on scroll — just like Louis Vuitton’s mobile homepage.

Thanks!

8

@article ,

Please feel free to message me via email so we can go over the details more clearly. I’m happy to continue the conversation there.