{"id":4051,"date":"2020-03-06T06:28:00","date_gmt":"2020-03-06T06:28:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4051"},"modified":"2020-03-15T07:19:47","modified_gmt":"2020-03-15T07:19:47","slug":"aos-a-free-javascript-library-to-easily-animate-website-elements-on-scroll","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/aos-a-free-javascript-library-to-easily-animate-website-elements-on-scroll\/","title":{"rendered":"AOS: A Free Javascript Library To Easily Animate Website Elements on Scroll"},"content":{"rendered":"\n<p>With free\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/michalsnik.github.io\/aos\/\" target=\"_blank\">AOS Library<\/a>, beautifying your website is as simple as adding a script. Just use a CDN or a package manager to install the JavaScript and CSS files, and insert a few lines of code. Then crafting animations will be a breeze.<\/p>\n\n\n\n<p>On-scroll animations can add quite the elegant effect to your website. A little animated polish can go a long way towards making your site look well-rounded and complete. With this JS library, you can make elements fade, slide, or even spin as they appear when you\u00a0scroll down\u00a0a page.<\/p>\n\n\n\n<p>Now, We\u2019ll show you how to set it up right here, and we&#8217;ve also provided some nice examples of AOS experiments in action.<\/p>\n\n\n\n<h3>Install using YARN, NPM, BOWER<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn add aos<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install aos --save<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>bower install aos --save<\/code><\/pre>\n\n\n\n<h3>CDN Sources<\/h3>\n\n\n\n<h4>CSS<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\n<h4>JS<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<h3>Initialize AOS<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n\u00a0\u00a0AOS.init();\n&lt;\/script><\/code><\/pre>\n\n\n\n<h2>AOS Experiments and Examples<\/h2>\n\n\n\n<p>The best way to learn a new library is by seeing the code in action, and that\u2019s why sites like CodePen are so valuable. Check out the snippets below, and you\u2019ll be able to see working AOS JavaScript alongside the output. You can even tweak the code in real time. Then use the knowledge you gain to build your own awesome animations!<\/p>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/skeezrocco\/pen\/wvBeRvN\" target=\"_blank\">01. Model<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Model\" id=\"cp_embed_wvBeRvN\" src=\"https:\/\/codepen.io\/skeezrocco\/embed\/preview\/wvBeRvN?height=300&amp;slug-hash=wvBeRvN&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/oltika\/pen\/vXdJbx\" target=\"_blank\">02. AOS: Animate On Scroll Library<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AOS  Animate On Scroll Library\" id=\"cp_embed_vXdJbx\" src=\"https:\/\/codepen.io\/oltika\/embed\/preview\/vXdJbx?height=300&amp;slug-hash=vXdJbx&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/michalsnik\/pen\/WxNdvq\" target=\"_blank\">03. AOS: Animations<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AOS - animations\" id=\"cp_embed_WxNdvq\" src=\"https:\/\/codepen.io\/michalsnik\/embed\/preview\/WxNdvq?height=300&amp;slug-hash=WxNdvq&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/michalsnik\/pen\/jrOYVO\" target=\"_blank\">04. AOS: Anchor<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AOS - anchor\" id=\"cp_embed_jrOYVO\" src=\"https:\/\/codepen.io\/michalsnik\/embed\/preview\/jrOYVO?height=300&amp;slug-hash=jrOYVO&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/michalsnik\/pen\/EyxoNm\" target=\"_blank\">05. AOS: Anchor &amp; Anchor-Placement<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AOS - anchor &amp; anchor-placement\" id=\"cp_embed_EyxoNm\" src=\"https:\/\/codepen.io\/michalsnik\/embed\/preview\/EyxoNm?height=300&amp;slug-hash=EyxoNm&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/michalsnik\/pen\/WxvNvE\" target=\"_blank\">06. AOS: Custom Animations<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AOS - custom animations\" id=\"cp_embed_WxvNvE\" src=\"https:\/\/codepen.io\/michalsnik\/embed\/preview\/WxvNvE?height=300&amp;slug-hash=WxvNvE&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/SitePoint\/pen\/pPYLvL\" target=\"_blank\">07. AOS Examples: Disable Animations<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Animate on Scroll Examples - Disable Animaions\" id=\"cp_embed_pPYLvL\" src=\"https:\/\/codepen.io\/SitePoint\/embed\/preview\/pPYLvL?height=300&amp;slug-hash=pPYLvL&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/WAWI\/pen\/BPVyZp\" target=\"_blank\">08. AOS JS<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AOS JS\" id=\"cp_embed_BPVyZp\" src=\"https:\/\/codepen.io\/WAWI\/embed\/preview\/BPVyZp?height=300&amp;slug-hash=BPVyZp&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/Artem91\/pen\/eYmBXLe\" target=\"_blank\">09. Movie<\/a><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Movie\" id=\"cp_embed_eYmBXLe\" src=\"https:\/\/codepen.io\/Artem91\/embed\/preview\/eYmBXLe?height=300&amp;slug-hash=eYmBXLe&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Scroll Effects Made Easy<\/h2>\n\n\n\n<p>Thanks to JavaScript libraries like AOS, creating websites with beautiful animations isn\u2019t such a huge deal. It might take a bit to learn the ins and outs of a library, especially if you\u2019re a beginner, but it makes the whole process a lot more accessible to new web developers. And it means that you don\u2019t have to create it yourself from scratch.<\/p>\n\n\n\n<p>If you\u2019re looking for a library that makes elegant\u00a0scroll effects\u00a0a breeze to implement, definitely consider trying AOS. It\u2019s simple to install and even easier to learn, so you can have on-scroll animations up and running in a snap.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Official Plugin Page<\/strong>: <a href=\"https:\/\/github.com\/michalsnik\/aos\">GitHub<\/a><\/p><p><strong>Demo<\/strong>: <a href=\"http:\/\/michalsnik.github.io\/aos\/\">Link<\/a><\/p><p><strong>Download<\/strong>: <a href=\"https:\/\/github.com\/michalsnik\/aos\/archive\/next.zip\">Link<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>With free\u00a0AOS Library, beautifying your website is as simple as adding a script. Just use a CDN or a package manager to install the JavaScript and CSS files, and insert a few lines of code. Then crafting animations will be a breeze. On-scroll animations can add quite the elegant effect to your website. A little [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":4052,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,12],"tags":[93,25,146,87,90],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/aos-library.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-13l","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4051"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4051"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4051\/revisions"}],"predecessor-version":[{"id":4464,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4051\/revisions\/4464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4052"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}