2d:null 2e:["$","title",null,{"children":"Intersection Observer Tutorial: Basics | Gabriel Gianordoli | Observable"}] 33:T4a9,md` ## What is IntersectionObserver? In short, a native way of detecting if an object has entered the viewport. Yes, no libraries! ## Why do I need it? Sure, you could simply use some library like [Waypoints](http://imakewebthings.com/waypoints/) or code your own “viewport detector” by checking the element’s position via a scroll listener — which is what Waypoints is probably doing behind the scenes anyway. That is a really expensive operation though. IntersectionObserver is a performant way of doing the same thing. ## “I don’t understand. Why would I use any of that anyway?” Right, first things first. Detecting when an element enter or leaves the screen can be used for many things, among them: * Triggering animations * Stopping heavy scripts from running after elements are no longer visible and you don’t need them * Highlighting current “sections” on a long page And, if for some reason you need some custom library-free solution for these, also: * Scrolytelling pieces * Lazy load ## Support Browser support is not 100% there yet, but you can use a polyfill to make things work without problems. More on that in the last section of this tutorial. `34:[] 31:{"id":"aae65d98dab9d0f9","slug":"intersection-observer-tutorial","title":"Intersection Observer Tutorial: Basics","thumbnail":"0d9b8f5d2a6b57dd1e4272a68558f5006f690f84047eeab06d6f7de943f9033d","access_level":"public","create_time":"$D2018-10-03T14:26:05.288Z","update_time":"$D2021-03-29T20:37:03.858Z","view_time":null,"first_public_time":"$D2018-12-12T16:17:59.210Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024"},"version":574,"publish_version":574,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null}],"members":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Intersection Observer Tutorial: Basics","cells":[{"id":46,"value":"md`# Intersection Observer Tutorial: Basics`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n## Getting Started\n\n### Setup \n\nFirst, let's create some dummy markup and styling so we have something to work with:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"example0 = html`\n\n\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md `### Implementation\n\nNow for the JS part. First, let's take a look into the basics of the intersectionObserver class:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"{\n // Selecting just the first of my bars\n const myBar = example0.querySelector('.bar');\n\n function callback (entries, observer) {\n console.log('entries:', entries);\n console.log('observer:', observer);\n }\n \n // Instancing a new IntersectionObserver\n const observer = new IntersectionObserver(callback);\n\n // Adding a target to be observed\n observer.observe(myBar);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\nNow if you scroll back up and check your browser’s console you should be able to see some messages being logged when the first bar enters the viewport. The \\`observer\\` object contains some parameters we'll tweak later. For now, let’s focus on \\`entries\\`. Before moving on, notice that both \\`entries\\` and \\`observer\\` are arguments defined by the IntersectionObserver class. In other words, I can change the words I use for those parameters, but I can’t change the fact that the class expects will pass those 2 objects when executing its callback function.\n\nExpanding \\`entries\\` on your console you’ll notice that it is an Array of a single element. That means our observer is taking into account just a single “entry point”: the top of our first \\`.bar\\` div (more on that later). Expanding that one element in the array, we’ll find the property that matters the most to us right now: \\`isIntersecting\\`. Let's change the code above a bit to make it work with more than one bar:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"{\n // Selecting all bars instead of just the first one\n const myBars = example1.querySelectorAll('.bar');\n\n // No need to change this part. Though we'll have multiple targets,\n // we still have a single observer and a single callback\n const observer = new IntersectionObserver((entries, observer) => {\n\n // Each of the bars will make up an “entry”\n entries.forEach(entry => {\n\n // If our target enters the viewport, add an “active” class to it\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n // Otherwise, remove the “active” class\n } else {\n entry.target.classList.remove('active');\n }\n });\n });\n\n // Looping through the bars and adding them as targets of the observer\n Array.prototype.forEach.call(myBars, (el) => {\n observer.observe(el);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`\nP.S.: If you’re confused about the loop in the last part, take a look into [this](https://developer.mozilla.org/en-US/docs/Web/API/NodeList).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`\nThe code above will toggle an \\`active\\` class when the bars scroll into and out of view. Let’s add an animation to it so the change is visually clear:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`\n\n` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`\nOur goal is to animate the bars horizontally, from 0 to 100% width. Adding a CSS transition to the width property is not good for performance (more on that [here](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)), so a nice and easy workaround is to use a CSS scale transform. \n*Note: for some reason the bars won’t show up when using \\`transform: scaleX(0)\\` here on **Observable**. That’s why I have \\`transform: scaleX(0.1)\\` instead. I wonder if there’s some performance script telling the page to ignore invisible objects... On a regular page \\`scaleX(0)\\` should work, though.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"example1 = {\n return example0.cloneNode(true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md `\n## Options\n\nThe IntersectionObserver constructor takes 2 parameters: a \\`callback\\` and an object with \\`options\\`. Now that we understand how the former works, let’s take a look at the latter.\n\n### Root\n\nBy default the observer watches for intersections with the viewport. You can change that by adding another element to the \\`root\\` parameter of the \\`options\\` object. This element needs to be an ancestor of your “observed” ones. In the example below, the div \\`.frame\\` is a parent of the \\`.scrollable-elements\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"example2 = html `\n\n\n

