Skip to content

Commit 83c6618

Browse files
julianbenegasjulianbenegas
committed
make disabled work
1 parent 3b6f605 commit 83c6618

File tree

2 files changed

+132
-114
lines changed

2 files changed

+132
-114
lines changed

‎scrollytelling/src/components/stagger/index.tsx

Lines changed: 118 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
* -----------------------------------------------------------------------------------------------*/
44

55
import * as React from "react";
6-
import { StaggerBaseDef, TweenWithChildrenDef, TweenWithTargetDef } from "../../types";
6+
import {
7+
StaggerBaseDef,
8+
TweenWithChildrenDef,
9+
TweenWithTargetDef,
10+
} from "../../types";
711
import { Animation } from "../animation";
812
import { isDev } from "../../util";
913

@@ -23,125 +27,127 @@ export function Stagger(
2327
export function Stagger({
2428
children,
2529
overlap,
26-
tween
30+
tween,
31+
disabled = false,
2732
}: StaggerBaseDef & {
2833
children?: React.ReactNode[];
2934
tween: TweenWithChildrenDef | TweenWithTargetDef;
3035
}) {
31-
32-
const isTweenWithTarget = 'target' in tween;
33-
const targetLength = isTweenWithTarget && Array.isArray(tween.target) ? tween.target.length : children?.length;
36+
const isTweenWithTarget = "target" in tween;
37+
const targetLength =
38+
isTweenWithTarget && Array.isArray(tween.target)
39+
? tween.target.length
40+
: children?.length;
3441

3542
const timeline = React.useMemo(() => {
36-
if(tween?.start === undefined || tween?.end === undefined) {
43+
if (tween?.start === undefined || tween?.end === undefined) {
3744
if (isDev) {
38-
console.warn('Stagger needs a start and end value');
45+
throw new Error("Stagger needs a start and end value");
46+
} else {
47+
console.warn("Stagger needs a start and end value");
3948
}
4049

4150
return [];
4251
}
4352

44-
return getStaggeredTimeline(
45-
{
46-
start: tween?.start,
47-
end: tween?.end,
48-
chunks: targetLength,
49-
overlap: overlap,
50-
}
51-
)
53+
return getStaggeredTimeline({
54+
start: tween?.start,
55+
end: tween?.end,
56+
chunks: targetLength,
57+
overlap: overlap,
58+
});
5259
}, [targetLength, overlap, tween?.end, tween?.start]);
5360

5461
if (children) {
55-
return children.map(
56-
(child, i) => {
57-
const currTween = timeline[i];
62+
return children.map((child, i) => {
63+
const currTween = timeline[i];
5864

59-
if (!currTween) {
60-
return null;
61-
}
62-
63-
return (
64-
<Animation
65-
key={i}
66-
tween={{
67-
...tween,
68-
start: currTween.start,
69-
end: currTween.end,
70-
}}
71-
>
72-
{child}
73-
</Animation>
74-
);
65+
if (!currTween) {
66+
return null;
7567
}
76-
);
68+
69+
return (
70+
<Animation
71+
key={i}
72+
tween={{
73+
...tween,
74+
start: currTween.start,
75+
end: currTween.end,
76+
}}
77+
disabled={disabled}
78+
>
79+
{child}
80+
</Animation>
81+
);
82+
});
7783
} else if (isTweenWithTarget) {
7884
const target = tween.target;
7985

8086
if (Array.isArray(target)) {
81-
82-
return target.map(
83-
(target, i) => {
84-
const currTween = timeline[i];
85-
86-
if (!currTween) {
87-
return null;
88-
}
89-
90-
if(tween.to) {
91-
return (
92-
<Animation
93-
key={i}
94-
tween={{
95-
...tween,
96-
target: target,
97-
start: currTween.start,
98-
end: currTween.end,
99-
to: {
100-
...tween.to,
101-
onUpdateParams: [i]
102-
}
103-
}}
104-
/>
105-
);
106-
} else if (tween.from) {
107-
return (
108-
<Animation
109-
key={i}
110-
tween={{
111-
...tween,
112-
target: target,
113-
start: currTween.start,
114-
end: currTween.end,
115-
from: { ...tween.from, onUpdateParams: [i] }
116-
}}
117-
/>
118-
)
119-
} else if (tween.fromTo) {
120-
return (
121-
<Animation
122-
key={i}
123-
tween={{
124-
...tween,
125-
target: target,
126-
start: currTween.start,
127-
end: currTween.end,
128-
fromTo: [
129-
{
130-
...tween.fromTo[0],
131-
},
132-
{
133-
...tween.fromTo[1],
134-
onUpdateParams: [i],
135-
}
136-
]
137-
}}
138-
/>
139-
)
140-
}
87+
return target.map((target, i) => {
88+
const currTween = timeline[i];
89+
90+
if (!currTween) {
91+
return null;
14192
}
142-
);
93+
94+
if (tween.to) {
95+
return (
96+
<Animation
97+
key={i}
98+
tween={{
99+
...tween,
100+
target: target,
101+
start: currTween.start,
102+
end: currTween.end,
103+
to: {
104+
...tween.to,
105+
onUpdateParams: [i],
106+
},
107+
}}
108+
disabled={disabled}
109+
/>
110+
);
111+
} else if (tween.from) {
112+
return (
113+
<Animation
114+
key={i}
115+
tween={{
116+
...tween,
117+
target: target,
118+
start: currTween.start,
119+
end: currTween.end,
120+
from: { ...tween.from, onUpdateParams: [i] },
121+
}}
122+
disabled={disabled}
123+
/>
124+
);
125+
} else if (tween.fromTo) {
126+
return (
127+
<Animation
128+
key={i}
129+
tween={{
130+
...tween,
131+
target: target,
132+
start: currTween.start,
133+
end: currTween.end,
134+
fromTo: [
135+
{
136+
...tween.fromTo[0],
137+
},
138+
{
139+
...tween.fromTo[1],
140+
onUpdateParams: [i],
141+
},
142+
],
143+
}}
144+
disabled={disabled}
145+
/>
146+
);
147+
}
148+
});
143149
} else if (isDev) {
144-
console.warn('Stagger target must be an array');
150+
throw new Error("Stagger target must be an array");
145151
}
146152
}
147153

@@ -152,12 +158,12 @@ export function Stagger({
152158
const overlapDurationArrayByFactor = (
153159
durations: { start: number; end: number }[],
154160
factor: number
155-
) => {
161+
) => {
156162
const first = durations[0];
157163
const last = durations[durations.length - 1];
158-
159-
if(first === undefined || last === undefined) {
160-
throw Error('Durations array is empty');
164+
165+
if (first === undefined || last === undefined) {
166+
throw Error("Durations array is empty");
161167
}
162168

163169
/*
@@ -183,8 +189,14 @@ const overlapDurationArrayByFactor = (
183189
const newEnd = duration.end - overlapDurationPerDuration * i;
184190

185191
return {
186-
start: Math.max(veryStart + (newStart - veryStart) * afterOverlapDurationDiffFactor, 0),
187-
end: Math.min(veryStart + (newEnd - veryStart) * afterOverlapDurationDiffFactor, 100),
192+
start: Math.max(
193+
veryStart + (newStart - veryStart) * afterOverlapDurationDiffFactor,
194+
0
195+
),
196+
end: Math.min(
197+
veryStart + (newEnd - veryStart) * afterOverlapDurationDiffFactor,
198+
100
199+
),
188200
};
189201
});
190202

@@ -199,8 +211,8 @@ export const getStaggeredTimeline = (config: {
199211
}) => {
200212
const { start, end, overlap = 0, chunks = 1 } = config;
201213

202-
if(overlap > 1 || overlap < 0) {
203-
throw new Error('Overlap must be between 0 and 1');
214+
if (overlap > 1 || overlap < 0) {
215+
throw new Error("Overlap must be between 0 and 1");
204216
}
205217

206218
const duration = end - start;
@@ -221,4 +233,4 @@ export const getStaggeredTimeline = (config: {
221233
}
222234

223235
return animationChunks;
224-
};
236+
};

‎scrollytelling/src/types/index.ts

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { gsap } from "gsap";
33
// ---- Utils
44
export type DataOrDataArray<T> = T | Array<T>;
55
export type UnitValue<Unit = string> = { value: number; unit: Unit };
6-
export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
7-
Pick<T, Exclude<keyof T, Keys>>
8-
& {
9-
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
10-
}[Keys]
6+
export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
7+
T,
8+
Exclude<keyof T, Keys>
9+
> &
10+
{
11+
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
12+
}[Keys];
1113

1214
// ---- Tween Specifics
1315
export type FromToOptions =
@@ -48,12 +50,16 @@ export type WaypointBaseDef = {
4850

4951
export type StaggerBaseDef = {
5052
overlap: number;
51-
}
53+
disabled?: boolean;
54+
};
5255

5356
// FIXME: This name is not clear, why SimpleTween doesn't consume TweenBaseDef?
54-
export type SimpleTween = FromToOptions & { duration: number; forwards?: boolean };
57+
export type SimpleTween = FromToOptions & {
58+
duration: number;
59+
forwards?: boolean;
60+
};
5561

5662
// ---- Aliases
57-
export type TweenVars = gsap.TweenVars;
63+
export type TweenVars = gsap.TweenVars;
5864

5965
export type Plugin = Parameters<typeof gsap.registerPlugin>[number];

0 commit comments

Comments
 (0)