react-webgl-displacement-slider

1.0.0 • Public • Published

react-webgl-displacement-slider

A small React library that can be used for creating WebGL powered image slider using displacement images.

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-webgl-displacement-slider

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

9.76 MB

Total Files

22

Last publish

Collaborators

  • markoradak