Wobbly

Wobbly

〰️ wobbly
wobbly logo

parallax all the things in react-vr



wobbly manages the state needed to calculate `x, y` rotations for a parallax effect, allowing you to focus the UI, and apply the effect how/where you want.
new Wobbly()

Extends Component

Props

Props

Type: object

Properties
parallaxDegreeLowerBound (number?) : lower rotation degree bound
parallaxDegreeUpperBound (number?) : upper rotation degree bound
slop (number?) : slop to add to wrapper via prop getter
initialX (number?) : initial x value in view, between 0 and 1
initialY (number?) : initial y value in view, between 0 and 1
onExitSpringFriction (number?) : controls "bounciness"/overshoot of the onExit animation
onExitSpringTension (number?) : controls speed of onExit animation
flipX (boolean?) : flip the sign on the x rotation transform style value
flipY (boolean?) : flip the sign on the y rotation transform style value
moveOnLatchOnly (boolean?) : only map onMove events to state when "latched"
children (function?) : Is called with the StateAndHelpers of wobbly.
render (function?) : Is called with the StateAndHelpers of wobbly.

StateAndHelpers

The state of wobbly and prop getters are exposed as a parameter to the render prop.

StateAndHelpers

Type: object

Properties
getMoveTargetProps (function) : prop getter - returns the props to spread into the element which controls the parallax effect by moving over it.
getWobblyTransformStyle (function) : prop getter - returns the x,y state in a format the transform style property will take. Spread this into the style.transform array on an "Animated" element to which a parallax effect should be added. NOTE: This element must be "Animated" like "Animated.VrButton".
x (number) : state - x state value
y (number) : state - y state value
latched (number) : state - the latched state
toggleLatch (function) : action - function that toggles the latched date