Animate on scroll library - not being called due html no-js class being added by template

Highlighted
New Contributor

Hello I wonder if any one can help me

I am trying to use the AOS animate library https://michalsnik.github.io/aos/

 

Whereby you place the the css and js files just at the end of the end body tag and the
applied a data-src attribute on to the element you want to apply the css animation on.

 

I created a full html page before building the hubspot template so in principle i have the file working in there

 

But applying the aos data src to an elemt in a drag and drop template has no effect, there might be a js conflict but I am not getting any console errors and I can see the css stsles being applied to the elements?

 

The element on inspect side seems to be firing ok i can its applies an aos_init class initial and when it instersects add aos_animate class.

 

Not sure with all the additional markup div > div > span that the drag and drop creates may be affecting it?

 

The other thing i am looking is the templates seems to be additing a not_js class to the html attribute which might be affecting the aos css sheet so will look at applying js via https://knowledge.hubspot.com/cos-general/add-a-javascript-file-to-hubspot see if that helps?

 

Has any body any suggestions how to achieve AOS effect in hubspot

Reply
0 Upvotes
4 Replies 4
Highlighted
New Contributor

I think its definately the template causing the problem with it adding no_js class to the html

 

Is it the boilerplate being added

 

I could try to strip it out with jquery?

 

Yep i added html removeclass and the Aos works

 

So my question is how can make sure the template doesnt call the html class no-js

 

I added/linked a js file via the template

 

Or is there a better way of 

 

Reply
0 Upvotes
Highlighted
Regular Contributor

Any working link you can share which will help understand the structure better.I have used aos before and it has worked for me.

Reply
0 Upvotes
Highlighted
New Contributor

Thanks Vish

Here the wip http://hubspot-developers-wx3j2y-5136573.hs-sites.com/vistair-test-homepage

I do have AOS working at the moment but only if a manual remove the boilerplate no-js class with a jquery removeclass action

 

The html class no-js is affecting the AOS css library

 

So i am wondering how i inadvertedly activated the no-js class in the firstplace?

Please note i have used add js file within the script

Reply
0 Upvotes
Highlighted
Regular Contributor | Gold Partner

@simonp I got AOS to work by adding require calls to the head section and the calling init just before the closing body tag (after the standard_footer_includes) in my layout file.

 

Also, try adding refreshHard() in a window.load() which will re-init array with AOS elements and trigger AOS's refresh (called on DOM changes that are related to aos elements)

 

Code example below:

 

<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
  <head>
    ...
    {# AOS #}
    {{ require_css("https://unpkg.com/aos@next/dist/aos.css") }}
    {{ require_js("https://unpkg.com/aos@next/dist/aos.js") }}
    ....
  </head>
  <body>
    ...
    {{ standard_footer_includes }}
    {% require_js %}
      <script>        
        AOS.init({        
          // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
          offset: 120, // offset (in px) from the original trigger point
          delay: 0, // values from 0 to 3000, with step 50ms
          duration: 800, // values from 0 to 3000, with step 50ms
          easing: 'ease', // default easing for AOS animations
          once: false, // whether animation should happen only once - while scrolling down
          mirror: false, // whether elements should animate out while scrolling past them
          anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation        
        });     
        $(document).on('ready', function() {                  
          $('.image-animate').attr('data-aos', 'fade-up');
        });      
        $(window).on('load', function() {          
          AOS.refreshHard();
        });           
      </script>
    {% end_require_js %}    
  </body>
</html>