Skip to content

Commit d80dbb6

Browse files
Merge pull request #39 from basementstudio/jb/disabled-debugging
default `disabled` to `false`
2 parents a0c8313 + cdfb587 commit d80dbb6

File tree

8 files changed

+121
-13
lines changed

8 files changed

+121
-13
lines changed

scrollytelling/CHANGELOG.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
# @bsmnt/scrollytelling
22

3+
## 0.2.4
4+
5+
### Patch Changes
6+
7+
- 56586af: Default disabled value to false
8+
- abe6bb9: Tweak disabled
9+
10+
## 0.2.4-next.1
11+
12+
### Patch Changes
13+
14+
- Tweak disabled
15+
16+
## 0.2.4-next.0
17+
18+
### Patch Changes
19+
20+
- Default disabled value to false
21+
322
## 0.2.3
423

524
### Patch Changes

scrollytelling/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@bsmnt/scrollytelling",
33
"author": "JB <jb@basement.studio>",
4-
"version": "0.2.3",
4+
"version": "0.2.4",
55
"main": "./dist/index.js",
66
"module": "./dist/index.mjs",
77
"types": "./dist/index.d.ts",

scrollytelling/src/components/animation/index.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,19 @@ export function Animation(props: {
3636
disabled?: boolean;
3737
}): React.ReactElement;
3838

39-
export function Animation(props: AnimationProps): React.ReactElement | null {
39+
export function Animation({
40+
tween,
41+
children,
42+
disabled = false,
43+
}: AnimationProps): React.ReactElement | null {
4044
const ref = React.useRef<HTMLElement>(null);
4145
const id = React.useId();
4246

4347
const { timeline } = useScrollytelling();
4448
const { getTimelineSpace } = useDispatcher();
4549

4650
React.useEffect(() => {
47-
if (!timeline || !props.tween || props.disabled) return;
51+
if (!timeline || !tween || disabled) return;
4852

4953
const addTweenToTimeline = (
5054
tween: TweenWithChildrenDef | TweenWithTargetDef
@@ -75,24 +79,24 @@ export function Animation(props: AnimationProps): React.ReactElement | null {
7579
} else return () => undefined;
7680
};
7781

78-
if (Array.isArray(props.tween)) {
79-
const cleanupTweens = props.tween.map((tween) => {
82+
if (Array.isArray(tween)) {
83+
const cleanupTweens = tween.map((tween) => {
8084
const cleanup = addTweenToTimeline(tween);
8185
return cleanup;
8286
});
8387
return () => {
8488
cleanupTweens.forEach((cleanup) => cleanup?.());
8589
};
8690
} else {
87-
const cleanup = addTweenToTimeline(props.tween);
91+
const cleanup = addTweenToTimeline(tween);
8892
return () => {
8993
cleanup?.();
9094
};
9195
}
92-
}, [getTimelineSpace, id, props.tween, timeline, props.disabled]);
96+
}, [getTimelineSpace, id, tween, timeline, disabled]);
9397

94-
if (props.children) {
95-
return <Slot ref={ref}>{props.children}</Slot>;
98+
if (children) {
99+
return <Slot ref={ref}>{children}</Slot>;
96100
}
97101
return null;
98102
}

scrollytelling/src/components/parallax/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ interface ParallaxProps {
3434
export const Parallax: React.FC<ParallaxProps> = ({
3535
children,
3636
tween,
37-
disabled,
37+
disabled = false,
3838
}): JSX.Element => {
3939
if (!tween.movementY && !tween.movementX) {
4040
throw new Error(

scrollytelling/src/primitive.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Scrollytelling = ({
3535
scrub,
3636
defaults,
3737
toggleActions,
38-
disabled,
38+
disabled = false,
3939
}: {
4040
children?: React.ReactNode;
4141
debug?: boolean;

website/CHANGELOG.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# website
2+
3+
## 0.1.1
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [56586af]
8+
- Updated dependencies [abe6bb9]
9+
- @bsmnt/scrollytelling@0.2.4
10+
11+
## 0.1.1-next.1
12+
13+
### Patch Changes
14+
15+
- Updated dependencies
16+
- @bsmnt/scrollytelling@0.2.4-next.1
17+
18+
## 0.1.1-next.0
19+
20+
### Patch Changes
21+
22+
- Updated dependencies
23+
- @bsmnt/scrollytelling@0.2.4-next.0

website/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "website",
33
"private": true,
4-
"version": "0.1.0",
4+
"version": "0.1.1",
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",
@@ -10,7 +10,7 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13-
"@bsmnt/scrollytelling": "*",
13+
"@bsmnt/scrollytelling": "0.2.4",
1414
"@react-three/drei": "^9.65.3",
1515
"@react-three/fiber": "^8.12.0",
1616
"@types/three": "^0.150.1",

website/src/app/debug/page.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import * as Scrollytelling from "~/lib/scrollytelling-client";
5+
6+
const texts = ["one", "two", "three"];
7+
8+
export default function Page() {
9+
const [isDisabled, setIsDisabled] = useState<boolean | undefined>(undefined);
10+
11+
return (
12+
<main>
13+
<div
14+
style={{
15+
position: "fixed",
16+
top: 0,
17+
right: 0,
18+
zIndex: 100,
19+
}}
20+
>
21+
<button onClick={() => setIsDisabled((p) => false)}>
22+
Toggle Disabled
23+
</button>
24+
<p>Disabled: {JSON.stringify(isDisabled)}</p>
25+
</div>
26+
<div
27+
style={{
28+
height: "100vh",
29+
backgroundColor: "blue",
30+
}}
31+
/>
32+
{texts.map((text, i) => {
33+
return (
34+
<Scrollytelling.Root disabled={isDisabled} key={i}>
35+
<div style={{ height: "200vh", background: "black" }}>
36+
<div style={{ position: "sticky", top: 0 }}>
37+
<Scrollytelling.Animation
38+
tween={{
39+
start: 0,
40+
end: 100,
41+
to: { scale: 1.5 },
42+
}}
43+
disabled={isDisabled}
44+
>
45+
<h1
46+
style={{
47+
fontSize: "5rem",
48+
transformOrigin: "top left",
49+
}}
50+
>
51+
{text}
52+
</h1>
53+
</Scrollytelling.Animation>
54+
</div>
55+
</div>
56+
</Scrollytelling.Root>
57+
);
58+
})}
59+
<div style={{ height: "100vh", backgroundColor: "red" }} />
60+
</main>
61+
);
62+
}

0 commit comments

Comments
 (0)