Aos: Animate.css integration

Created on 7 Jun 2016 · 22Comments · Source: michalsnik/aos

Going with the modular pattern of the animate-on-scroll practice, perhaps it would be a good idea to separate out the actual animation CSS, so it can be replaced with a dedicated animation library such as Animate.css.

feature request

Source

aalaap

👍37

Most helpful comment

Yeah, I totally agree @ErtugKaya. I'm really considering this in future releases.

Right now I'm sort of rewriting AOS using ES6 and webpack and preparing version 2.0.0.
It is possible that in this major release there will be an integration with animate.css

Stay tuned :)

michalsnik on 16 Jun 2016

🎉6 👍5

All 22 comments

I'm not sure if this is the way I'd like to evolve this library. Tough, possibilty of changing default animation stack with other popular animations library seems tempting. I'd be glad to see if it's something that other users will appreciate.

michalsnik on 7 Jun 2016

+1 for this feature.

Would be great to use animate.css as the animation library.

smachi on 7 Jun 2016

👍6

I am also for :+1:

After to see the perf :/

brandonsueur on 13 Jun 2016

animate.css is already doing a great job. there is no need to reinvent the wheel. You should provide simple animations and also a simple way to use animate.css or other animate libraries as well.

Many sites have already animate.css loaded in their pages for some other use. This will make all the animations consistent within the page.

ErtugKaya on 16 Jun 2016

👍7

Yeah, I totally agree @ErtugKaya. I'm really considering this in future releases.

Right now I'm sort of rewriting AOS using ES6 and webpack and preparing version 2.0.0.
It is possible that in this major release there will be an integration with animate.css

Stay tuned :)

michalsnik on 16 Jun 2016

🎉6 👍5

Not sure but is animate.css not quite large? Saw someone using wow.js + animate.css and using a single Animation from it. If you make it AOS work with animate.css please make it optional.
Or maybe I do not understand animate.css properly, any pointers? thanks!

cthedot on 24 Jun 2016

@cthedot, please mind that you may remove unused styles from css automatically with purifycss, uncss or similar if you are going to host it.

Alternatively, you can customize the build.

Otherwise many users would already have it cached if you load it from the CDN it is hosted, so indeed it won't be downloaded at all.

ErtugKaya on 24 Jun 2016

@cthedot don't worry. If there will be animate.css integration it will for sure be optional :)

michalsnik on 24 Jun 2016

I'm using aos animation library, its working fine, but i have some issues, please clear me. i have disable animations on mobile devices using this code
AOS.init({ easing: 'ease-out', duration: 1200 , disable: window.innerWidth < 769 });
disabling working fine. but on browser resize (from small to large window), how can i enable animations again.

Northout-Salman on 7 Sep 2016

@Northout-Salman Enabling again requires initializing AOS again. It's not possible to dynamically enable/disable AOS on runtime.

michalsnik on 29 Sep 2016

Hey Michalsnik, Thanks for the above info.

Northout-Salman on 30 Sep 2016

internetstyle on 16 Mar 2018

amojics on 21 Mar 2018

damreywil on 11 May 2018

I just had some time to work on this. I have the following prototype working.
Let me know what do you think about it:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style>
      [data-aos] {
        visibility: hidden;
      }
      [data-aos].animated {
        visibility: visible;
      }
    </style>
  </head>
  <body>
      <div class="item" data-aos="zoomInUp animated"></div>
      <div class="item" data-aos="zoomInUp animated"></div>
      <div class="item" data-aos="zoomInUp animated"></div>
      <div class="item" data-aos="zoomInUp animated"></div>
      <div class="item" data-aos="zoomInUp animated"></div>
      <div class="item" data-aos="zoomInUp animated"></div>
      <script src="aos.js"></script>
      <script>
        AOS.init({
          useClassNames: true,
        });
      </script>
  </body>
</html>

So it's essentialy an additional useClassNames setting, that on scroll sets passed to data-aos classes, instead of aos-animate. It allows to use any animation library without the need to use any AOS related styles. But it's also worth to mention that you should in this case also add extra CSS to hide those elements before target classes are set, so it's not blinking :)

michalsnik on 16 May 2018

With extra initClassName and animatedClassName even cleaner:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style>
      [data-aos] {
        visibility: hidden;
      }
      [data-aos].animated {
        visibility: visible;
      }
    </style>
  </head>
  <body>
      <div class="item" data-aos="zoomInUp"></div>
      <div class="item" data-aos="zoomInUp"></div>
      <div class="item" data-aos="zoomInUp"></div>
      <div class="item" data-aos="zoomInUp"></div>
      <div class="item" data-aos="zoomInUp"></div>
      <div class="item" data-aos="zoomInUp"></div>
      <script src="aos.js"></script>
      <script>
        AOS.init({
          useClassNames: true,
          initClassName: null,
          animatedClassName: 'animated',
        });
      </script>
  </body>
</html>

initClassName - class added right after AOS initialization
animatedClassName - class added after scrolling to trigger point
useClassNames - sets classes from data-aos attribute after scrolling to trigger point

animatedClassName and classes set in data-aos are merged, so it's easier to set-up libraries like Animate.css without having to duplicate animated on every element.

michalsnik on 16 May 2018

You can test it using this version:
https://cdn.rawgit.com/michalsnik/08df49a3d0c7ee90f843d20def0c3632/raw/f5c7ae6f5a4529a86693a91ff8b209f05bec118b/aos-next.js

I'm going to release official beta in few days probably.

michalsnik on 16 May 2018

🎉1

@michalsnik
Been playing around with this and the only issue is the abrupt exit. If you exit to re engage the animation (so scroll up) the element goes straight to hidden. I've tried to hack around and get it to be a smooth exit transition but haven't been successful so far.

Here's a quick demo of the issue: http://recordit.co/toGQRvActE (notice the form just goes straight to hidden)

It could be cool use case for an exit animation like data-aos-exit='fadeOut' which would add the class as it's exiting (and removing when re-entering)

randallmlough on 22 May 2018

Same thing is happening to me. To be able to set an exit animation would be helpful.
Or maybe just with animation-direction: reverse

smachi on 25 May 2018

I released current implementation as 3.0.0-beta.1, you can install it by pointing to next tag:
yarn add aos@next

Feel free to fork AOS and play with the proposition @randallmlough. I'm happy to see PRs to the next branch :) I'm going to focus now a little bit more on documentation and new, appealing demo.

michalsnik on 22 Jun 2018

good job

molysama on 26 Jun 2018

I'm closing this issue for now. It's still on the next branch, but I made it the default one for the time being. I also added recepies section with informations how to integrate 3rd party animation libraries. Feel free to open dedicated issue with exit class proposition and we'll go from there :)

michalsnik on 8 Jul 2018

Was this page helpful?

0 / 5 - 0 ratings