1.0 Powerplug drafts

drafts.md

Drafts

---

Mouse

or MousePos, or MouseTrack, idk what is best name yet

Mouse is binded in a element, and your ratio values are relative to this element.

IDEAL API

<Mouse>
  {({ bindMouse, mousePos }) => (
    <div {...bindMouse}>
      <div style={{ transform: `translateX(${(mousePos.ratioX * 10) - 5})` }}>First layer</div>
      <div style={{ transform: `translateY(${(mousePos.ratioY * 10) - 10})` }}>First layer</div>
    </div>
  )}
</Mouse>

USE CASES

"Mouselax = Mouse + Parallax (?maybe?)", another lib using Powerplug Mouse Inspired in https://github.com/cameronmcefee/plax

<Mouselax>
  {({ bindWrapper, layer }) => (
    <div {...bindWrapper}>
      <div style={layer({ x: 5, y: 10 })}>First layer</div>
      <div style={layer({ y: 10, x: 10 })}>Second layer</div>
    </div>
  )}
</Mouselax>

---

Scroll

or ScrollPos, or ScrollTrack, idk what is best name yet

Scroll is binded in document window as default, but could binded in other elements that have scroll also.

IDEAL API

<Scroll>
  {({ bindScroll, scrollPos }) => (
    <div {...bindScroll} style={{ height: 2000 }}>
      <div style={{ transform: `translateY(${scrollPos.y / 2}px)` }}>First layer</div>
      <div style={{ transform: `translateY(${scrollPos.y / 3}px)` }}>Second layer</div>
    </div>
  )}
</Scroll>