React-webgl-displacement-slider NPM

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

gsap three

@infinitebrahmanuniverse/nolb-react-we @everything-registry/sub-chunk-2623

1.0.0

7 years ago