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?
jul 14, 202010:48 AM - editado jul 14, 202010:49 AM
Top colaborador(a) | Parceiro Platinum
Animate on scroll library - not being called due html no-js class being added by template
resolver
@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>
Dave Roma, HubSpot CMS Developer
Build a revenue generating website on HubSpot without a developer using The Generator Theme
jul 14, 202010:48 AM - editado jul 14, 202010:49 AM
Top colaborador(a) | Parceiro Platinum
Animate on scroll library - not being called due html no-js class being added by template
resolver
@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>
Dave Roma, HubSpot CMS Developer
Build a revenue generating website on HubSpot without a developer using The Generator Theme
Animate on scroll library - not being called due html no-js class being added by template
resolver
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?
dez 15, 20228:28 AM - editado dez 15, 20229:20 AM
Colaborador(a)
Animate on scroll library - not being called due html no-js class being added by template
resolver
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?
