Skip to content

Latest commit

 

History

History
109 lines (77 loc) · 2.66 KB

docs.md

File metadata and controls

109 lines (77 loc) · 2.66 KB
Raw

🎞 react-scroll-motion ✨

Docs

Markup Example

<ScrollContainer snap="mandatory">
  <ScrollPage>
    <Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}>
      <MediumText>Let me show you scroll animation 😀</MediumText>
    </Animator>
  </ScrollPage>
</ScrollContainer>

  • ScrollContainer must be root

  • ScrollContainer's children snap option is optional ('none' | 'mandatory' | 'proximity')

  • ScrollContainer's children must be ScrollPage

  • ScrollPage is position: relative; thus, if you want use flexbox, make div in ScrollPage

  • Animator must be in ScrollPage

  • Animator has animation props

Animation Object Example

const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
const FadeUp = batch(Fade(), Move(), Sticky());
  • You can use just single animation likes Fade(), Move(), ...
  • If you want to combinate serveral animations, use batch(...animations)
  • There's Fade, Move, Sticky, Zoom

Animation Types and Usages

  • Fade( from:number, to:number )

    • from : initial opacity number (0~1), default 0
    • to : final opacity number (0~1), default 1

  • FadeIn( ... ), FadeOut( ... )

    • FadeIn is for only in-animation
    • FadeOut is for only out-animation
    • Also, MoveIn, MoveOut, StickyIn, StickyOut, ZoomIn, ZoomOut is there, and I'll skip writing descriptions about these In/Out

  • Move( dx:number, dy:number, outDx:number, outDy:number )

    • dx : initial x value (unit: px), default 0
    • dy : initial y value (unit: px), default 100
    • outDx : final x value, default null
    • outDy : final y value, default -100
      • If outDx is null, then use dx value rather than outDx, outDy too.

  • Sticky( left:number, top:number )

    • left : value of style.left (unit: %), default 50(%)
    • top : value of style.top (unit: %), default 50(%)

  • Zoom( from:number, to:number )

    • from : initial scale value, default 10
    • to : final scale value, default 1

  • batch( ...animations )

Animation Object looks like this

{
  in: {
    style: { ... }
  },
  out: {
    style: { ... }
  }
}

  • Each style object will be used as react props style

  • But, there's one thing different

    {
  in: {
    style: {
      opacity: (value) => value
    }
  },
  out: {
    style: {
      opacity: (value) => (1 - value)
    }
  }
}

    Like this, style's value can be function type with 1 parameter (name is value)

    value is number between 0~1, that means percentage of scroll completion

    Upper animation object's opacity value will acts like 0 -> 1 -> 0, during scroll-up