Div 1

Div 2

Div 3

Div 4

Div 5

Div 6

Div 7

Div 8

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md `*Note: because I will be reusing the same \\`callback\\` function in the examples below, I put it in a separate Observable cell.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"callback = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n console.log(entry.target);\n entry.target.classList.add('active');\n } else {\n entry.target.classList.remove('active');\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"{\n const myBars = example2.querySelectorAll('.scrolling-element');\n \n const options = {\n root: example2.querySelector('.frame')\n }\n \n const observer = new IntersectionObserver(callback, options);\n\n Array.prototype.forEach.call(myBars, (el) => {\n observer.observe(el);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md `\n### Root margin\n\nIn the example above, we are changing the div color when it enters the frame but we can’t see that change because it happens as soon as 1px of the element gets visible. We can add the \\`rootMargin\\` parameter to our options and have the observer be triggered only when the divs are halfway through the frame, for example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"{\n const myBars = example3.querySelectorAll('.scrolling-element');\n \n const options = {\n root: example3.querySelector('.frame'),\n rootMargin: '0px 0px -50% 0px'\n }\n \n const observer = new IntersectionObserver(callback, options);\n\n Array.prototype.forEach.call(myBars, (el) => {\n observer.observe(el);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"example3 = {\n return example2.cloneNode(true); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md `\nThe values work the same way as the standard CSS margin declaration (top, right, bottom, left). In the example above, we added a negative bottom margin corresponding to half of the element’s height.\nNote: unlike in CSS, we can’t ommit the “px” unit when using \\`0\\` values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md `\n### Threshold\n\nAt last, you can track the percentage of your object that is visible. So far the observer is notifying us whenever at least 1 pixel of each element enters the frame (or its \\`marginBounds\\`, since we changed the \\`rootMargin\\` parameter). The parameter below specifies a 0.5 threshold to the \\`option\\` object, meaning that the observer should be triggered only when 50% of the element is intersecting.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"{\n const myBars = example4.querySelectorAll('.scrolling-element');\n \n const options = {\n root: example4.querySelector('.frame'),\n rootMargin: '0px', // Removing the margins for clarity\n threshold: 0.5\n }\n \n const observer = new IntersectionObserver(callback, options);\n\n Array.prototype.forEach.call(myBars, (el) => {\n observer.observe(el);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"example4 = {\n return example2.cloneNode(true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md `Note that this value is relative to the “intersecting” percentage of the element, not with how far into the viewport/frame it has scrolled. For example, an element that is taller than its \\`root\\` won’t ever reach the \\`1.0\\` (100%) threshold, even when it has fully scrolled into the frame. \nAlso, when 50% of the object *leaves* the frame, the observer is triggered as well and the div goes back to green. Try tweaking the \\`margin-top\\` parameter in case you don’t want that change to be visible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"md `\n### Threshold Array\n\nBeing \\`threshold\\` an array, we can pass multiple values to it. For example, if we are trying to build a scroll-controlled animation, we could track every percentage of the object (from 1% to 100%) and map it to steps in our animation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"{\n const myBars = example5.querySelectorAll('.scrolling-element');\n \n function callback(entries, observer) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Rounding the intersectionRatio to 2 decimals\n const scale = Math.round((entry.intersectionRatio)*100)/100;\n entry.target.style.transform = `scaleX(${scale})`;\n }\n });\n }\n \n // Building an array of numbers starting at 0.00 and incrementing at every 0.01\n const options = {\n root: example5.querySelector('.frame'),\n threshold: Array.apply(null, {length: 100}).map((n, i) => i/100)\n }\n \n const observer = new IntersectionObserver(callback, options);\n \n Array.prototype.forEach.call(myBars, (el) => {\n observer.observe(el);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"example5 = {\n return example2.cloneNode(true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md `\n## Support\n\nIntersection Observer is not supported by IE nor Safari (including iOS). To use the polyfill, run: \\`npm install --save intersection-observer\\`. Then load it at the top of your script.\nIn *Preview* you have to require it pointing to the *node_modules* folder:\n\\`\\`\\`\nrequire([\n ...,\n 'node_modules/intersection-observer/intersection-observer',\n ...\n ], function() {\n ...\n})\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`\n

Notebook’s Inline Styles

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"