Usage Guide | Question

[Srinivas Gowda]

I'm trying to transition between two images in the most simplest way possible, I see that the example from cookbook "transitions" uses something called "HOC/timeLoop" is this lib required to do transition or is it just a loop control?

Here's my code: https://stackblitz.com/edit/react-6iuown?file=index.js

[@greweb]

Hi @solancer ,

you should probably checkout react-gl-transition

but yeah, it does not provide an animation loop for you because there are many approach to do that, timeLoop is one used in gl-react cookbook.

https://github.com/gre/gl-transition-libs/blob/master/packages/website/src/AnimatedVignette.js is another example used on gl-transitions.com , a bit more advanced code but similar.

another approach you could have is using a library like react-motion. basically like in this example https://gl-react-cookbook.surge.sh/heart , you could animate the progress param from 0 to 1 and reversely

hope it makes sense.

BTW in your code it looks like you forgot to explode the prop params

- const Slideshow = function (slides, delay, duration, time) {
+ const Slideshow = function ({slides, delay, duration, time}) {

[Andrew Bryson]

@solancer Might not be amazingly eloquent but here is a possibility without needing any external animation libs

export class GradientsLoop extends React.Component<any> {
  animLoop;
  speed = 10;
  state = {
    time: 0
  };
  public componentDidMount() {
    this.loop();
  }
  public componentWillUnmount() {
    cancelAnimationFrame(this.animLoop);
  }
  private loop = () => {
    this.setState({
      time: this.state.time + this.speed
    });
    this.animLoop = requestAnimationFrame(this.loop);
  };
  public render() {
    const { time } = this.state;
    return (
      <Node
        shader={shaders.gradients}
        uniforms={{
          colors: [
            [ Math.cos(0.002*time), Math.sin(0.002*time), 0.2, 1 ],
            [ Math.sin(0.002*time), -Math.cos(0.002*time), 0.1, 1 ],
            [ 0.3, Math.sin(3+0.002*time), Math.cos(1+0.003*time), 1 ]
          ],
          particles: [
            [ 0.3, 0.3 ],
            [ 0.7, 0.5 ],
            [ 0.4, 0.9 ]
          ]
        }}
      />
    );
  }
}