Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    Michał Sajnóg
    @sydekumf There is an option called once, you can use it on specific element using data-aos-once="true" or globally:
        once: true
    @Greenscreener You're probably trying to initialize AOS when there is no body in DOM yet. You can wrap it with DOMContentLoaded event or even better just put right before </body>
    Chirayu sharma
    how to use it in reverse direction ?
    I'm trying to use it for bottom to top scroll
    i can't get it to work with react :( . has anyone been able to do it?
    Michał Sajnóg
    @Chirayusharma09_twitter it hasn't been implemented yet. Check out open PR - it's about the thing you need I think.

    @Java-Jonas it works with react, try to:

    import AOS from 'aos';

    in your top parent component and it should be all good. If not - try to prepare demo presenting your problem with source code so I can check if there is actually a problem with AOS. I already tried to use it with react and worked perfectly fine though :)

    Paul Gilligan
    @Chirayusharma09_twitter Yes... reverse direction - I want to start with an element visible and for it to disappear on scroll. Have tried writing my own custom but can't seem to get it hooked up properly.
    Zakhar Kurasov
    Heelo, why when I set delay >= 3000, it doesn't work?
    Michał Sajnóg
    @NexiePrado "*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases."
    If you need wider range of delays check out whole README, there is an example how to do this ;)
    @brothergilligan I'm waiting for a response in this PR michalsnik/aos#41
    Is there a way to use it with Horizontal scrolling? @michalsnik
    Sergio Forés
    nice project! I'm playing with it but it does not run. AOS.init();
    Sergio Forés
    the css and js loads well on the DOM. I imagine the problem is in the init(). ;(
    error: AOS is not defined¿?
    any help would be appreciated. Thanks in advance.
    Sergio Forés
    Problem solved! ;)
    Sergio Forés
    How can I (hide on scroll) instead of (reveal on scroll)? thanks
    I have a header on the very top and its hard to hide on scroll...
    Hey there, is there a fallback option for AOS, in case javascript is disabled?
    Shihab-Ul Haque
    anybody there to help me setup AOS?
    Pedro Martin
    Hi @shihab0915 you can use a CDN to plugin in https://cdnjs.com/libraries/aos
    Thomas Grainger
    @pataruco unpkg is a bit more flexible https://unpkg.com/aos@2.1.1/dist/aos.js
    @michalsnik can you look at my PR?
    Shihab-Ul Haque
    Thank you for your reply @pataruco
    Pedro Martin
    No problem @shihab0915 , thanks @graingert
    Abishek Thangapandi
    i use aos on my web designing project. I desktop browsers there is no problem occured.. but in mobile version of my website not rendering the animation correctly on firefox mobile browser. but other mobile browsers are render the animation correctly. is there any solution.. please help
    Akash Padhy
    Uncaught ReferenceError: AOS is not defined
    getting this on my dev server but working fine in my local machine
    @graingert can you help me on this
    Thomas Grainger
    @padhyakash uhh. Did you use webpack?
    Akash Padhy
    @graingert nope.. I don't use anything
    Thomas Grainger
    @padhyakash maybe give it a go
    Akash Padhy
    @graingert will try this too
    Thomas Grainger
    @padhyakash neato
    Can I use it commercially?
    it's free to use in commercial project?
    How to make a disappearance?
    Thomas Grainger
    @KANUMAY1_twitter if it's MIT then you can. Just remember to include the copyright notice
    🎶i identified user needs and i freaked it 🎶

    Hi there! I discovered aos yesterday and I'm in love. I've been using it to build my personal site but have been running into some issues.

    The big issue at the moment, is that aos works fine when I'm in local host but fails when i try to build and deploy. I get this
    `408 | */
    409 | var elements = (function () {

    410 | var elements = document.querySelectorAll('[data-aos]');
    | ^
    411 | return Array.prototype.map.call(elements, function (node) {
    412 | return { node: node };
    413 | });

    WebpackError: document is not defined

    • aos.cjs.js:410 elements

    • aos.cjs.js:538 Object.init

    • index.js:7 Object.<anonymous>

    • sync-requires.js:11 Object.exports.__esModule

    • static-entry.js:8 Object.<anonymous>
      .cache/static-entry.js:8:1 `

    My current set up is gatsby and netlify and its failing on the gatsby step for building static HTML . After reading Gatsby's documentation for this issue. I have found that I am using "you’re using an NPM module that expects window to be defined." ??
    Some other issues I have encountered is Visual Studio code keeps alerting me to this
    [ts] Could not find a declaration file for module 'aos'. '/Users/tolu/Desktop/dev/tolu-portfolio-v2/node_modules/aos/dist/aos.cjs.js' implicitly has an 'any' type. Trynpm install @types/aosif it exists or add a new declaration (.d.ts) file containingdeclare module 'aos';`
    Its not breaking anything but I thought i'd bring that up. Creating a typescript file aos.d.ts and putting declare module 'aos' seems to quiet it
    🎶i identified user needs and i freaked it 🎶
    Apologies for the wall of text. Its been really frustrating me the past few days and I've been debugging everything. Appreciate all help and the awesome awesome work that has been done so far on the aos library
    Oliver Rull
    Hi, can AOS be initialized via class name? I.e class="animatedAOS" or similar solution? Didn't quite get it from the docs or rather seemed as no.

    I am trying to add aos in my dependency to use animation but it shows this:-
    npm ERR! Linux 4.15.0-54-generic
    npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "--save" "aos"
    npm ERR! node v8.10.0
    npm ERR! npm v3.5.2
    npm ERR! code EHOSTUNREACH
    npm ERR! errno EHOSTUNREACH
    npm ERR! syscall connect

    npm ERR! connect EHOSTUNREACH

    how can I make it work in angular 9
    can anyone please tell me
    Hi! I have the animation on some elements and one of it has a hover animation. Whenever AOS is applied to it (parent div) the hover gets very glitchy
    Is there a way to fix this?