I have added CSS animations to various div elements on my html page.But all the animations played at the same time & i can't see the animations at the bottom of the page.How can i make them play while i scroll down the page ?
CSS Animation Delay Syntax The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
The IntersectionObserver API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
Here's an example that triggers a classList toggle when an Element is in viewport:
const inViewport = (entries, observer) => { entries.forEach(entry => { entry.target.classList.toggle("is-inViewport", entry.isIntersecting); }); }; const Obs = new IntersectionObserver(inViewport); const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options // Attach observer to every [data-inviewport] element: const ELs_inViewport = document.querySelectorAll('[data-inviewport]'); ELs_inViewport.forEach(EL => { Obs.observe(EL, obsOptions); });
[data-inviewport] { /* THIS DEMO ONLY */ width:100px; height:100px; background:#0bf; margin: 150vh 0; } /* inViewport */ [data-inviewport="scale-in"] { transition: 2s; transform: scale(0.1); } [data-inviewport="scale-in"].is-inViewport { transform: scale(1); } [data-inviewport="fade-rotate"] { transition: 2s; opacity: 0; } [data-inviewport="fade-rotate"].is-inViewport { transform: rotate(180deg); opacity: 1; }
Scroll down... <div data-inviewport="scale-in"></div> <div data-inviewport="fade-rotate"></div>
To define another parent reference element use the root
option inside the Observable options Object. At your disposition there's also rootMargin
and the super useful threshold
option
const obsOptions = { // Default is null (Browser viewport). Set a specific parent element: root: document.querySelector('#someSpecificParent'), // add 40px inner "margin" area at which the observer starts to calculate: rootMargin: '40px', // Default is 0.0 meaning the callback is called as soon 1 pixel is inside the viewport. // Set to 1.0 to trigger a callback when 100% of the target element is inside the viewport, // or i.e: 0.5 when half of the target element is visible: threshold: 0.5, };
See another interesting use case that uses the IntersectionObserver API's threshold
option.
Additional read:
Using the native IntersectionObserver API is the most performant way to tackle this problem.
If you want an idea on how we tackled similar needs in the past see this answer with a small custom plugin as an example.
Still Javascript, but with this version you don't need to listen on scroll events. Speed and performace is much better than check each time if an object is in the viewport.
Check this: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
With Intersection Observer, you can define a callback when an element is visible.
Options:root
: null << Set to null if you want it inside your viewport (visible area)threshold
: 0.3 << means 30% visibility. If you set 0.3, the callback is called once when the visibility reach at least 30% and once it is visible for less than 30%.
function callbackFunc(entries, observer) { entries.forEach(entry => { var txt = entry.target.id + " visibility: " + entry.isIntersecting; document.getElementById('log').appendChild(document.createTextNode(txt)); document.getElementById('log').appendChild(document.createElement("br")); }); } let options = { root: null, rootMargin: '0px', threshold: 0.3 }; let observer = new IntersectionObserver(callbackFunc, options); observer.observe(document.getElementById('firstBlock')); observer.observe(document.getElementById('secondBlock'));
#firstBlock { width: 50vw; height: 80vh; background: red; } #secondBlock { width: 50vw; height: 80vh; background: blue; } #log { width: 200px; height: 80vh; position: fixed; right: 0px; top: 10px; overflow: auto; }
First Block: <div id='firstBlock'> </div> <br><br><br> Second Block: <div id='secondBlock'> </div> <div id='log'>Log: </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With