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 );