Skip to content

Commit 3b40e77

Browse files
aholachekaholachek
committed
listen for scroll
1 parent 59ce254 commit 3b40e77

File tree

9 files changed

+58
-23
lines changed

9 files changed

+58
-23
lines changed

‎demo/index.css‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
/* styling */
1818

1919
.card--hidden {
20-
display:none !important;
20+
display: none !important;
2121
}
2222

2323
.card--expanded {
@@ -183,12 +183,25 @@ button {
183183
nested grid
184184
========================================================================== */
185185

186-
.nested-grid {
187-
display:grid;
188-
grid-auto-flow: dense;
189-
grid-gap: .5rem;
190-
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
191-
grid-template-rows: repeat(auto-fit, minmax(2rem, 1fr));
192-
}
186+
.nested-grid {
187+
display: grid;
188+
grid-auto-flow: dense;
189+
grid-gap: 0.5rem;
190+
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
191+
grid-template-rows: repeat(auto-fit, minmax(2rem, 1fr));
192+
}
193193

194+
.scroll-example {
195+
width: 500px;
196+
overflow-x: scroll;
197+
display: flex;
198+
}
194199

200+
.scroll-example div {
201+
margin-right: 1rem;
202+
display: flex;
203+
justify-content: center;
204+
align-items: center;
205+
height: 8rem;
206+
flex: 0 0 100px;
207+
}

‎demo/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@
1111
</head>
1212

1313
<body>
14+
<div class="scroll-example">
15+
<div class="card--1">1</div>
16+
<div class="card--2">2</div>
17+
<div class="card--3">3</div>
18+
<div class="card--2">4</div>
19+
<div class="card--1">5</div>
20+
<div class="card--3">6</div>
21+
<div class="">7</div>
22+
<div class="card--3">8</div>
23+
<div class="card--1">9</div>
24+
<div class="card--2">19</div>
25+
</div>
1426
<div class="p-4">
1527
<div class="mb-4">
1628
<p>click a card to expand it</p>

‎demo/index.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const { unwrapGrid } = wrapGrid(grid, {
3737
easing: 'backOut',
3838
onStart: els => console.log('onstart', els),
3939
onEnd: els => console.log('onend', els),
40-
watchScroll: true,
40+
containerScroll: true,
4141
});
4242

4343
document
@@ -166,3 +166,19 @@ hiddenCardGrid.addEventListener('click', ev => {
166166
});
167167

168168
wrapGrid(hiddenCardGrid, { stagger: 20, easing: 'backOut', duration: 10000 });
169+
170+
// scroll test
171+
172+
const scrollTest = document.querySelector('.scroll-example');
173+
scrollTest.addEventListener('click', () => {
174+
const children = scrollTest.children;
175+
const reversed = [...children].reverse();
176+
scrollTest.innerHTML = '';
177+
reversed.forEach(c => {
178+
scrollTest.appendChild(c);
179+
});
180+
});
181+
wrapGrid(scrollTest, {
182+
duration: 2000,
183+
containerScroll: true,
184+
});

‎dist/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { WrapGridArguments } from './types';
2-
export declare const wrapGrid: (container: HTMLElement, { duration, stagger, easing, onStart, onEnd, watchScroll, }?: WrapGridArguments) => {
2+
export declare const wrapGrid: (container: HTMLElement, { duration, stagger, easing, onStart, onEnd, containerScroll, }?: WrapGridArguments) => {
33
unwrapGrid: () => void;
44
forceGridAnimation: () => void;
55
};

‎dist/main.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/types.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,5 @@ export interface WrapGridArguments {
4444
easing?: keyof PopmotionEasing;
4545
onStart?: (animatedChildren: HTMLElement[]) => void;
4646
onEnd?: (animatedChildren: HTMLElement[]) => void;
47-
watchScroll?: boolean;
47+
containerScroll?: boolean;
4848
}

‎src/index.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ export const wrapGrid = (
108108
easing = 'easeInOut',
109109
onStart = () => {},
110110
onEnd = () => {},
111-
watchScroll = false,
112111
}: WrapGridArguments = {},
113112
) => {
114113
if (!popmotionEasing[easing]) {
@@ -155,9 +154,7 @@ export const wrapGrid = (
155154
const throttledScrollListener = throttle(() => {
156155
recordPositions(container.children as HTMLCollectionOf<HTMLElement>);
157156
}, 20);
158-
if (watchScroll) {
159-
container.addEventListener('scroll', throttledScrollListener);
160-
}
157+
container.addEventListener('scroll', throttledScrollListener);
161158

162159
const mutationCallback = (
163160
mutationsList: MutationRecord[] | 'forceGridAnimation',
@@ -330,9 +327,7 @@ export const wrapGrid = (
330327
});
331328
const unwrapGrid = () => {
332329
window.removeEventListener('resize', throttledResizeListener);
333-
if (watchScroll) {
334-
container.removeEventListener('scroll', throttledScrollListener);
335-
}
330+
container.removeEventListener('scroll', throttledScrollListener);
336331
observer.disconnect();
337332
};
338333
const forceGridAnimation = () => mutationCallback('forceGridAnimation');

‎src/types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,5 +52,4 @@ export interface WrapGridArguments {
5252
easing?: keyof PopmotionEasing;
5353
onStart?: (animatedChildren: HTMLElement[]) => void;
5454
onEnd?: (animatedChildren: HTMLElement[]) => void;
55-
watchScroll?: boolean;
5655
}

0 commit comments

Comments
 (0)