npm aos code example
Example 1: aos
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
Example 2: aos js cdn
CSS
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
JS
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
INITIALIZE AOS:
<script>
AOS.init();
</script>
Example 3: install aos angular 10
//install
npm install aos --save
//inside the angular.json inside of 'build', look for the 'styles' and 'scripts'
//inside them add:
styles: [... "node_modules/aos/dist/aos.css"]
scripts: [... "node_modules/aos/dist/aos.js"]
//to add AOS for the entire project, at the top of app.component.ts add:
import * as AOS from 'aos';
ngOnInit(){
AOS.init();
}
Example 4: aos animation manual seting
[data-aos="new-animation"] {
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
transform: translateX(100px);
&.aos-animate {
transform: translateX(0);
}
}
}