Scale In on View
A copy-paste scroll-driven component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Scroll-DrivenHTMLCSSany framework
Scroll ↓
A
B
C
D
Copy into your project
HTML
<!-- Tiles scale up as they enter view (CSS only) -->
<div class="nuda-scrollsi__tile">A</div>
<div class="nuda-scrollsi__tile">B</div>
<div class="nuda-scrollsi__tile">C</div>CSS
/* Scale In on View
Elements scale from 0.7 to 1 as they enter the scrollport, via a
view() timeline. transform + opacity only. Customize: --scale-from */
.nuda-scrollsi__tile {
--scale-from: 0.7;
opacity: 0;
transform: scale(var(--scale-from));
animation: nuda-scrollsi-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}
@keyframes nuda-scrollsi-in {
to { opacity: 1; transform: scale(1); }
}
@supports not (animation-timeline: view()) {
.nuda-scrollsi__tile { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-scrollsi__tile {
animation: none;
opacity: 1;
transform: none;
}
}How to use Scale In on View
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.