diff --git a/README.md b/README.md index 4908d128f..5ffb579e3 100644 --- a/README.md +++ b/README.md @@ -4350,6 +4350,16 @@ This component makes its contents float or hover. ``` +If you have your frameloop set to `demand`, you can set `autoInvalidate` to `true`. This will ensure the animation will render while it is enabled. + +```js + + + + + +``` + #### Stage [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stage--stage-st) diff --git a/src/core/Float.tsx b/src/core/Float.tsx index 20c2dfd92..bccad1583 100644 --- a/src/core/Float.tsx +++ b/src/core/Float.tsx @@ -10,6 +10,7 @@ export type FloatProps = JSX.IntrinsicElements['group'] & { floatIntensity?: number children?: React.ReactNode floatingRange?: [number?, number?] + autoInvalidate?: boolean } export const Float: ForwardRefComponent = /* @__PURE__ */ React.forwardRef< @@ -24,6 +25,7 @@ export const Float: ForwardRefComponent = /* @__PURE__ rotationIntensity = 1, floatIntensity = 1, floatingRange = [-0.1, 0.1], + autoInvalidate = false, ...props }, forwardRef @@ -33,6 +35,9 @@ export const Float: ForwardRefComponent = /* @__PURE__ const offset = React.useRef(Math.random() * 10000) useFrame((state) => { if (!enabled || speed === 0) return + + if (autoInvalidate) state.invalidate() + const t = offset.current + state.clock.getElapsedTime() ref.current.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity ref.current.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity