Wrote my first line of code in late October 2019. #learntocode@32yr.
Currently an Irregular at River Valley. Mostly self-taught. Learned a lot reading the internet, and just playing.
Hi! This is an awesome article on AOS with Angular. Your explanation is clear and easy to understand. I managed to use it successfully in my project. But, I am facing issue using AOS for Angular SSR/universal.
Wrote my first line of code in late October 2019. #learntocode@32yr.
Currently an Irregular at River Valley. Mostly self-taught. Learned a lot reading the internet, and just playing.
Love the article. Got it working very easily, but it seems to only be working on the divs that are on the screen initially and does not animate when I scroll down the page. Is there a separate setting I need to add to get it to work as I scroll?
Sorry for late replies. I had been trying to recreate the issue but I can't. Can you please re-confirm if you did all the configurations correct and check your console as you scroll should incase it could trigger an error message to assist in debugging.
Also you can checkout this settings:
AOS.init();
// You can also pass an optional settings object
// below listed default settings
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// 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: 400, // 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
});
Hi! This is an awesome article on AOS with Angular. Your explanation is clear and easy to understand. I managed to use it successfully in my project. But, I am facing issue using AOS for Angular SSR/universal.
Is this something you can help with?
Thank you
What problem are you facing in particular ?
Im, good thank you managed to solved it. Cheers~!
Alright, glad to hear. Sorry for the late response. Happy coding!!
I have the same issue I think, how did you managed to solved it?
Hello Ignace, What error in particular did you get?
Love the article. Got it working very easily, but it seems to only be working on the divs that are on the screen initially and does not animate when I scroll down the page. Is there a separate setting I need to add to get it to work as I scroll?
Hi Brandon, thanks alot. If I get you correctly, you're saying the animations aren't firing as you scroll on divs/elements that had not been in view?
That is correct.
Sorry for late replies. I had been trying to recreate the issue but I can't. Can you please re-confirm if you did all the configurations correct and check your console as you scroll should incase it could trigger an error message to assist in debugging.
Also you can checkout this settings:
Try (startEvent: 'scroll) in the AOS.init({. This way it will fire when scrolling.