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 Create and add a JavaScript file to HubSpot see if that helps?
Has any body any suggestions how to achieve AOS effect in hubspot
@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>
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?
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?
Do you have an idea to fix that issue?