topic Re: Animate on scroll library - not being called due html no-js class being added by template in CMS Development

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

simonp — Mon, 13 Jul 2020 22:05:28 GMT

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

Re: Animate on scroll library

simonp — Mon, 13 Jul 2020 22:26:26 GMT

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

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

vish891 — Tue, 14 Jul 2020 13:33:48 GMT

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

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

simonp — Tue, 14 Jul 2020 13:40:13 GMT

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

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

daveroma — Tue, 14 Jul 2020 14:49:08 GMT

@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>

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

VBebensee — Thu, 15 Dec 2022 14:20:27 GMT

Hi David, I wants to use the AOS as well but it works in a crazy way. First time you scroll down, the animation doesn´t starts but if you scroll back to the top and down, after that the animation works fine. What is the problem?

Thats the landing-page: https://warum.crm-solutions-gmbh.de/bewerbermanagement

Thx a lot

Volker

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

VBebensee — Thu, 15 Dec 2022 15:48:55 GMT

Hi David, I found the issue....if I type <div data-aos="fade-right">, the cms editor automatically write this <div data-aos="fade-right" class="aos-init aos-animate">. If I delete "aos-animate" and safe "aos-animate" comes back. So HubSpot writes this second class 😞 Do you have an idea to fix that issue?

Thanks for your support

Volker