Skip to content

Commit faa787f

Browse files
joshuaellisjoshuaellis
authored
feat: add steps easing & clamp function & noise demo (pmndrs#2024)
1 parent 87ebf98 commit faa787f

File tree

18 files changed

+395
-132
lines changed

18 files changed

+395
-132
lines changed

‎.changeset/witty-tables-jam.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
'@react-spring/core': minor
3+
'@react-spring/shared': minor
4+
'@react-spring/web': minor
5+
'@react-spring/animated': minor
6+
'@react-spring/parallax': minor
7+
'@react-spring/rafz': minor
8+
'react-spring': minor
9+
'@react-spring/types': minor
10+
'@react-spring/konva': minor
11+
'@react-spring/native': minor
12+
'@react-spring/three': minor
13+
'@react-spring/zdog': minor
14+
---
15+
16+
feat: add steps easing

‎demo/src/sandboxes/grain/thumbnail.png‎

110 KB
Loading

‎demo/src/sandboxes/noise/.prettierrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"arrowParens": "avoid",
3+
"jsxBracketSameLine": true,
4+
"printWidth": 120,
5+
"semi": false,
6+
"singleQuote": true,
7+
"tabWidth": 2,
8+
"trailingComma": "es5"
9+
}

‎demo/src/sandboxes/noise/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "react-typescript",
3+
"version": "1.0.0",
4+
"description": "React and TypeScript example starter project",
5+
"keywords": [
6+
"typescript",
7+
"react",
8+
"starter"
9+
],
10+
"main": "src/index.tsx",
11+
"dependencies": {
12+
"@react-spring/web": "9.5.5",
13+
"react": "18.2.0",
14+
"react-dom": "18.2.0",
15+
"react-scripts": "5.0.1"
16+
},
17+
"devDependencies": {
18+
"@types/react": "17.0.20",
19+
"@types/react-dom": "17.0.9",
20+
"typescript": "4.4.2"
21+
},
22+
"scripts": {
23+
"start": "react-scripts start",
24+
"build": "react-scripts build",
25+
"test": "react-scripts test --env=jsdom",
26+
"eject": "react-scripts eject"
27+
},
28+
"browserslist": [
29+
">0.2%",
30+
"not dead",
31+
"not ie <= 11",
32+
"not op_mini all"
33+
]
34+
}

‎demo/src/sandboxes/noise/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎demo/src/sandboxes/noise/public/noise.png‎

22.4 KB
Loading

‎demo/src/sandboxes/noise/src/App.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { animated, useSpring, easings } from '@react-spring/web'
2+
3+
import styles from './styles.module.css'
4+
5+
export default function App() {
6+
const { value } = useSpring({
7+
from: {
8+
value: 0,
9+
},
10+
to: {
11+
value: 1,
12+
},
13+
loop: true,
14+
config: {
15+
duration: 8000,
16+
easing: easings.steps(10, 'start'),
17+
},
18+
})
19+
20+
return (
21+
<div className={styles.container}>
22+
<animated.div
23+
style={{
24+
x: value.to({
25+
output: ['0%', '-5%', '-15%', '7%', '-5%', '-15%', '15%', '0%', '3%', '-10%'],
26+
}),
27+
y: value.to({
28+
output: ['0%', '-10%', '5%', '-25%', '25%', '10%', '0%', '15%', '35%', '10%'],
29+
}),
30+
}}
31+
className={styles.noise}
32+
/>
33+
</div>
34+
)
35+
}

‎demo/src/sandboxes/noise/src/index.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
html,
2+
body,
3+
#root {
4+
height: 100%;
5+
width: 100%;
6+
}
7+
8+
body {
9+
font-family: system-ui;
10+
margin: 0;
11+
}
12+
13+
*,
14+
*:after,
15+
*:before {
16+
box-sizing: border-box;
17+
}

‎demo/src/sandboxes/noise/src/index.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import "./index.css";
4+
5+
import App from "./App";
6+
7+
const rootElement = document.getElementById("root")!;
8+
createRoot(rootElement).render(
9+
<StrictMode>
10+
<App />
11+
</StrictMode>
12+
);

‎demo/src/sandboxes/noise/src/styles.module.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.container {
2+
width: 100vw;
3+
height: 100vh;
4+
position: relative;
5+
overflow: hidden;
6+
background-color: black;
7+
}
8+
9+
.noise {
10+
opacity: 0.2;
11+
inset: -200%;
12+
width: 400%;
13+
height: 400%;
14+
position: absolute;
15+
background-size: 256px 256px;
16+
background-repeat: repeat;
17+
background: url("https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png");
18+
}

0 commit comments

Comments
 (0)