docs: example independent easing

Author: jscottsmith

documentation/docs/examples/easing.mdx

@@ -1,6 +1,10 @@
+---
+sidebar_position: 2
+---
+
 import { EasingDemo } from '/src/components/easing-demo';
 
-# Easing
+# Easing Animation
 
 You can provide [easing presets](https://parallax-controller.v1.damnthat.tv/docs/usage/props#cubic-bezier-easing-function) or [cubic-bezier curve params](https://parallax-controller.v1.damnthat.tv/docs/usage/props#cubic-bezier-easing-function) to the `useParallax` hook or `<Parallax />` component.
 
@@ -20,9 +24,9 @@ function Component() {
 
 **Note:** When defining an `easing` prop like above, ALL provided CSS effects will be eased.
 
-<EasingDemo easing="easeOutQuad" />
+<EasingDemo eased={{ easing: 'easeOutQuad' }} />
 
-# Custom cubic-bezier
+## Custom cubic-bezier
 
 Define a custom cubic-bezier curve by providing the 4 params to the `easing` prop.
 
@@ -36,4 +40,29 @@ function Component() {
 }
 ```
 
-<EasingDemo easing={[1, -0.75, 0.5, 1.34]} />
+<EasingDemo eased={{ easing: [1, -0.75, 0.5, 1.34] }} />
+
+## Independent Easing
+
+Each effect can define it's own easing by passing a third param to the effect.
+
+```tsx
+function Component() {
+  const parallax = useParallax<HTMLDivElement>({
+    translateX: [0, 100, 'easeOutQuint'],
+    translateY: [-100, 100, 'easeInQuint'],
+  });
+  return <div ref={parallax.ref} />;
+}
+```
+
+<EasingDemo
+  default={{
+    translateX: [0, 100],
+    translateY: [-100, 100],
+  }}
+  eased={{
+    translateX: [0, 100, 'easeOutQuint'],
+    translateY: [-100, 100, 'easeInQuint'],
+  }}
+/>

documentation/docs/examples/how-it-works.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 import { ElementProgress } from '/src/components/element-progress';
 import { HowItWorks } from '/src/components/how-it-works';
 import { BeyondCSSEffects } from '/src/components/beyond-css-effects';

documentation/src/components/easing-demo/index.tsx

@@ -1,18 +1,22 @@
-import { EasingParam } from 'parallax-controller';
 import React from 'react';
 import { useParallax } from 'react-scroll-parallax';
+import { ParallaxProps } from 'react-scroll-parallax/dist/types';
 import { BgContainer } from '../bg-container';
 
-export const EasingDemo = (props: { easing: EasingParam }) => {
+export const EasingDemo = (props: {
+  eased: ParallaxProps;
+  default: ParallaxProps;
+}) => {
   const parallaxLinear = useParallax<HTMLDivElement>({
     translateX: [0, 100],
     shouldAlwaysCompleteAnimation: true,
+    ...props.default,
   });
 
   const parallaxEased = useParallax<HTMLDivElement>({
     translateX: [0, 100],
     shouldAlwaysCompleteAnimation: true,
-    easing: props.easing,
+    ...props.eased,
   });
 
   return (