Animation is not looping even with range "disabled"

[theta-scholes]

<ShaderGradientCanvas
          pointerEvents="none"
          eventPrefix="client"
          className="pointer-events-none"
          style={{
            position: "absolute",
            pointerEvents: "none",
            top: "0%",
            left: "0%",
            width: "100%",
            height: "100%",
          }}
        >
          <ShaderGradient
            control="props"
            animate="on"
            brightness={0.2}
            cAzimuthAngle={0}
            cDistance={3.9}
            cPolarAngle={115}
            cameraZoom={1}
            color1={"#5606FF"}
            color2={"#FE8989"}
            color3={"#000000"}
            envPreset="city"
            frameRate={10}
            grain="off"
            lightType="3d"
            positionX={-0.5}
            positionY={0.1}
            positionZ={0}
            range="disabled"
            reflection={0.1}
            rotationX={0}
            rotationY={0}
            rotationZ={235}
            shader="defaults"
            type="waterPlane"
            uAmplitude={0}
            uDensity={1.1}
            uFrequency={5.5}
            uSpeed={0.04}
            uStrength={2.4}
            uTime={0.2}
            wireframe={false}
          />
        </ShaderGradientCanvas>

Here is my react object. As you can see range is disabled, but it still loops every 30 seconds or so. What am I doing wrong here ?

[theta-scholes]

https://codesandbox.io/p/sandbox/github/ruucm/shadergradient/tree/main/apps/example-cra?file=/src/App.tsx:53,23

Even here it still doesnt loop (example on the github)

Maybe it's not supposed to loop ?

[theta-scholes]

Anyone has any idea ?

[jeremiahrags]

I was having a looping issue in Framer also since it doesn't have a range input in the component settings.

I was able to solve it though by editing the code to include not only the range's disabled value, but also the rangeEnd and rangeStart (even though I wouldn't be using it).

    control: "props",
    animate: "on",
    brightness: 1.2,
    cDistance: 3.6,
    cameraZoom: 1,
    color1: "#ff5005",
    color2: "#dbba95",
    color3: "#d0bce1",
    embedMode: "off",
    envPreset: "city",
    gizmoHelper: "hide",
    grain: "on",
    lightType: "3d",
    pixelDensity: 1,
    range: "disabled",
    rangeEnd: 40,
    rangeStart: 0,
    reflection: 0.1,
    shader: "defaults",
    type: "plane",
    uSpeed: 0.4,
    uTime: 0,
    wireframe: "false",
    zoomOut: false,
    toggleAxis: false,

    pointerEvents: "none",

I know you're in react, but maybe this might be the solution for you also, @theta-scholes ?

[theta-scholes]

Hello @jeremiahrags I already have the range=disabled as you can see. Sadly it's not that :( And since it bugs and doesnt loop in the codesandbox of this repo. I assume it's a bug that is not cause by my implementation.

[jeremiahrags]

@theta-scholes - Just wondering if you tried adding in the rangeEnd and rangeStart also?

I don’t know enough to be certain that it’s related, but I noticed that your code above doesn’t include those. Mine didn’t work either until I included all range related variables.

[theta-scholes]

I tried and it's the same unfortunately. @jeremiahrags

[jeremiahrags]

Bummer. Sorry to hear, @theta-scholes. Hope someone picks up on the issue.

[theta-scholes]

Would literally pay for it to happen haha

[theta-scholes]

Any update on this ?

[theta-scholes]

Any update on this ?