Animation usind AOS library
This is an example website to demonstrate the use of AOS library to add animation in a webpage.
๐ก Important links
๐ Instalation
๐ Basic
- Add styles in
<head>
:<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
- Add script right before closing
</body>
tag, and initiazile ASO:<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>
๐ Using package managers
- Install
aos
package:yarn add aos@next
- or
npm install --save aos@next
- Import script, style and initialize AOS:
import AOS from 'aos'; import 'aos/dist/aos.css'; // You can also use <link> for styles // .. AOS.init();
In order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly. If you're using Parcel however, it will work out of the box as provided.
๐ก Predefined options
Animations
-
Fade animations:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
-
Flip animations:
- flip-up
- flip-down
- flip-left
- flip-right
-
Slide animations:
- slide-up
- slide-down
- slide-left
- slide-right
-
Zoom animations:
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
Anchor placements:
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
Easing functions:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart