Disabling website animations

If you wish to disable Split's animation of pages and sections, in order to make your store more static, without so many effects, you can do so easily do so, by following the steps below.

Disabling "in" animations

  1. Go to the theme editor (read this article for more info)
  2. Choose /assets/css_main.scss.liquid and at the very bottom of the file, paste the following snippet:

    /* ----
       Disable theme animations (in)
      ---
    */
    
    .site-box {
    
      .shopify-section:not(.mount-slideshow) & {
        
        .site-box-background {
          opacity: 1 !important;
        }
        .site-box-content {
          transform: translateY(0) !important;
          opacity: 1 !important;
        }
    
      }
     
      .shopify-section.mount-slideshow .slideshow-item:first-child & {
    
        .site-box-content {
          transform: translateY(0) !important;
          opacity: 1 !important;
        }
    
      }
    
    }
    
  3. Save the file!

Disabling "out" animations

  1. Go to the theme editor (read this article for more info)
  2. Choose /assets/css_main.scss.liquid and at the very bottom of the file, paste the following snippet:

    /* ----
       Disable theme animations (out)
      ---
    */
    
    body {
      opacity: 1 !important;
      display: block !important;
    }
    
  3. Save the file!