From 690f7a0a561d5cad47f1aae430ef93ba6f6f8af9 Mon Sep 17 00:00:00 2001
From: Aaron Claes <52576914+AaronClaes@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:33:32 +0200
Subject: [PATCH] feat(Float): add autoInvalidate prop for on-demand rendering
 (#2034)

---
 README.md          | 10 ++++++++++
 src/core/Float.tsx |  5 +++++
 2 files changed, 15 insertions(+)

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.
 </Float>
 ```
 
+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
+<Canvas frameloop="demand">
+  <Float autoInvalidate>
+    <mesh />
+  </Float>
+</Canvas>
+```
+
 #### 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<FloatProps, THREE.Group> = /* @__PURE__ */ React.forwardRef<
@@ -24,6 +25,7 @@ export const Float: ForwardRefComponent<FloatProps, THREE.Group> = /* @__PURE__
       rotationIntensity = 1,
       floatIntensity = 1,
       floatingRange = [-0.1, 0.1],
+      autoInvalidate = false,
       ...props
     },
     forwardRef
@@ -33,6 +35,9 @@ export const Float: ForwardRefComponent<FloatProps, THREE.Group> = /* @__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