docs: add scale example

Author: jscottsmith

documentation/docs/examples/scroll-effects.mdx

@@ -4,6 +4,7 @@ sidebar_position: 2
 
 import { ExampleRotation } from '/src/components/example-rotation';
 import { RotationAxis } from '/src/components/rotation-axis';
+import { ExampleScale } from '/src/components/example-scale';
 
 # Scroll Effects
 
@@ -57,3 +58,38 @@ const Component = () => {
 ```
 
 <RotationAxis />
+
+## Scale
+
+You can [scale](/docs/usage/parallax-props#available-css-effects) an element up or down and along any axis.
+
+```tsx
+const Component = () => {
+  const mage = useParallax<HTMLDivElement>({
+    scale: [0.5, 1, 'easeInQuad'],
+  });
+
+  const frog = useParallax<HTMLDivElement>({
+    scaleX: [1, 0, 'easeInQuad'],
+  });
+
+  const moon = useParallax<HTMLDivElement>({
+    scale: [1.5, 1, 'easeInQuad'],
+  });
+  return (
+    <div className="spinner">
+      <div className="mage" ref={mage.ref}>
+        🧙🏻‍♂️
+      </div>
+      <div className="frog" ref={frog.ref}>
+        🐸
+      </div>
+      <div className="moon" ref={moon.ref}>
+        🌚
+      </div>
+    </div>
+  );
+};
+```
+
+<ExampleScale />

documentation/src/components/example-scale/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cx from 'classnames';
+import { useParallax } from 'react-scroll-parallax';
+import { BgContainer } from '../bg-container';
+
+const shared =
+  'bg-blue-100 border-2 border-blue-500 border-solid rounded-lg h-32 w-32 flex items-center justify-center';
+
+export const ExampleScale = () => {
+  const parallaxUp = useParallax<HTMLDivElement>({
+    scale: [0.5, 1, 'easeInQuad'],
+    shouldAlwaysCompleteAnimation: true,
+  });
+
+  const parallaxAxisX = useParallax<HTMLDivElement>({
+    scaleX: [1, 0, 'easeInQuad'],
+    shouldAlwaysCompleteAnimation: true,
+  });
+
+  const parallaxDown = useParallax<HTMLDivElement>({
+    scale: [1.5, 1, 'easeInQuad'],
+    shouldAlwaysCompleteAnimation: true,
+  });
+  return (
+    <BgContainer>
+      <div className="flex items-center gap-sm md:gap-2xl justify-center text-8xl">
+        <div className={cx(shared)} ref={parallaxUp.ref}>
+          🧙🏻‍♂️
+        </div>
+        <div className={cx(shared)} ref={parallaxAxisX.ref}>
+          🐸
+        </div>
+        <div className={cx(shared)} ref={parallaxDown.ref}>
+          🌚
+        </div>
+      </div>
+    </BgContainer>
+  );
+};