Spotlight theme: How do I remove animations "Reveal sections on scroll" on mobile only

[matchyychin]

I noticed an option to remove animations "Reveal sections on scroll" in the theme setting, and it will disable both desktop and mobile if I untick this. I want to disable it only on mobile. Is there any way to do it? Thank you.

URL:https://urvjqgvmkunttocd-65422164133.shopifypreview.com

currently the animations are disabled for both desktop and mobile

[Sweans]

Hi @matchyychin,

Your preview link has expired, but we can help you!!

First, you need to identify the CSS class or attribute that controls the animations in your theme. These classes normally include something like .animated or .reveal-on-scroll.

Once you get the class name add the following CSS:

@media only screen and (max-width: 767px) { 
  .animated,   .reveal-on-scroll {
    opacity: 1 !important; 
    transform: none !important; 
    animation: none !important; 
  }
}

Here replace the class name with the corresponding class name of your animation.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[matchyychin]

Hi @Sweans Thank you so much! It works!!

[matchyychin]

Sorry my bad 🤣 I realised I didn't turn the "Reveal sections on scroll" on in the theme setting before checking. I couldn't find the CSS class. Here is the URL: https://5i9z9gmeeenstk19-65422164133.shopifypreview.com/ 

It would be great if you could help me identify it. 🙏

[Sweans]

Hi @matchyychin,

Could you please enable the animation from the backend, we could only see the animation class added to few elements only.

Regards,
Sweans