@stnew/animation-wrapper NPM

@stnew/animation-wrapper

Component that wraps other content and runs an animation on the content when it becomes visible on the page.

npm install @stnew/animation-wrapper

import { AnimationWrapper } from '@stnew/animation-wrapper';

const AnimatedComponent = () => (
  <AnimationWrapper>
    <p>Hello world!</p>
  </AnimationWrapper>
)

Props	Type	Default	Desc
children	`ReacChildren`	`undefined`	Element(s) to be animated. *Required
root	`Element`	`0px`	`root` option passed to IntersectionObserver.
rootMargin	`string`	`0px`	`rootMargin` option passed to IntersectionObserver.
threshold	`number`	0	`threshold` option passed to IntersectionObserver.
generalClass	`string`	`animation`	css class to be applied at all times to the wrapper component.
finalClass	`string`	`animation-to`	css class to be applied to the wrapper component once the content comes into view.
initialClass	`string`	`animation-from`	css class to be applied to the wrapper component before the content comes into view.
delay	`number`	`0`	time (in milliseconds) between when the element comes into view and when the finalClass gets applied.
heightDelayMult	`number`	`1`	if multiple AnimationWrapper components are in view when the page loads, their animations are delayed by an amount relative to how far they are from the top of the page. `heightDelayMult` can increase or increase this offset. A value of `0` will remove the delay.

@everything-registry/sub-chunk-874

1.0.2

5 years ago