Given a template (from tailwinds) I animated some elements of the page on scroll by using a third-party library called AOS.
- Importing and using a third-party library
- Importance on how scripts are loaded (using
asyncanddeferattributes for<script>):- We use
asyncif we don't care about execution order or if the script does not depend on another script. - We use
deferat the beginning of the document, in the<head>element because we want to download the JS as soon as possible but we don't want it to be executed until all html is parsed 👉🏻 Usedeferfor scripts that have to be used once all html has been parsed
- We use
- Animating elements on a page on scroll
This project was simple. I was using a landing template from tailwinds css and I followed the documentation of AOS library to add some smooth animations to some elements of the page.
-
Icons from Font Awesome
-
Images from Unsplash
-
Template and CSS from Tailwinds
-
User pictures from Random user
-
Animations from AOS library