# Utilities: scroll-animation Source: `src/utilities/scroll-animation.css` | Class | CSS output | | --- | --- | | `.velin-animate-on-scroll` | `animation: velin-scroll-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;` | | `.velin-animate-on-scroll--fade` | `animation: velin-fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;` | | `.velin-animate-on-scroll--scale` | `animation: velin-scale-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;` | | `.velin-animate-on-scroll--slide-up` | `animation: velin-slide-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;` | | `.velin-in-view` | `opacity: 1; transform: none; transition: opacity var(--velin-duration-normal, 400ms) var(--velin-ease-out, ease-out), t…` | | `.velin-parallax` | `animation: velin-parallax-shift linear; animation-timeline: scroll();` | | `.velin-parallax--slow` | `animation: velin-parallax-shift-slow linear; animation-timeline: scroll();` | | `.velin-parallax--slow` | `animation: none; opacity: 1; transform: none;` | | `.velin-scroll-progress` | `position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 3px; background: var(--vel…` | | `.velin-scroll-progress--thick` | `block-size: 4px;` | | `.velin-stagger-item` | `transition-delay: var(--velin-stagger-delay, 0ms);` |