+91 9422537131 | info@adhvik.online |
Sports Sagaa | Simplicity Global Services Register
01 Dec 19 by Administrator 219

 Set animation using data-aos attribute:

  <div data-aos="fade-in"></div>

And adjust behaviour by using data-aos-* attributes:

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

Anchor

There is also a setting that can be used only on per-element basis:

  • data-aos-anchor - element whose offset will be used to trigger animation instead of an actual one.

Examples:

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

This way you can trigger animation on one element, while you scroll to another - useful in animating fixed elements.

You can also tell AOS to trigger custom event on specific element, by setting data-aos-id attribute:

<div data-aos="fade-in" data-aos-id="super-duper"></div>

Then you'll be able to listen for two custom events then:

  • aos:in:super-duper
  • aos:out:super-duper

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
Tags:
Share Post
by 495
Search Post Office Details By PIN Code http://www.postalpincode.in/Search-By-PIN-Code
by 277
Super Admin : Defined for developer and application other implementation to show some information required during development of the application. Admin : Definded for client only. Other roles as per
03 Oct 19 by Administrator 177
2019 standards thanks to faviconit I use faviconit.com for the best browser and device support possible. You upload an image and this site gives you the code, the converted images and
by 272
<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-70404856-1"></script><script>window.dataLayer = window.da
by 269
Add the following nos to the data-formview="1" etc to the link View Only List and View Only Entry Only Entry First on update go to List List Only List First on Edit or Add go to Entry Show Bo
12590

We are simpliy creative. We create stunning identities for our clients that people recommand.

Login
×
Remember me
Forgot password?