AOS animation demo

The fancy plugin which can make website active is easy to use. I insert the different images,but you can instead by anything you want,like words or vectors.

Make sure you link the stylesheet and script of AOS, and I also link the different font from Google Fonts.

Html contains ten divs which have same class name and different data-aos, which manipulate the animation style of each image.

All you have to do is to add data-aos attribute to html element, like so:

<div data-aos="animation_name">

There are serveral predefined animations you can use already:

• 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 placement:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

     Easing functions:

You can choose one of these timing function to animate elements nicely:

• 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

Css is not complicated, but I met the problem when I do it. First I wanna make the images responsive, so I style the image percentage,but it doesn't work(only first image shows animation). I tried many times and found out have to set the wiidth and height to the fixed size.

There are two ways to apply the AOS.First is setting in the html div which you want,like attributes. Second is global settings like above,using init().

AOS github https://github.com/michalsnik/aos

The demo I made with different images only: