react-gl-transition

a React component to render a GL Transition in gl-react v3.

Usage example

https://gl-react-cookbook.surge.sh/transitions

API

This exposes a simple GLTransition react component you have to use inside gl-react Surface. It renders one frame of the transition (up to you to run the animation loop the way you want).

<GLTransition progress={progress} from={from} to={to} transition={transition} />

props

• from: the source texture to transition from. an image URL or any texture format accepted by gl-react! (e.g. a <video> React Element! – see https://gl-react-cookbook.surge.sh/ for examples)
• to: the destination texture to transition to. (same format as from)
• progress (number): a value from 0 to 1
• transition (object): a transition object coming from gl-transitions library. see format in https://www.npmjs.com/package/gl-transitions README.
• optional transitionParams (object): a key-value object that gives parameters to the transition (and overrides the transition default params). key is the name of the params, value is its value with one of the accepted format of gl-react.

escape hatch

There is a setProgress(progress) method available via glTransitionRef.getComponent().setProgress(progress). It's an escape hatch, only use it if you identified a bottleneck in the "normal way". If you do, make sure the progress value you sent in props always comes from the same variable you gave to setProgress or you will see jumps if you have a React re-render.

NB disclaimer: use this escape hatch wisely! There should be ways to go before using it. What you can also do is a <AnimateGLTransition/> component that directly render GLTransition and where the setState occurs (to have local setState updates, not in all the React tree – gl-react is optimized for that).