1.0.0 • Published 5 years ago
react-webgl-displacement-slider v1.0.0
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-sliderNPM
npm install --save react-webgl-displacement-sliderUsage
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
1.0.0
5 years ago