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

New Contributor

Hello I wonder if any one can help me

I am trying to use the AOS animate library


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 see if that helps?


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

4 Replies 4
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 


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.

New Contributor

Thanks Vish

Here the wip

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

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 }}>
    {# AOS #}
    {{ require_css("") }}
    {{ require_js("") }}
    {{ standard_footer_includes }}
    {% require_js %}
          // 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() {          
    {% end_require_js %}