Skip to content

Commit a8d569d

Browse files
jscottsmithjscottsmith
committed
add custom easing
1 parent 4c7fb23 commit a8d569d

File tree

6 files changed

+171
-25
lines changed

6 files changed

+171
-25
lines changed

‎docs/parallax-component.md

Lines changed: 68 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,23 +48,71 @@ All props for creating effects are defined by a _start_ and _end_ value represen
4848

4949
The following are all props that can be passed to the `<Parallax>` component:
5050

51-
| Name | Type | Default | Description |
52-
| -------------- | :----------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
53-
| **speed** | `number` | | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster. |
54-
| **translateX** | `string[]` or `number[]` | | Start and end translation on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
55-
| **translateY** | `string[]` or `number[]` | | Start and end translation on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. |
56-
| **rotate** | `string[]` or `number[]` | | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
57-
| **rotateX** | `string[]` or `number[]` | | Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
58-
| **rotateY** | `string[]` or `number[]` | | Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
59-
| **rotateZ** | `string[]` or `number[]` | | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
60-
| **scale** | `number[]` | | Start and end scale on x-axis and y-axis. |
61-
| **scaleX** | `number[]` | | Start and end scale on x-axis. |
62-
| **scaleY** | `number[]` | | Start and end scale on y-axis. |
63-
| **scaleZ** | `number[]` | | Start and end scale on z-axis. |
64-
| **opacity** | `number[]` | | Start and end opacity value. |
65-
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. |
66-
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
67-
| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. |
68-
| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. |
69-
| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
70-
| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
51+
| Name | Type | Default | Description |
52+
| -------------- | :----------------------: | :------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
53+
| **speed** | `number` | | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster. |
54+
| **translateX** | `string[]` or `number[]` | | Start and end translation on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
55+
| **translateY** | `string[]` or `number[]` | | Start and end translation on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. |
56+
| **rotate** | `string[]` or `number[]` | | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
57+
| **rotateX** | `string[]` or `number[]` | | Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
58+
| **rotateY** | `string[]` or `number[]` | | Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
59+
| **rotateZ** | `string[]` or `number[]` | | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
60+
| **scale** | `number[]` | | Start and end scale on x-axis and y-axis. |
61+
| **scaleX** | `number[]` | | Start and end scale on x-axis. |
62+
| **scaleY** | `number[]` | | Start and end scale on y-axis. |
63+
| **scaleZ** | `number[]` | | Start and end scale on z-axis. |
64+
| **opacity** | `number[]` | | Start and end opacity value. |
65+
| **easing** | `string` or `number[]` | | String representing an [easing preset](#easing-preset) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function). |
66+
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. |
67+
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
68+
| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. |
69+
| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. |
70+
| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
71+
| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
72+
73+
### Easing Presets
74+
75+
The following easing values are preset and can be used as easing
76+
77+
```jsx
78+
<Parallax easing="easeInCubic" />
79+
```
80+
81+
```
82+
ease
83+
easeIn
84+
easeOut
85+
easeInOut
86+
easeInQuad
87+
easeInCubic
88+
easeInQuart
89+
easeInQuint
90+
easeInSine
91+
easeInExpo
92+
easeInCirc
93+
easeOutQuad
94+
easeOutCubic
95+
easeOutQuart
96+
easeOutQuint
97+
easeOutSine
98+
easeOutExpo
99+
easeOutCirc
100+
easeInOutQuad
101+
easeInOutCubic
102+
easeInOutQuart
103+
easeInOutQuint
104+
easeInOutSine
105+
easeInOutExpo
106+
easeInOutCirc
107+
easeInBack
108+
easeOutBack
109+
easeInOutBack
110+
```
111+
112+
### Cubic Bezier Easing Function
113+
114+
Just like with CSS `cubic-bezier(0.2,-0.67,1,-0.62);`, you can supply the 4 params to a custom bezier function.
115+
116+
```jsx
117+
<Parallax easing={[0.2, -0.6, 1, -0.6]} />
118+
```

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
}
7575
],
7676
"dependencies": {
77-
"parallax-controller": "0.1.14"
77+
"parallax-controller": "0.1.17"
7878
},
7979
"devDependencies": {
8080
"@babel/core": "^7.16.0",

‎src/components/Parallax/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
5050
scaleY: props.scaleY,
5151
scaleZ: props.scaleZ,
5252
opacity: props.opacity,
53+
easing: props.easing,
5354
}),
5455
};
5556
}
@@ -90,6 +91,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
9091
props.scaleZ,
9192
props.speed,
9293
props.opacity,
94+
props.easing,
9395
]);
9496

