Miss any of our Open RFC calls?Watch the recordings here! »

@stnew/animation-wrapper

1.0.2 • Public • Published

@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.

Keywords

none

Install

npm i @stnew/animation-wrapper

DownloadsWeekly Downloads

1

Version

1.0.2

License

ISC

Unpacked Size

12.3 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar