-
👍🏻
-
👏🏻
-
🙌🏻
-
👎🏻
+
);
diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
index 023557939..1e90149e4 100644
--- a/documentation/src/css/custom.css
+++ b/documentation/src/css/custom.css
@@ -1,3 +1,5 @@
+@config "../../tailwind.config.js";
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -27,6 +29,16 @@
border: 1px solid #eee;
}
+/*
+ * Clip demo content without creating a scroll container (unlike overflow: hidden).
+ * clip-path paints a hard clip that still works when WAAPI applies compositor
+ * transforms; overflow: clip alone is unreliable with 3D rendering contexts.
+ */
+.demo-bg-clip {
+ overflow: clip;
+ clip-path: inset(0 round 0.375rem);
+}
+
html[data-theme='dark'] .px-bg {
background-image: url(/static/img/bg-px.svg);
background-color: rgb(40, 42, 54);
diff --git a/documentation/src/plugins/tailwind-config.js b/documentation/src/plugins/tailwind-config.js
new file mode 100644
index 000000000..cbda8194d
--- /dev/null
+++ b/documentation/src/plugins/tailwind-config.js
@@ -0,0 +1,35 @@
+const path = require('path');
+
+/** @param {import('@docusaurus/types').LoadContext} context */
+module.exports = function tailwindPostCssPlugin(context) {
+ const tailwindConfigPath = path.join(context.siteDir, 'tailwind.config.js');
+
+ return {
+ name: 'docusaurus-tailwind-postcss',
+ configurePostCss(postcssOptions) {
+ const tailwindcss = require('tailwindcss');
+ const autoprefixer = require('autoprefixer');
+
+ const plugins = postcssOptions.plugins ?? [];
+
+ const withoutTailwind = plugins.filter((plugin) => {
+ if (typeof plugin === 'function') {
+ return plugin.postcssPlugin !== 'tailwindcss';
+ }
+ if (Array.isArray(plugin)) {
+ const pluginPath = String(plugin[0] ?? '');
+ return !pluginPath.includes('tailwindcss');
+ }
+ return true;
+ });
+
+ postcssOptions.plugins = [
+ tailwindcss({ config: tailwindConfigPath }),
+ autoprefixer(),
+ ...withoutTailwind,
+ ];
+
+ return postcssOptions;
+ },
+ };
+};
diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js
index 8e79dfbbe..2b9b5bfaa 100644
--- a/documentation/tailwind.config.js
+++ b/documentation/tailwind.config.js
@@ -1,5 +1,11 @@
+const path = require('path');
+
module.exports = {
- content: ['./src/**/*.{js,jsx,ts,tsx}'],
+ content: [
+ path.join(__dirname, 'src/**/*.{js,jsx,ts,tsx}'),
+ path.join(__dirname, 'docs/**/*.mdx'),
+ path.join(__dirname, 'versioned_docs/**/*.mdx'),
+ ],
theme: {
extend: {
borderRadius: {
diff --git a/documentation/versioned_docs/version-3/examples/_category_.json b/documentation/versioned_docs/version-3/examples/_category_.json
deleted file mode 100644
index 88ebeb197..000000000
--- a/documentation/versioned_docs/version-3/examples/_category_.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "label": "Examples",
- "position": 3,
- "collapsed": false
-}
diff --git a/documentation/versioned_docs/version-3/examples/advanced-banners.mdx b/documentation/versioned_docs/version-3/examples/advanced-banners.mdx
deleted file mode 100644
index a150f0364..000000000
--- a/documentation/versioned_docs/version-3/examples/advanced-banners.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
----
-hide_title: true
-title: Advanced Banners
-sidebar_position: 6
----
-
-import { AdvancedBannerTop } from '/src/components/advanced-banner-top';
-import { ParallaxBannerWithHeadline } from '/src/components/parallax-banner-with-headline';
-import { ParallaxBannerEmbedHeadline } from '/src/components/parallax-banner-embed-headline';
-
-
-
-# Advanced Banners
-
-The `
` accepts advanced configurations that can allow you to really push the effect. Building off the [previous banner demos](/docs/examples/banners), this one adds a number of configuration options.
-
-## How it's done
-
-The following is a breakdown of some of the more advanced configuration for the banner seen above.
-
-1. You are not limited to using only `speed` to control movement. In this example `translateY` is defined with custom start and end values. This is helpful when the banner starts at the top of the page.
-2. Setting `shouldAlwaysCompleteAnimation` ensures that the animation begins at the initial position in the view, and since this banner is placed at the top of the page this option is enabled.
-3. Additional `scale` effects are used to further enhance the scenes depth and are also provided individual `easing` values.
-4. Certain layers set `expanded` to `false`. This is because they don't move or have no edge that would appear visible so there is no need to expand them.
-5. Lastly, a gradient overlay is added to dim the scene with an `opacity` transition.
-
-:::info
-
-Here's a [CodeSandbox](https://codesandbox.io/s/mvzp1) with [full page banner](https://mvzp1.csb.app/) like the one above.
-
-:::
-
-```tsx
-const Component = () => {
- const background: BannerLayer = {
- image:
- 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg',
- translateY: [0, 50],
- opacity: [1, 0.3],
- scale: [1.05, 1, 'easeOutCubic'],
- shouldAlwaysCompleteAnimation: true,
- };
-
- const headline: BannerLayer = {
- translateY: [0, 30],
- scale: [1, 1.05, 'easeOutCubic'],
- shouldAlwaysCompleteAnimation: true,
- expanded: false,
- children: (
-
-
- Hello World!
-
-
- ),
- };
-
- const foreground: BannerLayer = {
- image:
- 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png',
- translateY: [0, 15],
- scale: [1, 1.1, 'easeOutCubic'],
- shouldAlwaysCompleteAnimation: true,
- };
-
- const gradientOverlay: BannerLayer = {
- opacity: [0, 0.9],
- shouldAlwaysCompleteAnimation: true,
- expanded: false,
- children: (
-
- ),
- };
-
- return (
-
- );
-};
-```
-
-:::info
-
-Each layer of the `` is just a `useParallax` hook targeting a ``. Which means anything you can use to configure [`useParallax`](/docs/usage/hooks/use-parallax) can be used as a property of a `layer`. See all [effects and configuration](/docs/usage/parallax-props) accepted.
-
-:::
diff --git a/documentation/versioned_docs/version-3/examples/banners.mdx b/documentation/versioned_docs/version-3/examples/banners.mdx
deleted file mode 100644
index 143397188..000000000
--- a/documentation/versioned_docs/version-3/examples/banners.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
----
-sidebar_position: 5
----
-
-import { ParallaxBannerSingle } from '/src/components/parallax-banner-single';
-import { ParallaxBannerImages } from '/src/components/parallax-banner-images';
-import { ParallaxBannerWithHeadline } from '/src/components/parallax-banner-with-headline';
-import { ParallaxBannerEmbedHeadline } from '/src/components/parallax-banner-embed-headline';
-
-# Parallax Banners
-
-The following demonstrates some common usage of the [`
`](/docs/usage/components/parallax-banner-component) component.
-
-```ts
-import { ParallaxBanner } from 'react-scroll-parallax';
-```
-
-## Example with a Single Image
-
-A single parallaxing image within a banner is achieved by adding a single layer object with an `image` and `speed`:
-
-```tsx
-const Component = () => {
- return (
-
- );
-};
-```
-
-
-
-Be sure to set a style by either a `className` or the `style` prop that will give the banner container a `height`. You could also use an aspect ratio like the example above which uses a class that sets the `aspect-ratio` to `2 / 1`.
-
-:::tip
-
-The parallax effect is more natural when the image moves slower than the page, `speed < 0`.
-
-:::
-
-## Example with Multiple Layers
-
-This example uses two layers, one background and one foreground. The order of the defined layer determines the stacking of the each image: First in the array will appear at the back and be covered by subsequent layers.
-
-The `image` prop defines the layer image.
-The `speed` prop is used to make the layer move at it's own pace.
-
-The foreground `speed` is defined so that it will move faster than the background:
-
-```tsx
-const Component = () => {
- return (
-
- );
-};
-```
-
-:::tip
-
-For the most natural visual effect with multiple layers make each layer `speed` depend on the distance of the image: the closer the items in the image the **faster** they should move; the further away the **slower** they should move.
-
-:::
-
-
-
-## Example with a headline
-
-By defining `children` you can add any markup for a headline or any other custom elements. In the following example the headline is positioned absolutely over each banner layer.
-
-```tsx
-const Component = () => {
- return (
-
-
-
Hello World!
-
-
- );
-};
-```
-
-
-
-## Embed the headline in the scene
-
-You can take the effect even further by embedding the headline in the scene. This can be done by defining another layer and assigning the markup to the `children` of that layer.
-
-```tsx
-const Component = () => {
- return (
-
- Hello World!
-
- Hello World
-
- );
-}
-```
-
-:::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:
-
-
diff --git a/documentation/versioned_docs/version-3/examples/easing.mdx b/documentation/versioned_docs/version-3/examples/easing.mdx
deleted file mode 100644
index efdcd92c5..000000000
--- a/documentation/versioned_docs/version-3/examples/easing.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-sidebar_position: 7
----
-
-import { EasingDemo } from '/src/components/easing-demo';
-
-# Easing Animation
-
-You can provide [easing presets](/docs/usage/parallax-props#easing-presets) or [cubic-bezier curve params](/docs/usage/parallax-props#cubic-bezier-easing-function) to the `useParallax` hook or `` component.
-
-## Example using a preset
-
-This `translateX` effect will be eased using the `easeOutQuad` preset.
-
-```tsx
-function Component() {
- const parallax = useParallax({
- easing: 'easeOutQuad',
- translateX: [0, 100],
- });
- return ;
-}
-```
-
-:::important
-
-When defining an `easing` prop like above, ALL provided CSS effects will be eased.
-
-:::
-
-
-
-## Custom cubic-bezier
-
-Define a custom cubic-bezier curve by providing the 4 params to the `easing` prop.
-
-```tsx
-function Component() {
- const parallax = useParallax({
- easing: [1, -0.75, 0.5, 1.34],
- translateX: [0, 100],
- });
- return ;
-}
-```
-
-
-
-## Independent Easing
-
-Each effect can define it's own easing by passing a third param to the effect.
-
-```tsx
-function Component() {
- const parallax = useParallax({
- translateX: [0, 100, 'easeOutQuint'],
- translateY: [-100, 100, 'easeInQuint'],
- });
- return ;
-}
-```
-
-
diff --git a/documentation/versioned_docs/version-3/examples/horizontal-scroll.mdx b/documentation/versioned_docs/version-3/examples/horizontal-scroll.mdx
deleted file mode 100644
index c8f5c8c3f..000000000
--- a/documentation/versioned_docs/version-3/examples/horizontal-scroll.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_position: 6
----
-
-import { ExampleHorizontalScroll } from '/src/components/example-horizontal-scroll';
-
-# Horizontal Scroll
-
-The controller isn't limited to the typical vertical scrolling. To setup a horizontal scrolling document you'll need to set the `scrollAxis` in the [``](/docs/usage/components/parallax-provider) to `horizontal`.
-
-```tsx
-const App = () => (
-
-
-
-);
-```
-
-Once the provider is setup, you can start creating effects as usual. Here's an example that uses a few layers with repeating backgrounds.
-
-:::info
-
-"Demon Woods" parallax art by [Aethrall](https://aethrall.itch.io/)
-
-:::
-
-
-
-:::note
-
-[Open the above example](https://react-scroll-parallax-horizontal-scroll.surge.sh/) or view the entire [source code](https://github.com/jscottsmith/react-scroll-parallax-examples/tree/master/horizontal-scroll).
-
-:::
-
-## Source Code
-
-To achieve the above effect, layers are stacked absolutely in a container. A `speed` is assigned to the middle and closest tree images - the closest moves the fastest. Then the `left` and `right` are extended so the edges are never seen. A `targetElement` is also assigned to the containing `div` and passed to each parallax layer so that the progress rate is calculated equally. Here's the setup:
-
-```tsx
-function DemonWoods() {
- const target = useRef(null);
-
- const mid = useParallax({
- speed: 50,
- targetElement: target.current,
- });
- const close = useParallax({
- speed: 100,
- targetElement: target.current,
- });
-
- const midExtend = 50 * 5 * -1;
- const closeExtend = 100 * 5 * -1;
-
- return (
-
- );
-}
-```
diff --git a/documentation/versioned_docs/version-3/examples/how-it-works.mdx b/documentation/versioned_docs/version-3/examples/how-it-works.mdx
deleted file mode 100644
index f11df5949..000000000
--- a/documentation/versioned_docs/version-3/examples/how-it-works.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
----
-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';
-
-# How it works
-
-As the element scrolls past the viewport a css translate effect is applied based on the original element's position relative to the viewport. Using the speed will automatically apply a translateY css style (or translateX if the scroll axis is horizontal).
-
-```tsx
-
-
-```
-
-
-
-:::info
-
-Note that `speed` is only an abstraction for setting `translateY` or `translateX` based on the scroll axis. Each increment of **speed** by one will increase the translate effect by `10px`.
-
-Example: With a vertical scroll axis, `speed: 10` is equivalent to `translateY: ['100px', '-100px']` and `speed: -10` is equivalent to `translateY: ['-100px', '100px']`.
-
-:::
-
-## Progress is relative to the view
-
-All effects are applied based on the original element's progress. Progress begins as the elements top edge enters the bottom of the view. It ends as the bottom of the element leaves the top of the view.
-
-```tsx
- setProgress(progress)}
- onEnter={() => setEntered(true)}
- onExit={() => setEntered(false)}
-/>
-```
-
-
-
-## Altering Progress
-
-By design and by default, all elements progress relative to the view. However, there are optional ways to change how progress is calculated:
-
-1. Manually setting [`startScroll` and `endScroll`](/docs/usage/parallax-props#configuration-props) props allows complete control over when the progress starts and ends.
-2. Use a [`targetElement`](/docs/usage/parallax-props#configuration-props) which will track the progress of the target and apply it to the current element.
-3. Setting a [`rootMargin`](/docs/usage/parallax-props#configuration-props) will add a invisible margin around the element that can be used to change when the element is in view and its progress.
-4. You can also set [`shouldAlwaysCompleteAnimation`](/docs/usage/parallax-props#configuration-props) to true and if the element is positioned inside the view when scroll is at zero or ends in view at final scroll position, the initial and final positions are used to determine progress instead of the scroll view size.
-
-:::warning
-
-Because progress is relative to the view, and [Parallax Controller caches](https://parallax-controller.damnthat.tv/docs/performance#optimizations-to-reduce-jank) the elements position, unexpected issues will occur if you use parallax on a sticky positioned element. If you need to use parallax on a sticky element, consider using a `targetElement` that is not sticky, or predefined `startScroll` and `endScroll` values.
-
-:::
-
-## Beyond Parallax: CSS effects
-
-Additional CSS effects, like opacity, scale and rotation can be applied based on progress, even with some easing.
-
-```tsx
-
-```
-
-
diff --git a/documentation/versioned_docs/version-3/examples/scroll-effects.mdx b/documentation/versioned_docs/version-3/examples/scroll-effects.mdx
deleted file mode 100644
index 64a51ee3b..000000000
--- a/documentation/versioned_docs/version-3/examples/scroll-effects.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-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
-
-More than just translate effects are possible. Here's some examples of the various effects possible.
-
-## Rotation
-
-You can spin an element around it's axis using the [rotate props](/docs/usage/parallax-props#available-css-effects).
-
-### Around the default axis (z-axis)
-
-Use the `rotate` prop to rotate an element around the z-axis. You can pass the `start` and `end` values as `deg` or `turns`. Numbers default to `deg`.
-
-```tsx
-const Component = () => {
- const parallax = useParallax({
- rotate: [0, 360],
- });
- return (
-
- );
-};
-```
-
-
-
-### Around the y-axis
-
-Rotations can be applied to any axis, `x`, `y`, or `z`. Here's an example of a rotation around the `y-axis` for perspective:
-
-```tsx
-const Component = () => {
- const parallax = useParallax({
- rotateY: [0, 360],
- });
- return (
-
- );
-};
-```
-
-
-
-## 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({
- scale: [0.5, 1, 'easeInQuad'],
- });
-
- const frog = useParallax({
- scaleX: [1, 0, 'easeInQuad'],
- });
-
- const moon = useParallax({
- scale: [1.5, 1, 'easeInQuad'],
- });
- return (
-
-
- 🧙🏻♂️
-
-
- 🐸
-
-
- 🌚
-
-