docs: add custom effect examples

Author: jscottsmith

documentation/docs/examples/advanced-banners.mdx

@@ -1,7 +1,7 @@
 ---
 hide_title: true
 title: Advanced Banners
-sidebar_position: 4
+sidebar_position: 6
 ---
 
 import { AdvancedBannerTop } from '/src/components/advanced-banner-top';

documentation/docs/examples/banners.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 5
 ---
 
 import { ParallaxBannerSingle } from '/src/components/parallax-banner-single';

documentation/docs/examples/custom-effects.mdx

@@ -0,0 +1,51 @@
+---
+sidebar_position: 3
+---
+
+import { CustomEffect } from '/src/components/custom-effect';
+
+# Custom Effects
+
+You can create your own custom effects by using the `onProgressChange` event, along with custom CSS variables. This allows the for animating any CSS property based on the scroll position of an element.
+
+## CSS Variable Examples
+
+With the `useParallax` hook, we can pass in a callback to the `onProgressChange` event. This callback will be called every time the scroll position changes. We can then use the `progress` value to update a CSS variable. Then, either in a CSS file or inline styles, we can use the `var(--progress)` to animate any CSS property.
+
+```tsx
+function Example() {
+  const parallax = useParallax({
+    onProgressChange: (progress) => {
+      if (parallax.ref.current) {
+        // set progress to CSS variable
+        parallax.ref.current.style.setProperty(
+          "--progress",
+          progress.toString()
+        );
+      }
+    },
+  });
+
+  return (
+    <h1
+      ref={parallax.ref}
+      className="text-stroke"
+      // use the progress variable to change the width of the stroke as progress updates
+      style={{ textStrokeWidth: `calc(20px * var(--progress))` }}
+    >
+      Hello World
+    </h1>
+  );
+}
+```
+
+:::info
+
+Try it out for yourself in this CodeSandbox example: [Custom Effects Example](https://codesandbox.io/p/sandbox/react-scroll-parallax-text-stroke-klwy4l)
+
+:::
+
+Using this technique, we can animate any CSS property based on the scroll position of an element. Here's another example of animating the letter spacing and text shadow of a text element:
+
+<CustomEffect/>
+

documentation/docs/examples/easing.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 7
 ---
 
 import { EasingDemo } from '/src/components/easing-demo';

documentation/src/components/custom-effect/index.css

@@ -0,0 +1,14 @@
+.text-stroke {
+    font-family: sans-serif;
+    font-size: 15vmin;
+    height: 100px;
+
+    -webkit-text-stroke-color: white;
+    -webkit-text-stroke-width: 1px;
+
+    /* color:paleturquoise; */
+    @apply text-blue-400;
+    letter-spacing: calc(2vw * var(--progress) - 1vw);
+    white-space: nowrap;
+    text-shadow: 0 calc(4vw * var(--progress) - 2vw) 0 rgba(156, 163, 175, 0.2);
+}

documentation/src/components/custom-effect/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useParallax } from 'react-scroll-parallax';
+import { BgContainer } from '../bg-container';
+import './index.css';
+
+export function CustomEffect() {
+  const parallax = useParallax<HTMLHeadingElement>({
+    onProgressChange: (progress) => {
+      if (parallax.ref.current) {
+        // set progress to CSS variable
+        parallax.ref.current.style.setProperty(
+          '--progress',
+          progress.toString()
+        );
+      }
+    },
+  });
+  return (
+    <BgContainer>
+      <div className="flex items-center justify-center">
+        <h1 ref={parallax.ref} className="text-stroke">
+          Hello World
+        </h1>
+      </div>
+    </BgContainer>
+  );
+}