9597
const Outer = props.tagOuter;

‎src/components/Parallax/types.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ValidEasingPresets } from 'parallax-controller';
2+
13
export interface ParallaxProps {
24
/**
35
* A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element
@@ -131,6 +133,13 @@ export interface ParallaxProps {
131133
* Second value is the ending opacity
132134
*/
133135
opacity?: number[];
136+
/**
137+
* Easing preset or custom params for a cubic bezier easing function.
138+
*
139+
* Example preset: 'easeInOut'
140+
* Example params: [0.42, 0, 0.58, 1]
141+
*/
142+
easing?: number[] | ValidEasingPresets;
134143
/**
135144
* Optionally pass additional class names to be added to the outermost parallax element.
136145
*/

‎stories/Parallax/7_ParallaxEasing.stories.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import { Parallax, ParallaxProvider } from '../../src';
3+
import { Element } from '../Element/Element';
4+
import styles from './Parallax.module.scss';
5+
6+
const options = [
7+
'ease',
8+
'easeIn',
9+
'easeOut',
10+
'easeInOut',
11+
'easeInQuad',
12+
'easeInCubic',
13+
'easeInQuart',
14+
'easeInQuint',
15+
'easeInSine',
16+
'easeInExpo',
17+
'easeInCirc',
18+
'easeOutQuad',
19+
'easeOutCubic',
20+
'easeOutQuart',
21+
'easeOutQuint',
22+
'easeOutSine',
23+
'easeOutExpo',
24+
'easeOutCirc',
25+
'easeInOutQuad',
26+
'easeInOutCubic',
27+
'easeInOutQuart',
28+
'easeInOutQuint',
29+
'easeInOutSine',
30+
'easeInOutExpo',
31+
'easeInOutCirc',
32+
'easeInBack',
33+
'easeOutBack',
34+
'easeInOutBack',
35+
];
36+
37+
const Template = (args) => {
38+
const amount = 5;
39+
const offA = -50;
40+
const offB = 50;
41+
const unit = '%';
42+
const elements = new Array(amount * 2 + 1).fill(null).map((x, i) => i);
43+
44+
return (
45+
<ParallaxProvider>
46+
<div className="vertical">
47+
<div className={`${styles.elements} ${styles.linear}`}>
48+
{elements.map((_, i) => {
49+
const n = i - amount;
50+
return (
51+
<Parallax
52+
key={n}
53+
className={styles.smallLinear}
54+
easing={args.easing}
55+
translateX={[`${offA * n}${unit}`, `${offB * n}${unit}`]}
56+
>
57+
<Element name={n * -1} />
58+
</Parallax>
59+
);
60+
})}
61+
</div>
62+
</div>
63+
</ParallaxProvider>
64+
);
65+
};
66+
67+
export const WithEasing = Template.bind({});
68+
WithEasing.argTypes = {
69+
easing: {
70+
control: { type: 'select', options },
71+
},
72+
};
73+
WithEasing.args = {
74+
easing: options[0],
75+
};
76+
77+
export default {
78+
title: '<Parallax> Easing',
79+
component: WithEasing,
80+
};

‎yarn.lock

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4337,6 +4337,11 @@ better-opn@^2.1.1:
43374337
dependencies:
43384338
open "^7.0.3"
43394339

4340+
bezier-easing@^2.1.0:
4341+
version "2.1.0"
4342+
resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
4343+
integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY=
4344+
43404345
big.js@^5.2.2:
43414346
version "5.2.2"
43424347
resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -11050,10 +11055,12 @@ pako@~1.0.5:
1105011055
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
1105111056
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
1105211057

11053-
parallax-controller@0.1.14:
11054-
version "0.1.14"
11055-
resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.14.tgz#aee3459754fe08ca29898fc1b8721d785737cdae"
11056-
integrity sha512-lzrnXq/kMUqZ5IwPNK/kzHR4obBYgeBEzijt/zqAkLJ7AAHvhdtoizb+wyVfmpGK5OCFAthwl/9q9kIrAHu7qw==
11058+
parallax-controller@0.1.17:
11059+
version "0.1.17"
11060+
resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.17.tgz#ef135fb4d4934dcdc132c27756deac3379997b2c"
11061+
integrity sha512-DwWFjmerd8YqMX0iSy2LeAQjF646hcDoFYiwCa+GOYJqmIhjLjKxy/dY2uRkXKm4oGKBde61CDRLwNfOq0KeFw==
11062+
dependencies:
11063+
bezier-easing "^2.1.0"
1105711064

1105811065
parallel-transform@^1.1.0:
1105911066
version "1.2.0"

0 commit comments

Comments
 (0)