Disable AOS (animate) on specific pages

1.1k views Asked by At

I'm using AOS to fade-up content on a wordpress website however I want to disable the animations within the blog pages. I cannot modify the html to remove the data-aos="fade-up" since I'm using content blocks which can be used on any page across the website. So I'm looking for a css or js way to do what I need.

Currently I'm initializing AOS:

AOS.init({
   startEvent: 'load',
   once: false,
   disableMutationObserver: false, 
   duration: 500, // values from 0 to 3000, with step 50ms
   easing: 'ease',
 });
AOS.refresh(true); 

And importing the css:

@import "~aos/dist/aos.css";
1

There are 1 answers

0
Emiel Zuurbier On

If you have your AOS logic in a separate script, then you could choose to enqueue it whenever the current page meets the criteria.

add_action('wp_enqueue_scripts', function() {
  if (!is_singular('post')) {
    wp_enqueue_script('aos', 'path-to-your-aos-script.js', [], false, true);
  }
});