{"id":18862,"date":"2022-09-28T09:11:35","date_gmt":"2022-09-28T07:11:35","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=18862"},"modified":"2022-09-28T09:11:36","modified_gmt":"2022-09-28T07:11:36","slug":"scroll-triggered-animations","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/","title":{"rendered":"Scroll-Triggered Animations: Do’s and Don’ts"},"content":{"rendered":"\n

A scroll-triggered animation is an amazing way to engage users visiting your webpage or app. They add storytelling, help in drawing user attention into where you want it, and can be visually stunning and creative.<\/p>\n\n\n\n

Scroll-triggered animations are also known as AOS (Animate On Scroll) andm basically, they allow users to you to give life to different elements as they scroll up and down<\/strong>. Generally, scrolling down enables the animation, and scrolling up brings them back to their original “closed” state.<\/p>\n\n\n\n

Knowing how to use this can be a key asset in any web designer’s skill set<\/a>, but there are many things to consider. When to use them and what for? When NOT to use them<\/strong>? How to use these animations? Which are the best libraries? Are they accessible and natural or maybe you’re creating something that can harm the UX? Find answers to these questions in the video below!<\/p>\n\n\n\n

[jwp-video n=”1″]<\/p>\n\n\n\n

More about scroll-triggered animations<\/strong><\/p>\n\n\n\n

The best way to create scroll triggered animations is to find the right libraries for them. Of course, this requires some testing and exploration on the dev’s part, as not all libraries work everywhere, and some of them are designed for specific purposes, but here are some Libraries that are a good starting point.<\/p>\n\n\n\n

Vivus.JS<\/a>: Allows to animate SVGs.
AOS <\/a>(Animate on Scroll Library): includes options like flip, zoom, fade, and more.
Sal.js<\/a>: limited but a great starting point for beginners! Lightweight.
GSAP scroll trigger<\/a>: very complete, stable, and great performance!
<\/p>\n\n\n\n

About Cassie Evans<\/strong><\/p>\n\n\n\n

Cassie defines herself as a creative developer with a background in graphic design and motion design. She got started with coding back in the days of Myspace and Neopets and is on a mission to make the web more whimsical again. She\u2019s a massive SVG nerd, owner of the world’s most clacky keyboard, and spends her days tinkering on codepen and helping people learn about web animation.<\/p>\n","protected":false},"excerpt":{"rendered":"

A scroll-triggered animation is an amazing way to engage users visiting your webpage or app. They add storytelling, help in drawing user attention into where you want it, and can be visually stunning and creative. Scroll-triggered animations are also known as AOS (Animate On Scroll) andm basically, they allow users to you to give life to… Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":18868,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":1,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[76],"tags":[6236],"collections":[],"class_list":{"0":"post-18862","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design-ux","8":"tag-web-developer","9":"entry"},"yoast_head":"\nScroll-Triggered Animations: Do's and Don'ts - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Scroll-triggered animations are cool, right? But there are some things to consider before using them. Watch this video to discover more!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll-Triggered Animations: Do's and Don'ts\" \/>\n<meta property=\"og:description\" content=\"Scroll-triggered animations are cool, right? But there are some things to consider before using them. Watch this video to discover more!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-28T07:11:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-28T07:11:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\"},\"headline\":\"Scroll-Triggered Animations: Do’s and Don’ts\",\"datePublished\":\"2022-09-28T07:11:35+00:00\",\"dateModified\":\"2022-09-28T07:11:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/\"},\"wordCount\":326,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/web-design-scaled.jpg\",\"keywords\":[\"Web Developer\"],\"articleSection\":[\"Design\\\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/\",\"name\":\"Scroll-Triggered Animations: Do's and Don'ts - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/web-design-scaled.jpg\",\"datePublished\":\"2022-09-28T07:11:35+00:00\",\"dateModified\":\"2022-09-28T07:11:36+00:00\",\"description\":\"Scroll-triggered animations are cool, right? But there are some things to consider before using them. Watch this video to discover more!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/web-design-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/web-design-scaled.jpg\",\"width\":2560,\"height\":1440,\"caption\":\"scroll-triggered animation, project IDX, visual studio code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/scroll-triggered-animations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design\\\/UX\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/design-ux\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Scroll-Triggered Animations: Do’s and Don’ts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/CodemotionIT\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/codemotion-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Scroll-Triggered Animations: Do's and Don'ts - Codemotion Magazine","description":"Scroll-triggered animations are cool, right? But there are some things to consider before using them. Watch this video to discover more!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/","og_locale":"en_US","og_type":"article","og_title":"Scroll-Triggered Animations: Do's and Don'ts","og_description":"Scroll-triggered animations are cool, right? But there are some things to consider before using them. Watch this video to discover more!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-09-28T07:11:35+00:00","article_modified_time":"2022-09-28T07:11:36+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"Scroll-Triggered Animations: Do’s and Don’ts","datePublished":"2022-09-28T07:11:35+00:00","dateModified":"2022-09-28T07:11:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/"},"wordCount":326,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg","keywords":["Web Developer"],"articleSection":["Design\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/","name":"Scroll-Triggered Animations: Do's and Don'ts - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg","datePublished":"2022-09-28T07:11:35+00:00","dateModified":"2022-09-28T07:11:36+00:00","description":"Scroll-triggered animations are cool, right? But there are some things to consider before using them. Watch this video to discover more!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg","width":2560,"height":1440,"caption":"scroll-triggered animation, project IDX, visual studio code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/scroll-triggered-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Design\/UX","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/"},{"@type":"ListItem","position":4,"name":"Scroll-Triggered Animations: Do’s and Don’ts"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg",2560,1440,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-2048x1152.jpg",2048,1152,true],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-scaled.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/09\/web-design-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"A scroll-triggered animation is an amazing way to engage users visiting your webpage or app. They add storytelling, help in drawing user attention into where you want it, and can be visually stunning and creative. Scroll-triggered animations are also known as AOS (Animate On Scroll) andm basically, they allow users to you to give life to……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=18862"}],"version-history":[{"count":6,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18862\/revisions"}],"predecessor-version":[{"id":18876,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18862\/revisions\/18876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/18868"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=18862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=18862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=18862"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=18862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}