how to make Reveal sections on scroll in mobile screen

Store Design

Topic summary

A user is experiencing an issue where “Reveal sections on scroll” animations work on desktop but fail to display on mobile devices.

Suggested Solutions:

  • Check JavaScript/Media Queries: Verify that scroll reveal functions aren’t disabled for mobile devices in the code. Look for media queries that might prevent animations on smaller screens.

  • Library Configuration: If using libraries like AOS (Animate On Scroll), ensure they’re properly configured for mobile devices.

  • CSS Adjustments: Apply mobile-specific CSS to enable scroll animations:

@media only screen and (max-width: 768px) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 1s ease-in-out !important;
  }
}
  • Animation Thresholds: Adjust trigger thresholds to account for mobile viewport differences.

Status: The issue remains unresolved, with testing needed to determine which solution works for the specific implementation.

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

i have the Reveal sections on scroll works in the Desktop screen but not in mobile screen,

how to make it work for mobile screen

here my website link : https://b6448a-44.myshopify.com/

2

Hi @ai41

To make the “Reveal sections on scroll” feature work on mobile screens, you likely need to adjust the CSS or JavaScript for mobile responsiveness. Here’s what you can do:

  1. Ensure that the JavaScript scroll reveal function is not disabled for mobile devices in your code. Check if there are any media queries that may prevent the effect from running on smaller screens.
  2. If using a library like AOS (Animate On Scroll), make sure it’s configured to apply animations on mobile. You may need to adjust the threshold for when the animation triggers.
  3. You can also try using this CSS snippet to enable scroll animations on mobile:

@media only screen and (max-width: 768px) {

.reveal-on-scroll {

opacity: 1 !important;

transform: translateY(0) !important;

transition: all 1s ease-in-out !important;

}

}

→ Test and adjust accordingly to make it work on mobile.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy