Scroll-reveal animation that scales content from an initial scale to full size when entering the viewport.

Preview/Playground

Created by

Vipin

Scale In - Default

Astro

import ScaleIn from '@astroanimate/core/ScaleIn';

<ScaleIn enhance={true}>
  <h1>Your content here</h1>
</ScaleIn>

bash

npm install @astroanimate/core

import ScaleIn from '@astroanimate/core/ScaleIn';

<ScaleIn enhance={true}>
  <h1>Your content here</h1>
</ScaleIn>

Applies scale animation when element scrolls into view.

Prop	Type	Default	Description
`enhance`	`boolean`	`false`	Opt-in to JS enhancement (Scroll Reveal). If false, renders visible immediately with no animation
`initialScale`	`number`	`0.9`	Initial scale value to start from
`duration`	`number`	`600`	Duration of animation in milliseconds
`delay`	`number`	`0`	Delay before animation starts in milliseconds
`easing`	`string`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	CSS easing function
`once`	`boolean`	`true`	Whether animation should only play once. If false, reverses when scrolling out
`margin`	`string`	`0px 0px -10% 0px`	IntersectionObserver margin
`class`	`string`	`-`	Optional CSS class for the root element
`as`	`ScaleInTag`	`div`	HTML tag to use for the root element (div, section, article, aside, main, header, footer, nav, span, p, h1-h6, li, ul, ol, a, button)