react-webgl-displacement-slider
v1.0.0
Published
A small React library that can be used for creating WebGL powered image slider using displacement images.
Downloads
3
Readme
react-webgl-displacement-slider
A small React library that can be used for creating WebGL powered image slider using displacement images.
Install
Yarn
yarn add react-webgl-displacement-slider
NPM
npm install --save react-webgl-displacement-slider
Usage
import React, { Component } from 'react'
import DisplacementSlider from 'react-webgl-displacement-slider'
const App = () => (
<DisplacementSlider
images={[...]}
activeImage={n}
/>
)
Options
|name|type|default|required|description| |:-|:-:|:-:|:-:|:-:| |images|array||x|Array of images used for the slider| |activeImage|number|0||Dynamic prop used to set the active image| |displacementImage|number/object/string|0||Number between 0 and 15 or an image object / string (see Displacement Images)| |intensity|number|0.1||Number that defines intensity of the effect (recomended range 0.0 - 1.0)| |duration|number|2||Duration in seconds| |easing|string|'Expo.easeOut'||See https://greensock.com/docs/Easing| |angle|number|0||Dynamic prop used to set the angle of transition| |dynamicAngle|boolean|false||Automatically inverts the angle when transitioning backwards|
Along with the above, you can pass any other valid property or event such as className
, style
, onMouseEnter
, onMouseLeave
, etc.
Displacement Images
Along with any displacement image that you can provide yourself, you can use one of the following bundled images by using their corresponding number (0-15).
License
MIT © markoradak