Skip to content

Commit 35a9e36

Browse files
1000ship1000ship
authored
Merge pull request #50 from 1000ship/huzaifah0x00/master
fix: Improve ScrollContainer positioning and code maintenance
2 parents d12256f + 83fa2d4 commit 35a9e36

File tree

9 files changed

+1278
-720
lines changed

9 files changed

+1278
-720
lines changed

‎_readme/update.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,8 @@
4343
## version 0.3.3
4444

4545
- Added 'use client' on top of `ScrollContainer` for supporting NextJS v13+
46+
47+
## version 0.3.4
48+
49+
- Fix scroll parent is not working
50+
- Update example codes

‎examples/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6-
"reinstall": "rm yarn.lock && rm -rf node_modules && yarn install",
6+
"reinstall": "rm -rf .next && yarn cache clean react-scroll-motion && yarn remove react-scroll-motion && yarn add file:../",
77
"dev": "next dev",
88
"build": "next build",
99
"start": "next start",
@@ -13,7 +13,7 @@
1313
"next": "12.1.6",
1414
"react": "18.1.0",
1515
"react-dom": "18.1.0",
16-
"react-scroll-motion": "../"
16+
"react-scroll-motion": "file:../"
1717
},
1818
"devDependencies": {
1919
"@types/node": "^17.0.39",

‎examples/pages/index.tsx‎

Lines changed: 80 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import dynamic from "next/dynamic";
2+
import { useRef } from "react";
3+
24
const Animator = dynamic(
35
import("react-scroll-motion").then((it) => it.Animator),
46
{ ssr: false }
57
);
68

79
import {
8-
ScrollContainer,
9-
ScrollPage,
10+
Animation,
1011
batch,
1112
Fade,
1213
FadeIn,
1314
Move,
1415
MoveIn,
1516
MoveOut,
17+
ScrollContainer,
18+
ScrollPage,
1619
Sticky,
1720
StickyIn,
1821
ZoomIn,
19-
Animation,
2022
} from "react-scroll-motion";
2123

2224
export default function Home() {
@@ -25,71 +27,84 @@ export default function Home() {
2527
const FadeUp = batch(Fade(), Move(), Sticky());
2628

2729
// Make custom animation
28-
const Spin = (cycle: number) =>
30+
const Spin = (cycle: number, direction: "in" | "out" | "both" = "both") =>
2931
({
30-
in: {
31-
style: {
32-
transform: (p) => `rotate(${p * 360 * cycle}deg)`,
33-
},
34-
},
35-
out: {
36-
style: {
37-
transform: (p) => `rotate(${p * 360 * cycle}deg)`,
38-
},
39-
},
32+
in:
33+
direction === "in" || direction === "both"
34+
? { style: { transform: (p) => `rotate(${p * 360 * cycle}deg)` } }
35+
: {},
36+
out:
37+
direction === "out" || direction === "both"
38+
? { style: { transform: (p) => `rotate(${p * 360 * cycle}deg)` } }
39+
: {},
4040
} as Animation);
4141

42+
const parent = useRef<HTMLDivElement>(null);
4243
return (
43-
<ScrollContainer>
44-
<ScrollPage>
45-
<Animator animation={batch(Sticky(), Fade(), Spin(3))}>
46-
<h1 style={{ fontSize: 50 }}>Hello!!!</h1>
47-
</Animator>
48-
</ScrollPage>
49-
<ScrollPage>
50-
<Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}>
51-
<span style={{ fontSize: 30 }}>
52-
Let me show you scroll animation 😀
53-
</span>
54-
</Animator>
55-
</ScrollPage>
56-
<ScrollPage>
57-
<Animator animation={ZoomInScrollOut}>
58-
<span style={{ fontSize: 40 }}>I'm FadeUpScrollOut ✨</span>
59-
</Animator>
60-
</ScrollPage>
61-
<ScrollPage>
62-
<Animator animation={FadeUp}>
63-
<span style={{ fontSize: 40 }}>I'm FadeUp ⛅️</span>
64-
</Animator>
65-
</ScrollPage>
66-
<ScrollPage>
67-
<div
68-
style={{
69-
display: "flex",
70-
justifyContent: "center",
71-
alignItems: "center",
72-
height: "100%",
73-
}}
74-
>
75-
<span style={{ fontSize: 40 }}>
76-
<Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
77-
<Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻‍♀️</Animator>
78-
- I'm Dante Chun -
79-
<Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
80-
<Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
81-
</span>
82-
</div>
83-
</ScrollPage>
84-
<ScrollPage>
85-
<Animator animation={batch(Fade(), Sticky())}>
86-
<span style={{ fontSize: 40 }}>Done</span>
87-
<br />
88-
<span style={{ fontSize: 30 }}>
89-
There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
90-
</span>
91-
</Animator>
92-
</ScrollPage>
93-
</ScrollContainer>
44+
<main>
45+
<section
46+
style={{ height: "100vh", backgroundColor: "skyblue" }}
47+
></section>
48+
49+
<section ref={parent}>
50+
<ScrollContainer scrollParent={parent.current}>
51+
<ScrollPage>
52+
<Animator animation={batch(Sticky(), Fade(), Spin(1, "out"))}>
53+
<h1 style={{ fontSize: 50 }}>Hello!!!</h1>
54+
</Animator>
55+
</ScrollPage>
56+
<ScrollPage>
57+
<Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}>
58+
<span style={{ fontSize: 30 }}>
59+
Let me show you scroll animation 😀
60+
</span>
61+
</Animator>
62+
</ScrollPage>
63+
<ScrollPage>
64+
<Animator animation={ZoomInScrollOut}>
65+
<span style={{ fontSize: 40 }}>I'm FadeUpScrollOut ✨</span>
66+
</Animator>
67+
</ScrollPage>
68+
<ScrollPage>
69+
<Animator animation={FadeUp}>
70+
<span style={{ fontSize: 40 }}>I'm FadeUp ⛅️</span>
71+
</Animator>
72+
</ScrollPage>
73+
<ScrollPage>
74+
<div
75+
style={{
76+
display: "flex",
77+
justifyContent: "center",
78+
alignItems: "center",
79+
height: "100%",
80+
}}
81+
>
82+
<span style={{ fontSize: 40 }}>
83+
<Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
84+
<Animator animation={MoveIn(1000, 0)}>
85+
Nice to meet you 🙋🏻‍♀️
86+
</Animator>
87+
- I'm Dante Chun -
88+
<Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
89+
<Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
90+
</span>
91+
</div>
92+
</ScrollPage>
93+
<ScrollPage>
94+
<Animator animation={batch(Fade(), Sticky())}>
95+
<span style={{ fontSize: 40 }}>Done</span>
96+
<br />
97+
<span style={{ fontSize: 30 }}>
98+
There's FadeAnimation, MoveAnimation, StickyAnimation,
99+
ZoomAnimation
100+
</span>
101+
</Animator>
102+
</ScrollPage>
103+
</ScrollContainer>
104+
</section>
105+
106+
<section style={{ height: "80vh", backgroundColor: "blue" }}></section>
107+
<section style={{ height: "80vh", backgroundColor: "green" }}></section>
108+
</main>
94109
);
95110
}

0 commit comments

Comments
 (0)