{"id":360550,"date":"2022-01-25T06:14:11","date_gmt":"2022-01-25T14:14:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=360550"},"modified":"2022-02-09T06:39:24","modified_gmt":"2022-02-09T14:39:24","slug":"scroll-triggered-animation-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scroll-triggered-animation-vanilla-javascript\/","title":{"rendered":"How to Make a Scroll-Triggered Animation With Basic JavaScript"},"content":{"rendered":"\n<p>A little bit of animation on a site can add some flair, impress users, and get their attention. You could have them run, no matter where they are on the page, immediately when the page loads. But what if your website is fairly long so it took some time for the user to scroll down to that element? They might miss it.<\/p>\n\n\n\n<p>You could have them run all the time, but perhaps the animation is best designed so that you for sure see the beginning of it. The trick is to start the animation when the user scrolls down to that element \u2014 scroll-triggered animation, if you will.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwMvbbg\" src=\"\/\/codepen.io\/anon\/embed\/VwMvbbg?height=450&amp;theme-id=1&amp;slug-hash=VwMvbbg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwMvbbg\" title=\"CodePen Embed VwMvbbg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To tackle this we use <strong>scroll triggers<\/strong>. When the user scrolls down to any particular element, we can use that event to do something. It could be anything, even the beginning of an animation. It could even be scroll-triggered lazy loading on images or lazy loading a whole comments section. In that way, we won\u2019t force users to download elements that aren\u2019t in the viewport on initial page load. Many users may never scroll down at all, so we really save them (and us) bandwidth and load time.<\/p>\n\n\n\n<p>Scroll triggers are very useful. There are many libraries out there that you can use to implement them, like <a href=\"https:\/\/greensock.com\/scrolltrigger\/\" rel=\"noopener\">Greensock\u2019s popular ScrollTrigger plugin<\/a>. But you don\u2019t <em>have<\/em> to use a third-party library, particularly for fairly simple ideas. In fact, you can implement it yourself using only a small handful of vanilla JavaScript. That is what we are going to do in this article.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"here-s-how-we-ll-make-our-scroll-triggered-event\">Here&#8217;s how we&#8217;ll make our scroll-triggered event<\/h3>\n\n\n<ul><li>Create a function called <code>scrollTrigger<\/code> we can apply to certain elements<\/li><li>Apply an <code>.active<\/code> class on an element when it enters the viewport<\/li><li>Animate that .<code>active<\/code> class with CSS<\/li><\/ul>\n\n\n\n<p>There are times where adding a <code>.active<\/code> class is not enough. For example, we might want to execute a custom function instead. That means we should be able to pass a custom function that executes when the element is visible. Like this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">scrollTrigger('.loader', {\n  cb: function(el) {\n    el.innerText = 'Loading ...'\n    loadContent()\n  }\n})<\/code><\/pre>\n\n\n\n<p>We\u2019ll also attempt to handle scroll triggers for older non-supporting browsers.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"but-first-the-intersectionobserver-api\">But first, the <code>IntersectionObserver<\/code> API<\/h3>\n\n\n<p>The main JavaScript feature we\u2019re going to use is the <a href=\"https:\/\/css-tricks.com\/an-explanation-of-how-the-intersection-observer-watches\/\">Intersection Observer<\/a>. This API provides a way to <em>asynchronously<\/em> observe changes in the intersection of a target element \u2014 and it does so more in a more performant way than watching for <code>scroll<\/code> events. We will use <code>IntersectionObserver<\/code> to monitor when scrolling reaches the point where certain elements are visible on the page.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"let-s-start-building-the-scroll-trigger\">Let\u2019s start building the scroll trigger<\/h3>\n\n\n<p>We want to create a function called <code>scrollTrigger<\/code> and this function should take a selector as its argument.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function scrollTrigger(selector) {\n  \/\/ Multiple element can have same class\/selector,\n  \/\/ so we are using querySelectorAll\n  let els = document.querySelectorAll(selector)\n  \/\/ The above `querySelectorAll` returns a nodeList,\n  \/\/ so we are converting it to an array\n  els = Array.from(els)\n  \/\/ Now we are iterating over the elements array\n  els.forEach(el => {\n    \/\/ `addObserver function` will attach the IntersectionObserver to the element\n    \/\/ We will create this function next\n    addObserver(el)\n  })\n}\n\/\/ Example usage\nscrollTrigger('.scroll-reveal')<\/code><\/pre>\n\n\n\n<p>Now let\u2019s create the <code>addObserver<\/code> function that want to attach to the element using <code>IntersectionObserver<\/code>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function scrollTrigger(selector){\n  let els = document.querySelectorAll(selector)\n  els = Array.from(els)\n  els.forEach(el => {\n    addObserver(el)\n  })\n}\nfunction addObserver(el){\n    \/\/ We are creating a new IntersectionObserver instance\n    let observer = new IntersectionObserver((entries, observer) => { \/\/ This takes a callback function that receives two arguments: the elements list and the observer instance.\n      entries.forEach(entry => {\n        \/\/ `entry.isIntersecting` will be true if the element is visible\n      if(entry.isIntersecting) {\n        entry.target.classList.add('active')\n        \/\/ We are removing the observer from the element after adding the active class\n        observer.unobserve(entry.target)\n      }\n    })\n  })\n  \/\/ Adding the observer to the element\n  observer.observe(el)\n}\n\/\/ Example usage\nscrollTrigger('.scroll-reveal')<\/code><\/pre>\n\n\n\n<p>If we do this and scroll to an element with a <code>.scroll-reveal<\/code> class, an <code>.active<\/code> class is added to that element. But notice that the <code>active<\/code> class is added as soon as any small part of the element is visible.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/mAykP912?cover=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption>Wcroll-triggered animation with the code for it to the left and DevTools open on the right.<\/figcaption><\/figure>\n\n\n\n<p>But that might be overkill. Instead, we might want the <code>.active<\/code> class to be added once a <em>bigger<\/em> part of the element is visible. Well, thankfully, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API#creating_an_intersection_observer\" rel=\"noopener\"><code>IntersectionObserver<\/code> accepts some options for that<\/a> as its second argument. Let&#8217;s apply those to our <code>scrollTrigger<\/code> function:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"27\"><code markup=\"tt\">\/\/ Receiving options as an object\n\/\/ If the user doesn't pass any options, the default will be `{}`\nfunction scrollTrigger(selector, options = {}) {\n  let els = document.querySelectorAll(selector)\n  els = Array.from(els)\n  els.forEach(el => {\n    \/\/ Passing the options object to the addObserver function\n    addObserver(el, options)\n  })\n}\n\/\/ Receiving options passed from the scrollTrigger function\nfunction addObserver(el, options) {\n  let observer = new IntersectionObserver((entries, observer) => {\n    entries.forEach(entry => {\n      if(entry.isIntersecting) {\n        entry.target.classList.add('active')\n        observer.unobserve(entry.target)\n      }\n    })\n  }, options) \/\/ Passing the options object to the observer\n  observer.observe(el)\n}\n\/\/ Example usage 1:\n\/\/ scrollTrigger('.scroll-reveal')\n\/\/ Example usage 2:\nscrollTrigger('.scroll-reveal', {\n  rootMargin: '-200px'\n})<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_CD503958969E4F5622656FA7ED4FB1213AF5585B5A906D3210B0301CA7387C42_1639110569153_demo_2.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>And just like that, our first two agenda items are fulfilled!<\/p>\n\n\n\n<p>Let\u2019s move on to the third item \u2014 adding the ability to execute a callback function when we scroll to a targeted element. Specifically, let\u2019s pass the callback function in our options object as <code>cb<\/code>:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"12,13,14\"><code markup=\"tt\">function scrollTrigger(selector, options = {}) {\n  let els = document.querySelectorAll(selector)\n  els = Array.from(els)\n  els.forEach(el => {\n    addObserver(el, options)\n  })\n}\nfunction addObserver(el, options){\n  let observer = new IntersectionObserver((entries, observer) => {\n    entries.forEach(entry => {\n      if(entry.isIntersecting){\n        if(options.cb) {\n          \/\/ If we've passed a callback function, we'll call it\n          options.cb(el)\n        } else{\n          \/\/ If we haven't, we'll just add the active class\n          entry.target.classList.add('active')\n        }\n        observer.unobserve(entry.target)\n      }\n    })\n  }, options)\n  observer.observe(el)\n}\n\/\/ Example usage:\nscrollTrigger('.loader', {\n  rootMargin: '-200px',\n  cb: function(el){\n    el.innerText = 'Loading...'\n    \/\/ Done loading\n    setTimeout(() => {\n      el.innerText = 'Task Complete!'\n    }, 1000)\n  }\n})<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/kHk-F7QE.gif?resize=1920%2C1080&#038;ssl=1\" alt=\"An updated animated screenshot of the same scroll-triggered animation. As boxes enter the screen from the bottom, a they rotate. A &quot;loading&quot; message that changes to &quot;finished loading&quot; message is the last element to scroll into view. The code is open to the left of the animation.\" class=\"wp-image-360570\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Great! There\u2019s one last thing that we need to take care of: legacy browser support. Certain browsers might lack support for <code>IntersectionObserver<\/code>, so let\u2019s handle that case in our <code>addObserver<\/code> function:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"10\"><code markup=\"tt\">function scrollTrigger(selector, options = {}) {\n  let els = document.querySelectorAll(selector)\n  els = Array.from(els)\n  els.forEach(el => {\n    addObserver(el, options)\n  })\n}\nfunction addObserver(el, options) {\n  \/\/ Check if `IntersectionObserver` is supported\n  if(!('IntersectionObserver' in window)) {\n    \/\/ Simple fallback\n    \/\/ The animation\/callback will be called immediately so\n    \/\/ the scroll animation doesn't happen on unsupported browsers\n    if(options.cb){\n      options.cb(el)\n    } else{\n      entry.target.classList.add('active')\n    }\n    \/\/ We don't need to execute the rest of the code\n    return\n  }\n  let observer = new IntersectionObserver((entries, observer) =>; {\n    entries.forEach(entry => {\n      if(entry.isIntersecting) {\n        if(options.cb) {\n          options.cb(el)\n        } else{\n          entry.target.classList.add('active')\n        }\n        observer.unobserve(entry.target)\n      }\n    })\n  }, options)\n  observer.observe(el)\n}\n\/\/ Example usages:\nscrollTrigger('.intro-text')\nscrollTrigger('.scroll-reveal', {\n  rootMargin: '-200px',\n})\nscrollTrigger('.loader', {\n  rootMargin: '-200px',\n  cb: function(el){\n    el.innerText = 'Loading...'\n    setTimeout(() => {\n      el.innerText = 'Task Complete!'\n    }, 1000)\n  }\n})<\/code><\/pre>\n\n\n\n<p>Here\u2019s that live demo again:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwMvbbg\" src=\"\/\/codepen.io\/anon\/embed\/VwMvbbg?height=450&amp;theme-id=1&amp;slug-hash=VwMvbbg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwMvbbg\" title=\"CodePen Embed VwMvbbg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And that&#8217;s all for this little journey! I hope you enjoyed it and learned something new in the process.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A little bit of animation on a site can add some flair, impress users, and get their attention. You could have them run, no matter where they are on the page, immediately when the page loads. But what if your website is fairly long so it took some time for the user to scroll down [&hellip;]<\/p>\n","protected":false},"author":287965,"featured_media":285544,"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":"How to Make a Scroll-Triggered Animation With Basic JavaScript by @0shuvo0","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1325,18954],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1","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":360550,"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":285466,"url":"https:\/\/css-tricks.com\/scroll-linked-animations\/","url_meta":{"origin":360550,"position":1},"title":"Scroll-Linked Animations","date":"March 29, 2019","format":false,"excerpt":"You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right now. You watch the scroll position via a DOM event\u2026","rel":"","context":"In &quot;Link&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":168883,"url":"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/","url_meta":{"origin":360550,"position":2},"title":"Improving UI Animation Workflow with Velocity.js","date":"April 30, 2014","format":false,"excerpt":"The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well. In this article, Julian introduces Velocity.js itself.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":355060,"url":"https:\/\/css-tricks.com\/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline\/","url_meta":{"origin":360550,"position":3},"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":242456,"url":"https:\/\/css-tricks.com\/aos-css-driven-scroll-animation-library\/","url_meta":{"origin":360550,"position":4},"title":"AOS: CSS-Driven &#8220;On Scroll&#8221; Animation Library","date":"June 6, 2016","format":false,"excerpt":"The following is a guest post by Micha\u0142 Sajn\u00f3g, a front end developer at Netguru. Micha\u0142 has created one of those \"when you scroll to here, trigger this animation\" libraries. One of the things I like about it is that it leaves as much as it can to CSS for\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":358975,"url":"https:\/\/css-tricks.com\/empathetic-animation\/","url_meta":{"origin":360550,"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/360550"}],"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\/287965"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=360550"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/360550\/revisions"}],"predecessor-version":[{"id":363465,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/360550\/revisions\/363465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/285544"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=360550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=360550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=360550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}