Aos animation

Aos js

CSS
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

INITIALIZE AOS:
<script>
  AOS.init();
</script>

Aos animation

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
	duration: 1200,
});
</script>

Aos animate install

//install
npm install aos --save


//initialize in react

import AOS from 'aos'
import 'aos/dist/aos.css';
AOS.init();

Aos animation

// In your terminal
yarn add aos@next or npm install --save aos@next

// In your JS file
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();

// then, you can add data-aos attributes in your html

Aos css

/*Add styles in <head>: */

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

/*Add script right before closing </body> tag, and initialize AOS:*/
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Aos animation

<div data-aos="zoom-in-right"></div>

Source: michalsnik.github.io

Similar codes

0 vote157 views1 answer
Pourquoi mon css ne fonctionne pas quand je recharge la page
CSS
72 votes130 views6 answers
Absolute position center
CSS
86 votes131 views3 answers
Css tekst bold
CSS
1 vote136 views2 answers
Set an image half its original size css
CSS
10 votes153 views3 answers
Hiding text css and leaving whitespace
CSS
0 vote145 views1 answer
Cypress check css property value
CSS
1 vote157 views1 answer
Backgrond image shopify css
CSS
0 vote155 views1 answer
Css scroll height if screen too small
CSS
1 vote150 views1 answer
Tzutc
CSS
5 votes150 views2 answers
How to make a diamond with border radius
CSS