Animated Logo List

The logos will animate when you scroll to their container. Scroll to the bottom to see the effect.

HTML

<ul class="logo-list animated"> <li> <div> <svg><text x="0" y="60%" textLength="100%">Facebook</text></svg> </div> <li> <div> <svg><text x="0" y="60%" textLength="100%">Instagram</text></svg> </div> <li> <div> <svg><text x="0" y="60%" textLength="100%">TikTok</text></svg> </div> </ul>

CSS

@keyframes opacity { 0% {opacity:0;} 100% {opacity:1;} } @keyframes slidein { 0% {transform: translate3d(-1em,0,0);} 50% {transform: translate3d(.25em,0,0);} 100% {transform: translate3d(0,0,0);} } .logo-list { list-style: none; margin: 1em 1rem; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 1em; } .logo-list li { } .logo-list div { padding: 1em; width: 100%; max-width: 8em; /* aspect-ratio: 16 / 9; */ height:4.5em; background: var(--card); overflow: clip; border-radius:.25em; box-sizing: border-box; } .logo-list img, .logo-list svg { width:auto; max-width:100%; height:100%; display: block; } .logo-list img { aspect-ratio: 16 / 9; object-fit: contain; box-sizing: border-box; } .invisi div img, .invisi div svg {opacity:0;} .visi div img, .visi div svg { animation:opacity 1s both, slidein 1s both; animation-delay:calc(var(--i) * .2s); animation-delay:calc(var(--ii) * .2s); } .animated li {--ii: 0;} .animated :nth-child(2) {--ii: 1;} .animated :nth-child(3) {--ii: 2;} .animated :nth-child(4) {--ii: 3;} .animated :nth-child(5) {--ii: 4;} .animated :nth-child(6) {--ii: 5;} .animated :nth-child(7) {--ii: 6;} .animated :nth-child(8) {--ii: 7;}

JavaScript

const config_anim = { root: null, rootMargin: '0px 0px 0px 0px', threshold: [0] }; const images_anim = document.querySelectorAll('.animated'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('visi'); console.log('in the view'); } else { entry.target.classList.remove('visi'); entry.target.classList.add('invisi'); console.log('out of view'); } }); }, config_anim ); images3.forEach(image => { observer.observe(image); }, config_anim );