{"id":242456,"date":"2016-06-06T06:06:14","date_gmt":"2016-06-06T13:06:14","guid":{"rendered":"http:\/\/css-tricks.com\/?p=242456"},"modified":"2017-04-10T17:48:11","modified_gmt":"2017-04-11T00:48:11","slug":"aos-css-driven-scroll-animation-library","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/aos-css-driven-scroll-animation-library\/","title":{"rendered":"AOS: CSS-Driven &#8220;On Scroll&#8221; Animation Library"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by <a href=\"https:\/\/github.com\/michalsnik\" rel=\"noopener\">Micha\u0142 Sajn\u00f3g<\/a>, a front end developer at <a href=\"http:\/\/netguru.co\/\" rel=\"noopener\">Netguru<\/a>. Micha\u0142 has created one of those &#8220;when you scroll to here, trigger this animation&#8221; libraries. One of the things I like about it is that it leaves as much as it can to CSS for creating and controlling the animation themselves. Not to mention it&#8217;s proved itself by working well on a number of production sites. I&#8217;ll let Micha\u0142 walk you through it.<\/em><\/p>\n<p><!--more--><\/p>\n<p>Have you ever seen those long web pages where different animations are being applied as you scroll down? I\u2019d like to share with you a plugin I wrote that makes it really easy to handle all kinds of animations with full CSS control and no pain.<\/p>\n<p>If you&#8217;d like to get right into it, <a href=\"http:\/\/michalsnik.github.io\/aos\/\" rel=\"noopener\">the code is on GitHub.<\/a><\/p>\n<h3>The Problem With Other Libraries<\/h3>\n<p>In my previous company we were using <a href=\"http:\/\/mynameismatthieu.com\/WOW\/\" rel=\"noopener\">WOW.js<\/a> (or other similar libraries) to animate elements on scroll. For simple projects it was quite nice, but on larger sites we wanted to have more control over what\u2019s actually happening. In all of popular libraries, animations were completely handled by JavaScript by inserting inline CSS. Arghgh! Inline styles are evil. They are hard to control and override. Though, in some cases it\u2019s ok to set them using JavaScript, it\u2019s still much cleaner to just leave them where they belong and handle all CSS related things inside CSS file.<\/p>\n<p>I decided to create a library that has a pure goal &#8211; detect position of elements and then add appropriate classes when they appear in viewport.<\/p>\n<h3>Controlling Animations Entirely in CSS<\/h3>\n<p>I wanted to split the responsibilities with my new library:<\/p>\n<ul>\n<li>Have all the logic inside the JavaScript<\/li>\n<li>Have all the animations in the CSS<\/li>\n<\/ul>\n<p>This allows you to add your own animations easily, and do things like change them according to the viewport.<\/p>\n<h3>How AOS Works<\/h3>\n<p>The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add\/remove the class <code>aos-animate<\/code>. Of course, in practice, it\u2019s not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.<\/p>\n<h3>Example Animations in CSS<\/h3>\n<p>The are lots of different animations ready to use out of the box, but creating new ones is simple also. Here&#8217;s an example:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">[aos=\"fade\"] {\r\n  opacity: 0;\r\n  transition-property: opacity;\r\n}\r\n\r\n[aos=\"fade\"].aos-animate {\r\n  opacity: 1;\r\n}<\/code><\/pre>\n<p>You don\u2019t have to worry about duration or delay. In the CSS, you only: <\/p>\n<ul>\n<li>add styles for the attribute <code>aos<\/code> with the name of your animation<\/li>\n<li>set the <code>transition-property<\/code> (by default this is <code>all<\/code>, so it\u2019s more performant and more predictable if you narrow the transition to the intended properties)<\/li>\n<li>add the post-transition properties on <code>.aos-animate<\/code><\/li>\n<\/ul>\n<p>Things like duration\/delay\/easing are set independently of the animation.<\/p>\n<h3>Example HTML<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"some-item\" aos=\"fade\"&gt;Example Element&lt;\/div&gt;<\/code><\/pre>\n<p>or with a different transition duration:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"some-item\" aos=\"fade\" aos-duration=\"500\"&gt;Example Element&lt;\/div&gt;<\/code><\/pre>\n<p class=\"explanation\">**Tip:** You can use <code>data-aos<\/code> instead of <code>aos<\/code> to make your HTML validate properly.<\/p>\n<h3>Live Demos<\/h3>\n<p>With different animations:<\/p>\n<p data-preview=\"true\" data-height=\"425\" style=\"height: 425px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"WxNdvq\" data-default-tab=\"html,result\" data-user=\"michalsnik\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/michalsnik\/pen\/WxNdvq\/\" rel=\"noopener\">AOS &#8211; animations<\/a> by Snik (<a href=\"http:\/\/codepen.io\/michalsnik\" rel=\"noopener\">@michalsnik<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>With anchor setting in use:<\/p>\n<p data-preview=\"true\" data-height=\"477\" style=\"height: 477px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"jrOYVO\" data-default-tab=\"result\" data-user=\"michalsnik\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/michalsnik\/pen\/jrOYVO\/\" rel=\"noopener\">AOS &#8211; anchor<\/a> by Snik (<a href=\"http:\/\/codepen.io\/michalsnik\" rel=\"noopener\">@michalsnik<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>With anchor placement and different easing:<\/p>\n<p data-preview=\"true\" data-height=\"440\" style=\"height: 440px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"EyxoNm\" data-default-tab=\"result\" data-user=\"michalsnik\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/michalsnik\/pen\/EyxoNm\/\" rel=\"noopener\">AOS &#8211; anchor &#038; anchor-placement<\/a> by Snik (<a href=\"http:\/\/codepen.io\/michalsnik\" rel=\"noopener\">@michalsnik<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>With simple custom animations:<\/p>\n<p data-preview=\"true\" data-height=\"416\" style=\"height: 416px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"WxvNvE\" data-default-tab=\"result\" data-user=\"michalsnik\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/michalsnik\/pen\/WxvNvE\/\" rel=\"noopener\">AOS &#8211; custom animations<\/a> by Snik (<a href=\"http:\/\/codepen.io\/michalsnik\" rel=\"noopener\">@michalsnik<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Additional Features<\/h3>\n<ul>\n<li><strong>anchor<\/strong> &#8211; Animate one element based on position of other element<\/li>\n<li><strong>anchor placement<\/strong> &#8211; Animate an element based on it\u2019s position on the screen. It doesn\u2019t have to animate only when it appears in viewport, but for example when bottom part of it hits middle of the screen<\/li>\n<li><strong>both way animations<\/strong> &#8211; By default elements animate while you scroll up and down, but you can force it to animate only once<\/li>\n<li><strong>easy disabling<\/strong> &#8211; Disable animations on mobile devices using predefined options like <code>mobile<\/code>, <code>phone<\/code>, <code>tablet<\/code> or with a custom condition\/function<\/li>\n<li><strong>async aware<\/strong> &#8211; Recalculates positions of elements on DOM changes, so after loading something using Ajax, you don\u2019t have to worry about anything (unless you support IE9, because it needs mutation observer)<\/li>\n<li><strong>no dependencies<\/strong> &#8211; This library is written in pure JS and doesn\u2019t rely on any dependencies<\/li>\n<\/ul>\n<p>AOS is fully open source, so if you have an interesting idea or something is not working how you\u2019d expect open issue and see you <a href=\"https:\/\/github.com\/michalsnik\/aos\" rel=\"noopener\">on GitHub<\/a>! Any contribution is highly appreciated.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Micha\u0142 Sajn\u00f3g, a front end developer at Netguru. Micha\u0142 has created one of those &#8220;when you scroll to here, trigger this animation&#8221; libraries. One of the things I like about it is that it leaves as much as it can to CSS for creating and controlling the animation [&hellip;]<\/p>\n","protected":false},"author":242482,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[612,754],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":343893,"url":"https:\/\/css-tricks.com\/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines\/","url_meta":{"origin":242456,"position":0},"title":"Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines","date":"July 19, 2021","format":false,"excerpt":"The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline property this specification provides, you can control the time position of regular CSS Animations by scrolling. In this post, we'll take a look at some practical use cases where scroll-linked animations\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/css-scroll-timeline-parallax.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312080,"url":"https:\/\/css-tricks.com\/an-overview-of-scroll-technologies\/","url_meta":{"origin":242456,"position":1},"title":"An Overview of Scroll Technologies","date":"June 22, 2020","format":false,"excerpt":"Scroll-related animations have been used on the web for years. In recent years, they\u2019ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation.\u00a0 There are a number of scroll-related technologies out there, so this article\u2019s aim is to provide\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":355060,"url":"https:\/\/css-tricks.com\/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline\/","url_meta":{"origin":242456,"position":2},"title":"Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline","date":"November 4, 2021","format":false,"excerpt":"The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you scroll up and down a scroll container, a linked animation also advances or rewinds accordingly. We covered some use cases in a previous piece here on CSS-Tricks, all driven by\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333209,"url":"https:\/\/css-tricks.com\/greensock-scrolltrigger\/","url_meta":{"origin":242456,"position":3},"title":"GreenSock ScrollTrigger","date":"January 28, 2021","format":false,"excerpt":"High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions, as well as when certain elements are in the viewport. Anything you'd want configurable about it, is. There's been plenty of scroll-position libraries over\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/gsap-scrolltrigger.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366509,"url":"https:\/\/css-tricks.com\/choosing-an-animation-library-for-solitaire\/","url_meta":{"origin":242456,"position":4},"title":"How I Chose an Animation Library for My Solitaire Game","date":"June 29, 2022","format":false,"excerpt":"There is an abundance of both CSS and JavaScript libraries for animation libraries out there. So many, in fact, that choosing the right one for your project can seem impossible. That's the situation I faced when I decided to build an online Solitaire game. I knew I'd need an animation\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/solitaire-anime-gsap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358975,"url":"https:\/\/css-tricks.com\/empathetic-animation\/","url_meta":{"origin":242456,"position":5},"title":"Empathetic Animation","date":"December 29, 2021","format":false,"excerpt":"Animation on the web is often a contentious topic. I think, in part, it\u2019s because bad animation is blindingly obvious, whereas well-executed animation fades seamlessly into the background. When handled well, animation can really elevate a website, whether it\u2019s just adding a bit of personality or providing visual hints and\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-29-at-8.07.40-AM.png?fit=1200%2C761&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242456"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/242482"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=242456"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242456\/revisions"}],"predecessor-version":[{"id":242553,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242456\/revisions\/242553"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=242456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=242456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=242456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}