195 | ));
196 |
--------------------------------------------------------------------------------
/packages/docz/src/components/Controls.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Controls
3 | menu: Components
4 | ---
5 |
6 | import { Fragment } from 'react';
7 | import { Playground, Props } from 'docz'
8 | import { Controls, PlayState } from './../../../react-gsap/src/'
9 | import { Tween } from './Tween'
10 |
11 | # Controls
12 |
13 | The Controls component is a helper that you can use to debug your animations.
14 | Just wrap it around a Tween or Timeline component and you'll get control buttons and a slider.
15 |
16 | With the optional `playState` prop you can set an initial play state.
17 |
18 | You can use the `PlayState` enum/object or just the strings "play", "restart", "reverse", "restartReverse", "stop", "stopEnd", "pause" or "resume".
19 |
20 | import { Controls, PlayState, Tween } from 'react-gsap';
21 |
22 | ### Usage with Tween
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/docz/src/components/Reveal.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Reveal
3 | menu: Components
4 | ---
5 |
6 | import { Fragment } from 'react';
7 | import { Playground, Props } from 'docz'
8 | import { Reveal, SplitLetters } from './../../../react-gsap/src/'
9 | import { Tween, Comment } from './Tween'
10 | import { FadeInLeft, AnimationTrigger, RubberBand } from './Animation'
11 |
12 |
13 | # Reveal
14 |
15 | The Reveal component is basically an Intersection Observer and a Timeline component combined.
16 |
17 | All children Tween and Timeline components get played when they are visible in viewport.
18 |
19 |
20 | import { Reveal, Tween } from 'react-gsap';
21 |
22 | ## Usage with Tween
23 |
24 | Add a little space for testing
25 |
26 |
27 |
28 |
29 |
30 | |
31 |
32 | so scroll down
33 |
34 | |
35 |
36 | |
37 |
38 | |
39 |
40 | |
41 |
42 | |
43 |
44 | |
45 |
46 | |
47 |
48 | |
49 |
50 | |
51 |
52 | |
53 |
54 |
55 |
56 |
57 |
This headline is fading in
58 |
59 |
60 |
61 |
62 | ## Fade in from left example
63 |
64 | Of course you can outsource animations to separate components. In this example a FadeInLeft animation:
65 |
66 | ```javascript
67 | const FadeInLeft = ({ children }) => (
68 |
72 | {children}
73 |
74 | );
75 | ```
76 |
77 | Also note the use of the `trigger` prop.
78 | In this case the `
` wouldn't trigger because it's out of the viewport initially: `translate3d(-100vw, 0, 0)`
79 | If no trigger is passed, the first element from any child Tween or Timeline that gets beyond the threshold is used.
80 |
81 |
82 | }>
83 |
84 |
This headline is coming from left
85 |
86 |
87 |
88 |
89 | ## forwardRef trigger
90 |
91 | You can also create a forwardRef component as trigger if you need a more complex wrapper or trigger.
92 |
93 | ```javascript
94 | export const AnimationTrigger = React.forwardRef(({ children }, ref) => (
95 |
114 |
115 |
116 |
117 |
118 | ## Props
119 |
120 | | Name | Type | Default | Description |
121 | | :-- | :-- | :-- | :-- |
122 | | children | React.ReactNode | | |
123 | | trigger? | React.ReactElement \| null | | This element triggers the animation if it gets into view. Needs to be a "refable" element like HTML element or forwardRef component |
124 | | repeat? | boolean | false | Trigger the animation again and again? |
125 | | root? | Element \| null | null | |
126 | | rootMargin? | string | 0px | |
127 | | threshold? | number | 0.66 | As opposed to the threshold value from IntersectionObserver options this is just a single number |
128 |
--------------------------------------------------------------------------------
/packages/docz/src/components/ScrollTrigger.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: ScrollTrigger
3 | menu: Components
4 | ---
5 |
6 | import { Fragment } from 'react';
7 | import { Playground, Props } from 'docz'
8 | import { Controls, PlayState, ScrollTrigger } from './../../../react-gsap/src/'
9 | import { Tween } from './Tween'
10 | import { Timeline, TargetWithNames } from './Timeline'
11 |
12 | # ScrollTrigger
13 |
14 | The ScrollTrigger component is a small helper for the ScrollTrigger plugin.
15 |
16 | Read the official documentation: https://greensock.com/docs/v3/Plugins/ScrollTrigger
17 |
18 | It's available since version 3.2.0.
19 | Before you also could use the ScrollTrigger plugin by importing/registering and using it in a Tween or Timeline by yourself:
20 |
21 | import { Tween } from 'react-gsap';
22 |
23 | import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
24 | gsap.registerPlugin(ScrollTrigger);
25 |
26 |
38 |
39 |
40 |
41 | ## Basic usage
42 |
43 | With the ScrollTrigger component, it looks like the following. If you don't add a trigger prop, it will use the ref from the Tween target.
44 |
45 |
46 |
52 |
57 |
58 |
59 |
64 |
65 |
66 |
67 |
68 |
69 | ## Use "trigger" prop
70 |
71 | Currently it's not possible to change the props on the fly. **So this will not work for the `trigger` prop**:
72 |
73 | const triggerRef = useRef(null);
74 | const [trigger, setTrigger] = useState(triggerRef.current);
75 |
76 | useEffect(() => {
77 | setTrigger(triggerRef.current);
78 | }, []);
79 |
80 | return (
81 | <>
82 |
83 |
88 |
This element gets not tweened by ref
89 |
90 |
91 |
92 |
93 | This element is the trigger
94 |
95 |
96 | );
97 |
98 | If you want to target a ref directly instead of using a CSS selector you can use a Timeline with a forwardRef target:
99 |
100 | // This is the target component which "exports" 4 refs
101 | const TargetWithNames = forwardRef((props, ref: any) => {
102 | const div1 = useRef(null);
103 | const div2 = useRef[]>([]);
104 | const div3 = useRef(null);
105 | const trigger = useRef(null);
106 |
107 | useImperativeHandle(ref, () => ({
108 | div1,
109 | div2,
110 | div3,
111 | trigger,
112 | }));
113 |
114 | return (
115 |
110 | );
111 | });
112 |
113 | ```
114 |
115 | If you want to combine multiple of those named components, you can do it like this:
116 |
117 | ```javascript
118 | const TargetWithNamesCombined = forwardRef((props, ref) => {
119 | const target1 = useRef({});
120 | const target2 = useRef({});
121 | useImperativeHandle(ref, () => ({
122 | ...target1.current,
123 | ...target2.current,
124 | }));
125 | return (
126 | <>
127 |
128 |
129 |
130 | );
131 | });
132 |
133 | ```
134 |
135 | For version < 3:
136 |
137 | If you need to target individual elements you can use a special forwardRef function.
138 | The `targets` parameter provide the `set` function, which you can use to set a ref to a certain key.
139 |
140 | If you use an array as value, as seen in the example, you can save multiple elements as array under one key and use e.g. the `stagger` prop.
141 |
142 | ```javascript
143 | const TargetWithNames = forwardRef((props, targets) => (
144 |
88 |
89 |
90 |
91 | ## Props
92 |
93 | The question mark means it's an optional prop.
94 |
95 | For a documentation of all possible props or from and to values check out the documentations:
96 | [vars](https://greensock.com/docs/v3/GSAP/Tween/vars), [gsap.to()](https://greensock.com/docs/v3/GSAP/gsap.to()),
97 | [gsap.from()](https://greensock.com/docs/v3/GSAP/gsap.from()) and [gsap.fromTo()](https://greensock.com/docs/v3/GSAP/gsap.fromTo())
98 |
99 | | Name | Type | Description |
100 | | :-- | :-- | :-- |
101 | | children? | React.ReactNode | Need to be "refable" components. So they can be HTML elements or forwardRef components like styled-components components |
102 | | wrapper? | any | This component gets wrapped around the Tween component |
103 | | target? | number \| string | The target index or key of the Timeline targets. Used if Tween is childless and child of a Timeline |
104 | | position? | string \| number | If this Tween is a child from a Timeline it's added at this position |
105 | | from? | any | The vars object for the [gsap.from()](https://greensock.com/docs/v3/GSAP/gsap.from()) or [gsap.fromTo()](https://greensock.com/docs/v3/GSAP/gsap.fromTo()) function |
106 | | to? | any | The vars object for the [gsap.to()](https://greensock.com/docs/v3/GSAP/gsap.to()) or [gsap.fromTo()](https://greensock.com/docs/v3/GSAP/gsap.fromTo()) function |
107 | | stagger? | number \| Stagger \| (index: number, target: any, list: any) => number | If multiple children are added, you can stagger the start times for each |
108 | | duration? | number | The duration of the animation (in seconds) (Can be changed on-the-fly) |
109 | | progress? | number | 0 - 1 (Can be changed on-the-fly) |
110 | | totalProgress? | number | 0 - 1 (Can be changed on-the-fly) |
111 | | playState? | PlayState | Use it to control the playing state (Can be changed on-the-fly) |
112 | | disabled? | boolean | on-the-fly changes and are no more possible |
113 | | onlyInvalidateTo? | boolean | |
114 | | [prop: string] | any | All other props are added to the vars object for the Tween functions |
115 |
116 | ## Type Stagger
117 |
118 | More info: https://greensock.com/docs/v3/Staggers
119 |
120 | | Name | Type |
121 | | :-- | :-- |
122 | | amount? | number |
123 | | each? | number |
124 | | from? | 'start' \| 'center' \| 'edges' \| 'random' \| 'end' \| number \| [number, number] |
125 | | grid? | [number, number] \| 'auto' |
126 | | axis? | 'x' \| 'y' |
127 | | ease? | string \| (value: number) => number |
128 | | repeat? | number |
129 | | yoyo? | boolean |
130 | | [prop: string] | any |
131 |
132 | ## Enum PlayState
133 |
134 | | Field | As string |
135 | | :-- | :-- |
136 | | play | "play" |
137 | | restart | "restart" |
138 | | reverse | "reverse" |
139 | | restartReverse | "restartReverse" |
140 | | stop | "stop" |
141 | | stopEnd | "stopEnd" |
142 | | pause | "pause" |
143 | | resume | "resume" |
144 |
--------------------------------------------------------------------------------
/packages/docz/src/components/Tween.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Tween, { TweenProps, Stagger } from './../../../react-gsap/src/Tween';
3 |
4 | export const TweenPropsDummy: React.FunctionComponent = props => ;
5 | export const StaggerPropsDummy: React.FunctionComponent = props => ;
6 | export { Tween };
7 |
8 | export const Comment = (props: any) =>
59 |
60 | )
61 | }}
62 |
63 |
64 |
--------------------------------------------------------------------------------
/packages/docz/src/plugins/CountPlugin.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: CountPlugin
3 | menu: Plugins
4 | ---
5 |
6 | import { Fragment } from 'react';
7 | import { Playground, Props } from 'docz'
8 | import { Controls, PlayState, Timeline, Tween } from './../../../react-gsap/src/'
9 |
10 | # CountPlugin
11 |
12 | The CountPlugin animates an number counting. It uses the innerText from the target elements. (children)
13 |
14 | It can be called with the "count" property which takes an number or an object with the following properties:
15 |
16 | | Name | Type |
17 | | :-- | :-- |
18 | | value | number |
19 | | format | () => (value) => string |
20 |
21 | import { Controls, PlayState, Tween } from 'react-gsap';
22 |
23 | ## Integer
24 |
25 | By default the count value will be parsed to an integer.
26 |
27 |
28 |
29 |
30 |
37 |
0
38 |
39 |
40 |
41 |
42 |
43 | ## Custom format function
44 |
45 | You can use your own custom format function.
46 |
47 |
48 |
49 |
97 |
98 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/packages/docz/src/plugins/GSAP.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: GSAP Plugins
3 | menu: Plugins
4 | ---
5 |
6 | import { Fragment } from 'react';
7 | import { Playground } from 'docz'
8 | import { Controls, PlayState, Tween } from './../../../react-gsap/src/'
9 |
10 | import { gsap } from 'gsap'
11 | import { TextPlugin } from 'gsap/TextPlugin'
12 | gsap.registerPlugin(TextPlugin)
13 |
14 | # GSAP Plugins
15 |
16 | There are some Core Plugins that are already included in GSAP: https://greensock.com/docs/v3/GSAP/CorePlugins
17 |
18 | And there are some free Plugins that you can use to extend the functionality. Here is the list: https://greensock.com/docs/v3/Plugins.
19 |
20 | To use them with `react-gsap` you first have to register them.
21 |
22 | ### Register the TextPlugin for example:
23 |
24 | import { gsap } from 'gsap';
25 | import { TextPlugin } from 'gsap/TextPlugin';
26 |
27 | # if your build step doesn't transpile inside node_modules you can try this import:
28 | import { TextPlugin } from 'gsap/dist/TextPlugin';
29 |
30 | gsap.registerPlugin(TextPlugin);
31 |
32 | ### And use it:
33 |
34 |
35 |
36 |
37 | This is a text.
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/docz/src/plugins/SvgDrawPlugin.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: SvgDrawPlugin
3 | menu: Plugins
4 | ---
5 |
6 | import { Fragment } from 'react';
7 | import { Playground, Props } from 'docz'
8 | import { Controls, PlayState, Tween } from './../../../react-gsap/src/'
9 |
10 | # SvgDrawPlugin
11 |
12 | The SvgDrawPlugin is shipped with react-gsap and lets you animate SVG elements.
13 | You can draw the following SVG elements: path, circle, rect, line, polyline and polygon.
14 |
15 | It works similar to the [DrawSVGPlugin](https://greensock.com/drawSVG) from GreenSock but the parameters are a little different.
16 |
17 | It can be called with the "svgDraw" property and takes a single number (0-1) value or an array with two numbers (Tuple) ([(0-1), (0-1)]).
18 |
19 | The single or first number is the length of the stroke.
20 |
21 | The second value is the position/offset on the path. (default = 0)
22 |
23 | So you can animate a line drawing from start to end like that:
24 |
25 | import { Controls, PlayState, Tween } from 'react-gsap';
26 |
27 | ## Single Number
28 |
29 |
30 |
31 |
49 |
50 |
51 |
52 | ## Tuple
53 |
54 | An animation from the middle to the outside:
55 |
56 |
57 |
58 |
76 |
77 |
78 |
79 | ## All possible SVG elements
80 |
81 |
82 |
83 |
131 |
132 |
133 |
--------------------------------------------------------------------------------
/packages/docz/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "moduleResolution": "node",
5 | "strict": true,
6 | "resolveJsonModule": true,
7 | "esModuleInterop": true,
8 | "skipLibCheck": false,
9 | "noEmit": true,
10 | "jsx": "react",
11 | "allowSyntheticDefaultImports": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/next/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 |
--------------------------------------------------------------------------------
/packages/next/README.md:
--------------------------------------------------------------------------------
1 | # TypeScript Next.js example
2 |
3 | This is a really simple project that shows the usage of Next.js with TypeScript.
4 |
5 | ## Deploy your own
6 |
7 | Deploy the example using [Vercel](https://vercel.com):
8 |
9 | [](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-typescript)
10 |
11 | ## How to use it?
12 |
13 | ### Using `create-next-app`
14 |
15 | Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
16 |
17 | ```bash
18 | npm init next-app --example with-typescript with-typescript-app
19 | # or
20 | yarn create next-app --example with-typescript with-typescript-app
21 | ```
22 |
23 | ### Download manually
24 |
25 | Download the example:
26 |
27 | ```bash
28 | curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript
29 | cd with-typescript
30 | ```
31 |
32 | Install it and run:
33 |
34 | ```bash
35 | npm install
36 | npm run dev
37 | # or
38 | yarn
39 | yarn dev
40 | ```
41 |
42 | Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
43 |
44 | ## Notes
45 |
46 | This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript.
47 |
48 | ```
49 | npm install --save-dev typescript
50 | ```
51 |
52 | To enable TypeScript's features, we install the type declarations for React and Node.
53 |
54 | ```
55 | npm install --save-dev @types/react @types/react-dom @types/node
56 | ```
57 |
58 | When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings.
59 |
60 | Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away.
61 |
62 | A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts.
63 |
--------------------------------------------------------------------------------
/packages/next/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/packages/next/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | reactStrictMode: true,
3 | }
--------------------------------------------------------------------------------
/packages/next/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-typescript",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "dev": "next",
6 | "build": "next build",
7 | "start": "next start",
8 | "type-check": "tsc"
9 | },
10 | "dependencies": {
11 | "gsap": "^3.11.1",
12 | "next": "^12.3.0",
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-gsap": "3.3.0"
16 | },
17 | "devDependencies": {
18 | "@types/node": "^18.7.18",
19 | "@types/react": "^18.0.20",
20 | "@types/react-dom": "^18.0.6",
21 | "typescript": "4.8.3"
22 | },
23 | "license": "ISC"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/next/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement, forwardRef } from 'react';
2 | import { SplitChars, Timeline, Tween, Controls, PlayState } from 'react-gsap';
3 |
4 | const IndexPage = () => (
5 | <>
6 |
7 |
15 |
22 |
0
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | );
34 |
35 | export default IndexPage;
36 |
--------------------------------------------------------------------------------
/packages/next/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "alwaysStrict": true,
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "jsx": "preserve",
9 | "lib": [
10 | "dom",
11 | "es2017"
12 | ],
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "noEmit": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "resolveJsonModule": true,
20 | "skipLibCheck": true,
21 | "strict": true,
22 | "target": "esnext",
23 | "incremental": true
24 | },
25 | "exclude": [
26 | "node_modules"
27 | ],
28 | "include": [
29 | "**/*.ts",
30 | "**/*.tsx"
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/packages/playground/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `yarn start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `yarn test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `yarn build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `yarn eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
--------------------------------------------------------------------------------
/packages/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-gsap-playground",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^14.4.3",
9 | "@types/jest": "^29.0.3",
10 | "@types/node": "^18.7.18",
11 | "@types/react": "^18.0.20",
12 | "@types/react-dom": "^18.0.6",
13 | "@types/react-router-dom": "^5.3.3",
14 | "@types/react-transition-group": "^4.4.5",
15 | "@types/styled-components": "^5.1.26",
16 | "@types/uuid": "^8.3.4",
17 | "gsap": "^3.11.1",
18 | "react": "^18.2.0",
19 | "react-dom": "^18.2.0",
20 | "react-gsap": "3.3.0",
21 | "react-router-dom": "^6.4.0",
22 | "react-scripts": "5.0.1",
23 | "react-transition-group": "^4.4.5",
24 | "styled-components": "^5.3.5",
25 | "typescript": "~4.8.3",
26 | "uuid": "^9.0.0"
27 | },
28 | "scripts": {
29 | "start": "react-scripts start",
30 | "build": "react-scripts build",
31 | "test": "react-scripts test",
32 | "eject": "react-scripts eject"
33 | },
34 | "eslintConfig": {
35 | "extends": "react-app"
36 | },
37 | "browserslist": {
38 | "production": [
39 | ">0.2%",
40 | "not dead",
41 | "not op_mini all"
42 | ],
43 | "development": [
44 | "last 1 chrome version",
45 | "last 1 firefox version",
46 | "last 1 safari version"
47 | ]
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/playground/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitworking/react-gsap/b6180f5a3ccd243611c8e891c8932dbf3b1d1d87/packages/playground/public/favicon.ico
--------------------------------------------------------------------------------
/packages/playground/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/packages/playground/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitworking/react-gsap/b6180f5a3ccd243611c8e891c8932dbf3b1d1d87/packages/playground/public/logo192.png
--------------------------------------------------------------------------------
/packages/playground/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitworking/react-gsap/b6180f5a3ccd243611c8e891c8932dbf3b1d1d87/packages/playground/public/logo512.png
--------------------------------------------------------------------------------
/packages/playground/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 |
--------------------------------------------------------------------------------
/packages/playground/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/packages/playground/src/App.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/packages/playground/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
3 |
4 | import Tween from './examples/Tween';
5 | import Timeline from './examples/Timeline';
6 | import Svg from './examples/Svg';
7 | import Transition from './examples/Transition';
8 | import Reveal from './examples/Reveal';
9 | import ScrollTrigger from './examples/ScrollTrigger';
10 | import ManualControl from './examples/ManualControl';
11 | // import Scroller from './examples/Scroller';
12 |
13 | function App() {
14 | return (
15 |