diff --git a/src/web/index.ts b/src/web/index.ts
index 47a032b..5a8cd28 100644
--- a/src/web/index.ts
+++ b/src/web/index.ts
@@ -37,9 +37,12 @@ export type Options = {
   debounce?: number | { scroll: number; resize: number }
   scroll?: boolean
   polyfill?: { new (cb: ResizeObserverCallback): ResizeObserver }
+  dependencies?: unknown[]
 }
 
-function useMeasure({ debounce, scroll, polyfill }: Options = { debounce: 0, scroll: false }): Result {
+function useMeasure(
+  { debounce, scroll, polyfill, dependencies = [] }: Options = { debounce: 0, scroll: false }
+): Result {
   const ResizeObserver =
     polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : (window as any).ResizeObserver)
 
@@ -135,7 +138,9 @@ function useMeasure({ debounce, scroll, polyfill }: Options = { debounce: 0, scr
     removeListeners()
     addListeners()
   }, [scroll, scrollChange, resizeChange])
-
+  useEffect(() => {
+    forceRefresh()
+  }, dependencies.concat([forceRefresh]))
   // remove all listeners when the components unmounts
   useEffect(() => removeListeners, [])
   return [ref, bounds, forceRefresh]
diff --git a/test/src/index.tsx b/test/src/index.tsx
index ceb0997..d7ada42 100644
--- a/test/src/index.tsx
+++ b/test/src/index.tsx
@@ -22,45 +22,59 @@ function ScrollBox({ size, color, children }: { size: number | string; color: st
 }
 
 function MeasuredBox({ color }: { color: string }) {
+  const [scale, setScale] = useState(1)
+  const [scaleEnd, setScaleEnd] = useState(1)
   // This line is all you need ...
-  const [ref, bounds] = useMeasure({ scroll: true, debounce: { scroll: 0, resize: 0 } })
+  const [ref, bounds] = useMeasure({ scroll: true, debounce: { scroll: 0, resize: 0 }, dependencies: [scaleEnd] })
   // The rest is just for effects, hover and mouse tracking
   const prev = useRef(bounds)
   const [big, setBig] = useState(false)
   const [hovered, setHover] = useState(false)
   const [xy, setXY] = useState([0, 0])
   const [springs, set] = useSpring(() => Object.keys(bounds).reduce((acc, key) => ({ ...acc, [key]: 0 }), {}))
+  const toggleScale = () => {
+    setScale(scale === 1 ? 0.5 : 1)
+  }
   useEffect(() => {
     set(Object.keys(bounds).reduce((acc, key) => ({ ...acc, [key]: prev.current[key] !== bounds[key] ? 1 : 0 }), {}))
     prev.current = { ...bounds }
   }, [bounds, set])
-
+  const onTransitionEnd = () => {
+    setScaleEnd(scale)
+  }
   return (
-    <Box
-      ref={ref}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      onMouseMove={({ clientX, clientY }) => setXY([clientX, clientY])}
-      onClick={() => setBig(!big)}
-      size={big ? 270 : 235}
-      color={color}>
-      {Object.keys(bounds).map(key => (
-        <Fragment key={key}>
-          <span>{key}</span>
-          <a.span style={{ background: (springs as any)[key].interpolate((o: any) => `rgba(0,0,0,${o})`) }}>
-            {Math.round(bounds[key])}px
-          </a.span>
-        </Fragment>
-      ))}
-      {hovered && (
-        <>
-          <span>mouse x</span>
-          <span>{Math.round(xy[0] - bounds.left)}px</span>
-          <span>mouse y</span>
-          <span>{Math.round(xy[1] - bounds.top)}px</span>
-        </>
-      )}
-    </Box>
+    <>
+      <Box
+        ref={ref}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        onMouseMove={({ clientX, clientY }) => setXY([clientX, clientY])}
+        onClick={() => setBig(!big)}
+        size={big ? 270 : 235}
+        color={color}
+        style={{ transform: `scale(${scale})` }}
+        onTransitionEnd={onTransitionEnd}>
+        {Object.keys(bounds).map((key) => (
+          <Fragment key={key}>
+            <span>{key}</span>
+            <a.span style={{ background: (springs as any)[key].interpolate((o: any) => `rgba(0,0,0,${o})`) }}>
+              {Math.round(bounds[key])}px
+            </a.span>
+          </Fragment>
+        ))}
+        {hovered && (
+          <>
+            <span>mouse x</span>
+            <span>{Math.round(xy[0] - bounds.left)}px</span>
+            <span>mouse y</span>
+            <span>{Math.round(xy[1] - bounds.top)}px</span>
+          </>
+        )}
+      </Box>
+      <button style={{ position: 'absolute', top: 0, left: 0, right: 0, margin: 'auto' }} onClick={toggleScale}>
+        Scale
+      </button>
+    </>
   )
 }
 
@@ -68,7 +82,7 @@ function Example() {
   return (
     <>
       <Global color="white" />
-      <div style={{ width: '150vw', height: '150vh', marginLeft: '-25vw', paddingTop: '20vh' }}>
+      <div style={{ width: '150vw', height: '150vh', marginLeft: '-25vw', paddingTop: '20vh', position: 'relative' }}>
         <ScrollBox size="60vh" color="#272730">
           <ScrollBox size="50vh" color="#676770">
             <MeasuredBox color="#F7567C" />
diff --git a/test/yarn.lock b/test/yarn.lock
index dcf739a..f1de4fc 100644
--- a/test/yarn.lock
+++ b/test/yarn.lock
@@ -8508,11 +8508,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"