Letters vallen in
Letters drop in from above one by one with a short bounce once in view; cheerful for hospitality, childcare or events.
Zomerfeest!
Zaterdag 12 juli · Vondelpark, Amsterdam
How to use it
- Paste the HTML where the text animations should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Letters vallen in · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-cdi"><h3 class="ei-cdi__h">Zomerfeest!</h3><p class="ei-cdi__s">Zaterdag 12 juli · Vondelpark, Amsterdam</p><button class="ei-cdi__re" type="button">opnieuw</button></div>
</div>/* Letters vallen in · NedDev · eigen werk. */
.ei-cdi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.ei-cdi__h{margin:0;font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(20px,5vw,30px);line-height:1.4;color:#0a0a0a}
.ei-cdi__c{display:inline-block;opacity:0;transform:translateY(-120%)}
.ei-cdi.is-in .ei-cdi__c{animation:ei-cdi-drop .9s both}
.ei-cdi__c:nth-child(odd){color:#F5480F}
@keyframes ei-cdi-drop{0%{opacity:0;transform:translateY(-160%);animation-timing-function:cubic-bezier(.55,0,1,.45)}55%{opacity:1;transform:translateY(0) scaleY(.86);animation-timing-function:cubic-bezier(0,.55,.45,1)}72%{transform:translateY(-16%) scaleY(1.04);animation-timing-function:cubic-bezier(.55,0,1,.45)}86%{transform:translateY(0) scaleY(.97)}100%{opacity:1;transform:none}}
.ei-cdi__s{margin:0;font-family:'Switzer',sans-serif;font-size:14px;color:rgba(10,10,10,.65)}
.ei-cdi__re{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid rgba(10,10,10,.2);border-radius:2px;padding:6px 10px;cursor:pointer;color:#0a0a0a}
.ei-cdi__re:hover{border-color:#F5480F;color:#F5480F}
@media(prefers-reduced-motion:reduce){.ei-cdi__c{opacity:1;transform:none}.ei-cdi.is-in .ei-cdi__c{animation:none}}// Letters vallen in · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-cdi'),h=w.querySelector('.ei-cdi__h'),txt=h.textContent;h.textContent='';h.setAttribute('aria-label',txt);
txt.split('').forEach(function(ch,i){var s=document.createElement('span');s.className='ei-cdi__c';s.setAttribute('aria-hidden','true');s.textContent=ch;s.style.animationDelay=(i*.07)+'s';h.appendChild(s);});
function play(){w.classList.remove('is-in');void w.offsetWidth;w.classList.add('is-in');}
var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){play();io.disconnect();}},{threshold:.4});io.observe(w);
w.querySelector('.ei-cdi__re').addEventListener('click',play);
}
init(document.querySelector('.jouw-container'));More text animations
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →