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 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

// 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 animation

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

Source: michalsnik.github.io

Similar codes

23 votes119 views6 answers
Bootstrap navigation bar
Html
0 vote122 views1 answer
Object is possibly 'null' in $event.target.value in angular 12
Html
0 vote115 views1 answer
Hide html element while keeping it's space
Html
78 votes145 views4 answers
Javascript get input value by id
Html
12 votes119 views2 answers
How to embed an image in html
Html
0 vote121 views1 answer
Input hidden selected
Html
0 vote118 views1 answer
Routerlinkactiveoptions
Html
0 vote114 views1 answer
Chrome devtools filter exclude
Html
0 vote116 views1 answer
Ps -aux | grep pid | kill
Html
9 votes120 views3 answers
Change highlight color html
Html