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 = = />
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