New
AnimationFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 frameworksIntermediate
Loading…
An element that springs into place with a bouncy scale on mount.
<style>
@keyframes bounce-in {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); opacity: 1; }
70% { transform: scale(0.92); }
100% { transform: scale(1); opacity: 1; }
}
.bounce-in { animation: bounce-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.bounce-in { animation: none; opacity: 1; transform: none; }
}
</style>
<div class="bounce-in rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 px-8 py-6 text-center text-lg font-bold text-white shadow-lg">
Welcome aboard
</div>| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | Content rendered inside the component. |
delayMs | number | 0 | Delay ms |
className | string | '' | Additional classes merged onto the root element. |
Set `delayMs` to sequence several entrances. The animation is scale/opacity only and reduced motion shows the final state instantly.