├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.js
├── examples
└── scroll-progress
│ ├── Example.js
│ └── styles.css
├── index.css
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-scrolling
2 |
3 | Collection of examples showcasing effects we can create on scroll using React JS.
4 |
5 | ### `npm start`
6 |
7 | Runs the app in the development mode.\
8 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
9 |
10 | ### running the examples
11 |
12 | Modify App.js and import the example you'd like to run.
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-scrolling",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "gsap": "^3.11.5",
7 | "react": "^18.2.0",
8 | "react-dom": "^18.2.0",
9 | "react-scripts": "5.0.1"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build"
14 | },
15 | "eslintConfig": {
16 | "extends": [
17 | "react-app"
18 | ]
19 | },
20 | "browserslist": {
21 | "production": [
22 | ">0.2%",
23 | "not dead",
24 | "not op_mini all"
25 | ],
26 | "development": [
27 | "last 1 chrome version",
28 | "last 1 firefox version",
29 | "last 1 safari version"
30 | ]
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/react-scrolling/71912a736c2750211da08556f8fa6c38d9d277aa/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
19 |
20 |
24 |
33 | React Scrolling Effects
34 |
35 |
36 |
37 |
38 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/react-scrolling/71912a736c2750211da08556f8fa6c38d9d277aa/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/react-scrolling/71912a736c2750211da08556f8fa6c38d9d277aa/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { Example } from "./examples/scroll-progress/Example";
2 |
3 | function App() {
4 | return ;
5 | }
6 |
7 | export default App;
8 |
--------------------------------------------------------------------------------
/src/examples/scroll-progress/Example.js:
--------------------------------------------------------------------------------
1 | import "./styles.css";
2 | import gsap from "gsap";
3 | import { ScrollTrigger } from "gsap/all";
4 | import { useEffect } from "react";
5 |
6 | export const Example = () => {
7 | useEffect(() => {
8 | gsap.registerPlugin(ScrollTrigger);
9 | gsap.to("progress", {
10 | value: 100,
11 | scrollTrigger: {
12 | scrub: 0.5,
13 | },
14 | });
15 | }, []);
16 |
17 | return (
18 | <>
19 |
20 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/examples/scroll-progress/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #f8f4ff;
3 | font-family: "Euclid Circular A", "Poppins";
4 | }
5 |
6 | progress {
7 | position: fixed;
8 | z-index: 1;
9 | top: 0;
10 | left: 0;
11 | -webkit-appearance: none;
12 | appearance: none;
13 | width: 100%;
14 | height: 8px;
15 | border: none;
16 | background: transparent;
17 | }
18 |
19 | progress::-webkit-progress-bar {
20 | background: #ffffff;
21 | }
22 |
23 | progress::-webkit-progress-value {
24 | background-color: #8f44fd;
25 | }
26 |
27 | nav {
28 | position: fixed;
29 | top: 0;
30 | left: 0;
31 | width: 100%;
32 | height: 72px;
33 | background: #ffffff;
34 | box-shadow: 0 0 10px rgb(0 0 0 / 10%);
35 | display: flex;
36 | align-items: center;
37 | padding: 0 20px;
38 | }
39 |
40 | nav h1 {
41 | font-weight: 500;
42 | font-size: 18px;
43 | }
44 |
45 | section {
46 | min-height: 100vh;
47 | }
48 |
49 | section:nth-child(even) {
50 | background: linear-gradient(to top, #b044fd, #8f44fd);
51 | color: #f7f7f7;
52 | }
53 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | const root = ReactDOM.createRoot(document.getElementById("root"));
7 | root.render();
8 |
--------------------------------------------------------------------------------