├── .eslintrc.json ├── .github └── workflows │ └── linting.yml ├── .gitignore ├── .stylelintrc ├── contributing.md ├── examples ├── animated-gif │ ├── build-files │ │ ├── bouncy-ball-frames.psd │ │ ├── bouncy-ball-frames │ │ │ ├── ffout001.png │ │ │ ├── ffout002.png │ │ │ ├── ffout003.png │ │ │ ├── ffout004.png │ │ │ ├── ffout005.png │ │ │ ├── ffout006.png │ │ │ ├── ffout007.png │ │ │ ├── ffout008.png │ │ │ ├── ffout009.png │ │ │ ├── ffout010.png │ │ │ ├── ffout011.png │ │ │ ├── ffout012.png │ │ │ ├── ffout013.png │ │ │ ├── ffout014.png │ │ │ ├── ffout015.png │ │ │ ├── ffout016.png │ │ │ ├── ffout017.png │ │ │ ├── ffout018.png │ │ │ ├── ffout019.png │ │ │ ├── ffout020.png │ │ │ ├── ffout021.png │ │ │ ├── ffout022.png │ │ │ ├── ffout023.png │ │ │ ├── ffout024.png │ │ │ ├── ffout025.png │ │ │ ├── ffout026.png │ │ │ ├── ffout027.png │ │ │ ├── ffout028.png │ │ │ ├── ffout029.png │ │ │ ├── ffout030.png │ │ │ ├── ffout031.png │ │ │ ├── ffout032.png │ │ │ ├── ffout033.png │ │ │ ├── ffout034.png │ │ │ ├── ffout035.png │ │ │ ├── ffout036.png │ │ │ ├── ffout037.png │ │ │ ├── ffout038.png │ │ │ ├── ffout039.png │ │ │ ├── ffout040.png │ │ │ ├── ffout041.png │ │ │ ├── ffout042.png │ │ │ ├── ffout043.png │ │ │ ├── ffout044.png │ │ │ ├── ffout045.png │ │ │ ├── ffout046.png │ │ │ ├── ffout047.png │ │ │ ├── ffout048.png │ │ │ ├── ffout049.png │ │ │ ├── ffout050.png │ │ │ ├── ffout051.png │ │ │ ├── ffout052.png │ │ │ ├── ffout053.png │ │ │ ├── ffout054.png │ │ │ ├── ffout055.png │ │ │ ├── ffout056.png │ │ │ └── ffout057.png │ │ ├── bouncy-ball.mov │ │ └── readme.md │ ├── image.apng │ ├── image.gif │ ├── image.mp4 │ ├── image.webp │ ├── index.html │ └── readme.md ├── anime │ ├── anime.3.2.0.min.js │ ├── index.html │ ├── readme.md │ └── script.js ├── canvas │ ├── index.html │ ├── readme.md │ └── script.js ├── css-step │ ├── build-files │ │ └── bouncy-ball-css-step.psd │ ├── image.gif │ ├── index.html │ ├── readme.md │ └── styles.css ├── css │ ├── index.html │ ├── readme.md │ └── styles.css ├── d3 │ ├── d3-6.2.0.min.js │ ├── index.html │ ├── readme.md │ └── script.js ├── flash │ ├── bouncyball.fla │ ├── bouncyball.swf │ ├── index.html │ └── readme.md ├── gsap │ ├── gsap-3.5.1.min.js │ ├── index.html │ ├── readme.md │ └── script.js ├── jquery │ ├── index.html │ ├── jquery-3.5.1.min.js │ ├── jquery-ui.min.js │ ├── readme.md │ └── script.js ├── lottie │ ├── data.json │ ├── index.html │ ├── lottie-5.7.3.min.js │ ├── readme.md │ └── script.js ├── matter-js │ ├── index.html │ ├── matter-0.14.2.min.js │ ├── readme.md │ └── script.js ├── mojs │ ├── index.html │ ├── mo-0.265.9.min.js │ ├── mo-0.288.2.min.js │ ├── readme.md │ └── script.js ├── motion │ ├── index.html │ ├── motion-10.4.1.umd.js │ ├── readme.md │ └── script.js ├── p5 │ ├── index.html │ ├── p5-1.1.9.min.js │ ├── readme.md │ └── script.js ├── popmotion │ ├── index.html │ ├── popmotion.8.7.5.global.min.js │ ├── readme.md │ └── script.js ├── react │ ├── babel-standalone-7.11.6.min.js │ ├── index.html │ ├── react-16.13.1.min.js │ ├── react-dom-16.13.1.min.js │ ├── readme.md │ └── script.js ├── shared-styles.css ├── smil │ ├── image.svg │ └── readme.md ├── template │ ├── index.html │ ├── readme.md │ └── script.js ├── vanilla-js │ ├── index.html │ ├── readme.md │ └── script.js ├── velocity │ ├── index.html │ ├── readme.md │ ├── script.js │ └── velocity.2.0.6.min.js ├── video │ ├── index.html │ ├── readme.md │ ├── video-original.mov │ ├── video.mp4 │ ├── video.ogg │ └── video.webm ├── web-animations-api │ ├── index.html │ ├── readme.md │ ├── script.js │ └── web-animations.min.js ├── webgl │ ├── index.html │ ├── readme.md │ └── script.js └── webgpu │ ├── index.html │ ├── readme.md │ └── script.js ├── index.html ├── install-modules.mjs ├── license.md ├── package-lock.json ├── package.json ├── readme.md ├── site ├── css │ ├── example-colors.css │ └── styles.css ├── favicon.ico ├── images │ ├── graphic.png │ └── sad.svg ├── js │ ├── index.js │ ├── sourceDump.js │ ├── toggleDocs.js │ └── updatePanes.js ├── vendor_custom │ ├── modernizr-custom.js │ ├── prism-okaidia-custom.css │ └── prismjs-custom.js └── web_modules │ ├── import-map.json │ ├── platform.js │ └── remarkable.js └── test └── readme.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@sparkbox/eslint-config-sparkbox"], 3 | "rules": { 4 | "operator-linebreak": "off", 5 | "no-nested-ternary": "off" 6 | }, 7 | "ignorePatterns": [ 8 | "examples/**/*", 9 | "site/vendor_custom/*", 10 | "site/web_modules/*" 11 | ], 12 | "globals": { 13 | "Modernizr": "readonly", 14 | "Prism": "readonly" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.github/workflows/linting.yml: -------------------------------------------------------------------------------- 1 | name: Run Linting 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: 20 15 | - name: Install devDependencies 16 | run: npm ci 17 | - name: Run Linting 18 | run: npm test 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log* 4 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@sparkbox/stylelint-config-sparkbox", 3 | "ignoreFiles": ["site/vendor_custom/*"], 4 | "rules": { 5 | "selector-type-no-unknown": [true, { 6 | "ignoreTypes": ["/^ball/"] 7 | }] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Hey! You're thinking about contributing? That's awesome! You're awesome. 4 | 5 | Here's a few things you should know before you submit your PR: 6 | 7 | 1. Bouncy Ball is a curation, not a collection. Not every technique makes sense in this format. For example, submissions using immature libraries, unstable APIs, or slight variations on existing techniques probably wouldn't be accepted. 8 | 2. New animation code should not require a build/compile step. For example, you'll want to use CSS instead of SCSS and browser-compatible JavaScript instead of Typescript. 9 | 3. Write concise, clean code. For style recommendations, check out [AirBnB's JavaScript Styleguide](https://github.com/airbnb/javascript/tree/b4d8543f120ba761ae7f39caf850c1e4efdc2727/es5). 10 | 4. Any new animation should work on the demo page and be visually indistinguishable from existing animations (except for the color of the ball). 11 | 5. Please test your animation across modern browsers. If some browsers don't support the animation, ensure the incompatibilty message is displayed. 12 | 6. The browser compatibility requirement for the bouncy-ball site itself is modern browsers (Edge, Chrome, Firefox, and Safari). 13 | 14 | When in doubt on how to organize your example, start by copying the `examples/template` folder and using it as a base. You can look at the structure of existing examples for reference. 15 | 16 | ## Development Workflow 17 | 18 | 1. Clone the project down to your computer. 19 | 2. From the project folder, run `npm ci` in your terminal. 20 | 3. Start a local static server with `npm start` in your terminal and visit the URL given by the output to see the site. 21 | 4. Make file changes, and refresh to see them updated. 22 | 23 | ## Updating Dependencies 24 | 25 | 1. Animation examples using a library have a downloaded copy of the library in their folder. To update it, replace it with a newer version of the file and rename it accordingly. 26 | 2. Other JavaScript dependencies are declared in `package.json`. They use `esinstall` to generate ES6 modules bundles which are saved in `site/web_modules`. To update them: 27 | - Install the updated version of the package: `npm i package@x.x.x` 28 | - Ensure the package is listed [in the esinstall config in `package.json`](https://github.com/sparkbox/bouncy-ball/blob/6241868ac2cedf8523558856b62cf16e6ebb2ac7/package.json#L45), if it isn't already. 29 | - Rebuild the dependencies with `esinstall`: `npm run build` 30 | - Test the functionality and check the files into version control. 31 | 3. Dependencies with custom builds are kept in `site/vendor_custom`. To update these, browse to the URL at the top of the file, regenerate the code snippet, and paste it over the existing snippet. 32 | 33 | ## Contribution Workflow 34 | 35 | 1. Fork and clone the repo. 36 | 2. Make your changes on a [feature-branch](https://bocoup.com/weblog/git-workflow-walkthrough-feature-branches). 37 | 3. Submit a Pull Request to the `main` branch. 38 | -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames.psd -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout001.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout002.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout003.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout004.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout005.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout006.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout007.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout008.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout009.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout010.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout011.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout012.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout012.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout013.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout013.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout014.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout015.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout015.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout016.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout016.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout017.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout017.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout018.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout018.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout019.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout019.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout020.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout021.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout021.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout022.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout022.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout023.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout023.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout024.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout025.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout025.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout026.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout026.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout027.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout027.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout028.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout028.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout029.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout029.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout030.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout031.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout031.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout032.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout032.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout033.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout033.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout034.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout034.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout035.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout035.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout036.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout036.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout037.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout037.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout038.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout038.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout039.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout039.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout040.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout041.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout041.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout042.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout042.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout043.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout043.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout044.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout044.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout045.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout045.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout046.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout046.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout047.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout047.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout048.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout049.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout049.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout050.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout051.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout051.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout052.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout052.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout053.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout053.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout054.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout054.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout055.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout055.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout056.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout056.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball-frames/ffout057.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball-frames/ffout057.png -------------------------------------------------------------------------------- /examples/animated-gif/build-files/bouncy-ball.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/build-files/bouncy-ball.mov -------------------------------------------------------------------------------- /examples/animated-gif/build-files/readme.md: -------------------------------------------------------------------------------- 1 | # How I Generated this GIF 2 | 3 | 1. Record a quicktime move of the animation 4 | 2. Convert the quicktime movie to 57 still frames with this command: 5 | 6 | # Notes: 7 | # - I chose 57 frames because 57 * 0.02 (seconds/frame) = 1.14 seconds (and I needed 1.15s) 8 | # - I got the technique loosely from http://superuser.com/a/556031 9 | ffmpeg -i pink-bouncy-ball.mov -r 48 pink-frames/ffout%03d.png 10 | 11 | 3. Import the frames into photoshop as layers (see https://digitalchemy.wordpress.com/2010/10/08/photoshop-import-multiple-images-into-one-layered-document/) 12 | 4. Turn the layers into animation frames (see http://graphicdesign.stackexchange.com/a/48851/14744) 13 | 5. Change the delay on each frame to 0.02s 14 | 6. Export as animated Gif 15 | 16 | (note: I tried this with 115 frames at 0.01 seconds per frame, but they turn out slow for some reason ¯\_(ツ)_/¯) 17 | -------------------------------------------------------------------------------- /examples/animated-gif/image.apng: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/image.apng -------------------------------------------------------------------------------- /examples/animated-gif/image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/image.gif -------------------------------------------------------------------------------- /examples/animated-gif/image.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/image.mp4 -------------------------------------------------------------------------------- /examples/animated-gif/image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/animated-gif/image.webp -------------------------------------------------------------------------------- /examples/animated-gif/index.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | Bouncy ball 12 | 13 | -------------------------------------------------------------------------------- /examples/animated-gif/readme.md: -------------------------------------------------------------------------------- 1 | # Animated GIF 2 | 3 | A GIF (which stands for Graphics Interchange Format) is an image using the GIF bitmap image format. [All modern web-browsers](https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support) can display GIFs. The format typically supports a maximum of 256 colors. Gif images use a file extension of `.gif`. 4 | 5 | GIFs support animation, which works by displaying a series of individual image frames in rapid succession. Animated GIFs support looping and configurable frame rates. 6 | 7 | GIFs don't compress as well as other comparable formats (like PNGs for still images and MP4/WebM for video). This can lead to large file sizes for animated gifs that have a lot of frames or lots of detail in each frame. 8 | 9 | Other animated image formats exist, like [WebP](https://en.wikipedia.org/wiki/WebP) and [APNG](https://en.wikipedia.org/wiki/APNG). These offer improvements to GIF, like supporting more colors, improving transparency, and reducing file-size. These newer formats are [not](http://caniuse.com/#feat=webp) [supported](http://caniuse.com/#feat=apng) yet in all major browsers, but can be selectively served to supporting browsers via the picture element (as shown in this example). 10 | 11 | 12 | ## Resources 13 | 14 | * The [Wikipedia entry for GIF](https://en.wikipedia.org/wiki/GIF) 15 | -------------------------------------------------------------------------------- /examples/anime/anime.3.2.0.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * anime.js v3.2.0 3 | * (c) 2020 Julian Garnier 4 | * Released under the MIT license 5 | * animejs.com 6 | */ 7 | 8 | !function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.ceil(a(e,1e-6,1)*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(x([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&x(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=M(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,x=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(x);function M(){var n=x.direction;"alternate"!==n&&(x.direction="normal"!==n?"normal":"reverse"),x.reversed=!x.reversed,t.forEach(function(n){return n.reversed=x.reversed})}function O(n){return x.reversed?x.duration-n:n}function C(){o=0,u=O(x.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=x.animations,t=r.length;e2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O0&&(x.began=!0,I("begin")),!x.loopBegan&&x.currentTime>0&&(x.loopBegan=!0,I("loopBegin")),d<=r&&0!==x.currentTime&&P(0),(d>=l&&x.currentTime!==e||!e)&&P(e),d>r&&d=e&&(u=0,x.remaining&&!0!==x.remaining&&x.remaining--,x.remaining?(o=i,I("loopComplete"),x.loopBegan=!1,"alternate"===x.direction&&M()):(x.paused=!0,x.completed||(x.completed=!0,I("loopComplete"),I("complete"),!x.passThrough&&"Promise"in window&&(s(),f(x)))))}return x.reset=function(){var n=x.direction;x.passThrough=!1,x.currentTime=0,x.progress=0,x.paused=!0,x.began=!1,x.loopBegan=!1,x.changeBegan=!1,x.completed=!1,x.changeCompleted=!1,x.reversePlayback=!1,x.reversed="reverse"===n,x.remaining=x.loop,t=x.children;for(var e=c=t.length;e--;)x.children[e].reset();(x.reversed&&!0!==x.loop||"alternate"===n&&1===x.loop)&&x.remaining++,P(x.reversed?x.duration:0)},x.set=function(n,e){return R(n,e),x},x.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},x.seek=function(n){T(O(n))},x.pause=function(){x.paused=!0,C()},x.play=function(){x.paused&&(x.completed&&x.reset(),x.paused=!1,_.push(x),C(),U||en())},x.reverse=function(){M(),x.completed=!x.reversed,C()},x.restart=function(){x.reset(),x.play()},x.reset(),x.autoplay&&x.play(),x}function tn(n,e){for(var r=e.length;r--;)x(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),rn.running=_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.2.0",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v-1&&_.splice(o,1);for(var s=0;s 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - anime.js 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/anime/readme.md: -------------------------------------------------------------------------------- 1 | # Anime.js 2 | 3 | Anime (/ˈæn.ə.meɪ/) is a flexible yet lightweight JavaScript animation library. 4 | It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. 5 | 6 | Anime.js License: MIT 7 | 8 | ## Project Links 9 | 10 | * [Anime.js Github Repo](https://github.com/juliangarnier/anime) 11 | * [Anime.js examples on Codepen](http://codepen.io/collection/XLebem/) 12 | -------------------------------------------------------------------------------- /examples/anime/script.js: -------------------------------------------------------------------------------- 1 | const { anime } = window; 2 | 3 | function bounce() { 4 | const bounceUp = anime({ 5 | autoplay: false, // We don't want to immediately start the animation 6 | targets: 'ball', // target the 7 | translateY: { 8 | value: ['160px', '0px'], // When bouncing up, start at 160px and end at 0px 9 | duration: 575, 10 | easing: 'easeOutQuad', 11 | }, 12 | complete: bounce, 13 | }); 14 | 15 | const bounceDown = anime({ 16 | autoplay: false, // See similar comments above 17 | targets: 'ball', 18 | translateY: { 19 | value: ['0px', '160px'], // When bouncing down, start at 0px and end at 160px 20 | duration: 575, 21 | easing: 'easeInQuad', 22 | }, 23 | complete() { 24 | bounceUp.play(); // After we bounce down, start the bounce up animation 25 | }, 26 | }); 27 | 28 | bounceDown.play(); 29 | } 30 | 31 | bounce(); // Start the animation! 32 | -------------------------------------------------------------------------------- /examples/canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Canvas 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/canvas/readme.md: -------------------------------------------------------------------------------- 1 | # Canvas 2 | 3 | The Canvas API is a web browser feature for rendering 2D graphics on the web, introduced as part of the HTML5 spec. 4 | 5 | Working with canvas involves using the `` HTML element and various JavaScript APIs to manipulate pixels on the canvas drawing surface. 6 | 7 | Canvas graphics aren't represented in [the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), which reduces rendering overhead but also leaves the graphics inaccessible to screen readers. As a result, canvas is usually reserved for use-cases like animations, games, data visualization, drawing tools, and photo manipulation. 8 | 9 | ## Resources 10 | 11 | * [MDN Docs: Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 12 | * [Awesome Canvas](https://github.com/raphamorim/awesome-canvas) 13 | -------------------------------------------------------------------------------- /examples/canvas/script.js: -------------------------------------------------------------------------------- 1 | const h = 575; // x vertex, half of total bounce duration 2 | const k = 160; // total bounce height 3 | const a = 4 * k / Math.pow(h * 2, 2); // coefficient: 0.000483932 4 | const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--canvas'); 5 | let ypos, start, time, timestamp; 6 | 7 | // Canvas setup 8 | const canvasEl = document.querySelector('canvas'); 9 | const offset = canvasEl.width / 2; 10 | const ctx = canvasEl.getContext('2d'); 11 | ctx.fillStyle = ballColor; 12 | 13 | // Animation Loop 14 | (function drawPosition(timestamp) { 15 | if (!start) { start = timestamp }; 16 | time = timestamp - start; 17 | 18 | // Position as a function of time, using the vertex form 19 | // of the quadratic formula: f(x) = a(x - h)^2 + k, 20 | // (where [h, k] is the vertex). See it graphically at: 21 | // https://www.desmos.com/calculator/8qdvfgxw6v 22 | ypos = a * Math.pow(((time + h) % (h * 2) - h), 2) + offset; 23 | 24 | // Draw the ball (includes clearing the previous frame) 25 | ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); 26 | ctx.beginPath(); 27 | ctx.ellipse(offset, ypos, 25, 25, 0, 0, 2 * Math.PI); 28 | ctx.fill(); 29 | 30 | window.requestAnimationFrame(drawPosition); 31 | })(performance.now()); 32 | -------------------------------------------------------------------------------- /examples/css-step/build-files/bouncy-ball-css-step.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/css-step/build-files/bouncy-ball-css-step.psd -------------------------------------------------------------------------------- /examples/css-step/image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/css-step/image.gif -------------------------------------------------------------------------------- /examples/css-step/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - CSS 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/css-step/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Step Animations 2 | 3 | A *CSS Step Animation* is a technique which uses the CSS `steps()` function to rapidly step through images in a sprite sheet, giving the appearance of motion. 4 | 5 | This technique uses the CSS Animations API but it's different in that it only animates the background-position property, relying on the contents of the background-image to provide the illusion of motion. In this way, the approach has similarities to animated gifs and other "flipbook-style" approaches. 6 | 7 | ## Resources 8 | 9 | * [CSS Sprite Sheet Animations with steps() (tutorial)](http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps) 10 | * [CSS3 Animations Browser Support Table](http://caniuse.com/#feat=css-animation) 11 | * [W3C Spec for CSS3 Animations](https://www.w3.org/TR/css3-animations) 12 | -------------------------------------------------------------------------------- /examples/css-step/styles.css: -------------------------------------------------------------------------------- 1 | /* See the sprite image we needed to create for this animation: 2 | https://sparkbox.github.io/bouncy-ball/examples/css-step/image.gif 3 | */ 4 | ball { 5 | display: block; 6 | width: 66px; 7 | height: 210px; 8 | background: url(image.gif) no-repeat; 9 | animation: bounce 1.15s steps(57) infinite; 10 | } 11 | 12 | @keyframes bounce { 13 | from { 14 | background-position: 0; 15 | } 16 | 17 | to { 18 | background-position: -3762px; 19 | } 20 | } 21 | 22 | -------------------------------------------------------------------------------- /examples/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/css/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Animations 2 | 3 | CSS Animations (introduced in CSS3) use declarative settings and `@keyframe` assignments to animate the values of CSS properties. No external libraries are required for supported browsers. 4 | 5 | In this demo, we set keyframes at the top and bottom positions and use cubic-bezier easings to transition between them. 6 | 7 | ## Resources 8 | 9 | * [CSS3 Animations Browser Support Table](http://caniuse.com/#feat=css-animation) 10 | * [W3C Spec for CSS3 Animations](https://www.w3.org/TR/css3-animations) 11 | * [cubic-bezier.com](http://cubic-bezier.com/) 12 | -------------------------------------------------------------------------------- /examples/css/styles.css: -------------------------------------------------------------------------------- 1 | ball { 2 | display: block; 3 | width: 50px; 4 | height: 50px; 5 | border-radius: 50%; 6 | background-color: var(--css); 7 | 8 | animation-name: bounce; 9 | animation-duration: 0.575s; 10 | animation-direction: alternate; 11 | animation-timing-function: cubic-bezier(0.6, 0.08, 0.8, 0.6); 12 | animation-iteration-count: infinite; 13 | } 14 | 15 | @keyframes bounce { 16 | from { 17 | transform: translate3d(0, 0, 0); 18 | } 19 | 20 | to { 21 | transform: translate3d(0, 160px, 0); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/d3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/d3/readme.md: -------------------------------------------------------------------------------- 1 | # D3 2 | D3 (which stands for 'data-driven documents') is a library for manipulating web documents with data. It allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. 3 | 4 | D3 is often used for custom data-visualization, because of its flexibility. Unlike charting libraries with pre-built graphics, it outputs to lower-level standard web formats like HTML, SVG, or Canvas. 5 | 6 | This bouncy-ball animation isn't data driven, but it demonstrates D3's transformation API on an SVG element. 7 | 8 | ## Project Links 9 | - [D3 Website](https://d3js.org/) 10 | - [D3 Github Repo](https://github.com/d3/d3) 11 | 12 | ## Resources 13 | - [The D3 Wiki (on Github), including:](https://github.com/d3/d3/wiki) 14 | - [Tutorials](https://github.com/d3/d3/wiki/Tutorials) 15 | - [Gallery](https://github.com/d3/d3/wiki/Gallery) 16 | - [Scott Murray's D3 Tutorials](http://alignedleft.com/tutorials/d3/) 17 | -------------------------------------------------------------------------------- /examples/d3/script.js: -------------------------------------------------------------------------------- 1 | const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--d3'); 2 | const svg = d3.select('body') 3 | .append('svg') 4 | .attr('width', 50) 5 | .attr('height', 210) 6 | .append('g') 7 | .attr('transform', 'translate(25,25)'); 8 | 9 | const ball = svg.append('circle') 10 | .attr('r', 25) 11 | .attr('fill', ballColor); 12 | 13 | function bounce() { 14 | ball.transition() 15 | .duration(575) 16 | .ease(d3.easeQuadOut) 17 | .attr('cy', 0) 18 | .transition() 19 | .duration(575) 20 | .ease(d3.easeQuadIn) 21 | .attr('cy', 160) 22 | .on('end', bounce); 23 | } 24 | 25 | bounce(); 26 | -------------------------------------------------------------------------------- /examples/flash/bouncyball.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/flash/bouncyball.fla -------------------------------------------------------------------------------- /examples/flash/bouncyball.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/flash/bouncyball.swf -------------------------------------------------------------------------------- /examples/flash/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Get Adobe Flash player 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /examples/flash/readme.md: -------------------------------------------------------------------------------- 1 | # Flash 2 | 3 | Flash is a deprecated multimedia technology, created by Macromedia in 1996 before being acquired and maintained by Adobe. At the height of its popularity, Flash was used to produce media, animations, rich Internet applications, and games, to be embedded in websites (and other platforms). As a proprietary technology, Flash embeds could only be rendered in web browsers by installing a plugin. 4 | 5 | Developers building Flash animations used the [Adobe Animate](https://adobe.com/products/animate.html) (previously Adobe Flash Professional) application which provided a visual canvas, timeline, and programming environment for building animations. 6 | 7 | Over time, Flash usage declined as platforms and developers embraced web-native technologies like HTML5. The Flash Player was deprecated in 2017 and officially discontinued at the end of 2020. By January 2021, all major modern browsers were blocking Flash content unconditionally. 8 | 9 | ## Project Links 10 | 11 | - [Adobe Animate CC](https://www.adobe.com/products/animate.html). 12 | 13 | ## Resources 14 | 15 | - [Animation basics in Animate CC](https://helpx.adobe.com/animate/using/animation-basics.html) 16 | - [How to use keyframes in Animate CC](https://helpx.adobe.com/animate/using/frames-keyframes.html) 17 | - [Adobe Flash (Wikipedia)](https://en.wikipedia.org/wiki/Adobe_Flash) 18 | -------------------------------------------------------------------------------- /examples/gsap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bouncy Ball - Comparing Web Animation Techniques - GSAP 7 | 8 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/gsap/readme.md: -------------------------------------------------------------------------------- 1 | # GSAP 2 | 3 | GSAP (the GreenSock Application Platform) is a suite of tools for creating "high-performance, professional-grade animation for the modern web." GSAP core can be used for common animation scenarios, while plugins are provided for scroll-based animations, draggable elements, and other use-cases. 4 | 5 | Some business uses of GSAP may require you to [purchase a commercial license](https://gsap.com/licensing/). 6 | 7 | ## Project Links 8 | 9 | * [gsap.com](https://gsap.com/) 10 | * [GSAP Github Repo](https://github.com/greensock/GSAP) 11 | * [GSAP Licensing](https://gsap.com/licensing/) 12 | * [GSAP License: Why?](https://gsap.com/blog/why-license/) 13 | 14 | ## Resources 15 | 16 | * [GSAP Getting Started Guide](https://gsap.com/resources/get-started/) 17 | -------------------------------------------------------------------------------- /examples/gsap/script.js: -------------------------------------------------------------------------------- 1 | gsap.to('ball', 0.575, { 2 | y: 160, 3 | repeat: -1, 4 | yoyo: true, 5 | ease: Power1.easeIn 6 | }); 7 | -------------------------------------------------------------------------------- /examples/jquery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bouncy Ball - Comparing Web Animation Techniques - jQuery 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/jquery/readme.md: -------------------------------------------------------------------------------- 1 | # jQuery 2 | 3 | jQuery, the popular DOM interaction library, includes many [effects](https://api.jquery.com/category/effects/), like the `.animate()` method we use in this demo. 4 | 5 | The demo defines two animations, one for falling and one for rising, and sets them up with callbacks to trigger each other. 6 | 7 | jQuery comes with a few simple easings, but more complex ones (like those in our demo) must be provided by an external library. Our demo uses 'easeInQuad' and 'easeOutQuad' which are provided by [jQuery UI](https://jqueryui.com/easing/). 8 | 9 | jQuery License: MIT 10 | 11 | ## Project Links 12 | 13 | * [jQuery on Github](https://github.com/jquery/jquery) 14 | * [jQuery `.animate()` Documentation](http://api.jquery.com/animate/) 15 | 16 | ## Resources 17 | 18 | * [jQuery UI Easings](https://jqueryui.com/easing/) 19 | * The [jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/) 20 | * [A Guide to the jQuery animate() Method](https://www.sitepoint.com/guide-jquery-animate-method/) 21 | -------------------------------------------------------------------------------- /examples/jquery/script.js: -------------------------------------------------------------------------------- 1 | const DURATION = 575; 2 | const $ball = $('ball'); 3 | 4 | function dropBall() { 5 | // We animate 'top' because jquery can't 6 | // animate transforms (without plugins): 7 | // See https://bugs.jquery.com/ticket/4171 8 | $ball.animate({ top: '160px' }, DURATION, 'easeInQuad', restoreBall); 9 | } 10 | 11 | function restoreBall() { 12 | $ball.animate({ top: '0' }, DURATION, 'easeOutQuad', dropBall); 13 | } 14 | 15 | $(document).ready(() => { 16 | dropBall(); 17 | }); 18 | -------------------------------------------------------------------------------- /examples/lottie/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "v": "5.1.16", 3 | "fr": 60, 4 | "ip": 0, 5 | "op": 69, 6 | "w": 50, 7 | "h": 210, 8 | "nm": "bouncyBall_v1", 9 | "ddd": 0, 10 | "assets": [], 11 | "layers": [ 12 | { 13 | "ddd": 0, 14 | "ind": 1, 15 | "ty": 4, 16 | "nm": "Shape Layer 1", 17 | "sr": 1, 18 | "ks": { 19 | "o": { "a": 0, "k": 100, "ix": 11 }, 20 | "r": { "a": 0, "k": 0, "ix": 10 }, 21 | "p": { 22 | "a": 1, 23 | "k": [ 24 | { 25 | "i": { "x": 0.667, "y": 0.199 }, 26 | "o": { "x": 0.349, "y": 0 }, 27 | "n": "0p667_0p199_0p349_0", 28 | "t": 0, 29 | "s": [27, 82.375, 0], 30 | "e": [27, 242, 0], 31 | "to": [0, 26.6041660308838, 0], 32 | "ti": [0, 0, 0] 33 | }, 34 | { 35 | "i": { "x": 0.667, "y": 1 }, 36 | "o": { "x": 0.333, "y": 0.911 }, 37 | "n": "0p667_1_0p333_0p911", 38 | "t": 35.092, 39 | "s": [27, 242, 0], 40 | "e": [27, 82.375, 0], 41 | "to": [0, 0, 0], 42 | "ti": [0, 26.6041660308838, 0] 43 | }, 44 | { "t": 75 } 45 | ], 46 | "ix": 2 47 | }, 48 | "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, 49 | "s": { "a": 0, "k": [100, 100, 100], "ix": 6 } 50 | }, 51 | "ao": 0, 52 | "shapes": [ 53 | { 54 | "ty": "gr", 55 | "it": [ 56 | { 57 | "d": 1, 58 | "ty": "el", 59 | "s": { "a": 0, "k": [50, 50], "ix": 2 }, 60 | "p": { "a": 0, "k": [0, 0], "ix": 3 }, 61 | "nm": "Ellipse Path 1", 62 | "mn": "ADBE Vector Shape - Ellipse", 63 | "hd": false 64 | }, 65 | { 66 | "ty": "st", 67 | "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 }, 68 | "o": { "a": 0, "k": 100, "ix": 4 }, 69 | "w": { "a": 0, "k": 0, "ix": 5 }, 70 | "lc": 1, 71 | "lj": 1, 72 | "ml": 4, 73 | "nm": "Stroke 1", 74 | "mn": "ADBE Vector Graphic - Stroke", 75 | "hd": false 76 | }, 77 | { 78 | "ty": "fl", 79 | "c": { 80 | "a": 0, 81 | "k": [0, 0.890196078431, 0.780392156863, 1], 82 | "ix": 4 83 | }, 84 | "o": { "a": 0, "k": 100, "ix": 5 }, 85 | "r": 1, 86 | "nm": "Fill 1", 87 | "mn": "ADBE Vector Graphic - Fill", 88 | "hd": false 89 | }, 90 | { 91 | "ty": "tr", 92 | "p": { "a": 0, "k": [-1.854, -57.354], "ix": 2 }, 93 | "a": { "a": 0, "k": [0, 0], "ix": 1 }, 94 | "s": { "a": 0, "k": [100, 100], "ix": 3 }, 95 | "r": { "a": 0, "k": 0, "ix": 6 }, 96 | "o": { "a": 0, "k": 100, "ix": 7 }, 97 | "sk": { "a": 0, "k": 0, "ix": 4 }, 98 | "sa": { "a": 0, "k": 0, "ix": 5 }, 99 | "nm": "Transform" 100 | } 101 | ], 102 | "nm": "Ellipse 1", 103 | "np": 3, 104 | "cix": 2, 105 | "ix": 1, 106 | "mn": "ADBE Vector Group", 107 | "hd": false 108 | } 109 | ], 110 | "ip": 0, 111 | "op": 69, 112 | "st": 0, 113 | "bm": 0 114 | } 115 | ], 116 | "markers": [] 117 | } 118 | -------------------------------------------------------------------------------- /examples/lottie/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Lottie / Bodymovin 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/lottie/readme.md: -------------------------------------------------------------------------------- 1 | # Lottie / Bodymovin 2 | 3 | Lottie is suite of libraries that allows you to render After Effects animations across various web and mobile platforms. These animations can be designed in [Adobe After Effects](https://www.adobe.com/products/aftereffects.html), exported as JSON files (using an After Effects extension called [Bodymovin](https://www.adobeexchange.com/creativecloud.details.12557.html)), and rendered with Lottie, which has libraries available for Android, iOS, web, and React Native. 4 | 5 | ## Project Links 6 | - [Documentation Site](https://airbnb.design/lottie/) 7 | - [Lottie iOS](https://github.com/airbnb/lottie-ios) 8 | - [Lottie Android](https://github.com/airbnb/lottie-android) 9 | - [Lottie React Native](https://github.com/airbnb/lottie-react-native) 10 | - [Lottie Web](https://github.com/airbnb/lottie-web) 11 | - [Bodymovin Plugin](https://www.adobeexchange.com/creativecloud.details.12557.html) 12 | 13 | ## Resources 14 | - [Introducing Lottie (article)](https://airbnb.design/introducing-lottie/) 15 | - [Codepen Examples using Lottie / Bodymovin](https://codepen.io/collection/nVYWZR/) 16 | - [Lottie / Bodymovin Github Documentation Wiki](https://github.com/airbnb/lottie-web/wiki) 17 | -------------------------------------------------------------------------------- /examples/lottie/script.js: -------------------------------------------------------------------------------- 1 | // You can see the data that was exported from After Effects at 2 | // https://sparkbox.github.io/bouncy-ball/examples/lottie/data.json 3 | lottie.loadAnimation({ 4 | container: document.querySelector('ball'), 5 | renderer: 'svg', 6 | loop: true, 7 | autoplay: true, 8 | path: 'data.json' 9 | }); 10 | -------------------------------------------------------------------------------- /examples/matter-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Matter.js 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/matter-js/readme.md: -------------------------------------------------------------------------------- 1 | # Matter.js 2 | 3 | Matter.js is a JavaScript 2D rigid body physics engine for the web. Matter.js can be used to build anything from physics-based demos to 2-dimensional games. 4 | 5 | Like other physics engines, it allows you to define a "World" and the physical laws that exist in it like gravity, air friction, and constraints. Each of the objects in this world have their own set of physical properties, like size, mass, and elasticity. The resulting behaviors are the physics-based interactions between these objects and their environment. Matter.js also supports user interactions via the mouse, keyboard, and touch devices. 6 | 7 | Matter.js uses HTML5's canvas for rendering and supports a number of drawing options including wireframe, solid colors, and sprites. 8 | 9 | ## Project Links 10 | 11 | - [Matter.js Github Repo](https://github.com/liabru/matter-js) 12 | - [Matter.js Website](http://brm.io/matter-js) 13 | 14 | ## Resources 15 | - [Matter.js Demos](http://brm.io/matter-js/demo/) 16 | - [A collection of Demos on Codepen using Matter.js](https://codepen.io/collection/Fuagy/) 17 | - [A list of Matter.js Tutorials](https://github.com/liabru/matter-js/wiki/Tutorials) 18 | -------------------------------------------------------------------------------- /examples/matter-js/script.js: -------------------------------------------------------------------------------- 1 | const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--matterjs'); 2 | const Engine = Matter.Engine, 3 | Render = Matter.Render, 4 | Runner = Matter.Runner, 5 | Bodies = Matter.Bodies, 6 | World = Matter.World; 7 | 8 | const engine = Engine.create(); 9 | const render = Render.create({ 10 | element: document.body, 11 | engine: engine, 12 | options: { 13 | width: 66, 14 | height: 226, 15 | wireframes: false, 16 | background: '#111' 17 | } 18 | }); 19 | const runner = Runner.create({ 20 | isFixed: true, 21 | delta: 1000 / 120, 22 | }); 23 | 24 | // Use a many-sided polygon as a ball, to ensure 100% elasticity. 25 | // See https://github.com/liabru/matter-js/issues/256 26 | const ball = Bodies.polygon(33, 25, 30, 25, { 27 | restitution: 1, 28 | friction: 0, 29 | frictionAir: 0, 30 | frictionStatic: 0, 31 | inertia: Infinity, 32 | render: { fillStyle: ballColor } 33 | }); 34 | const ground = Bodies.rectangle(33, 225, 66, 1, { 35 | isStatic: true, 36 | render: { fillStyle: '#111' } 37 | }); 38 | 39 | World.add(engine.world, [ball, ground]); 40 | Runner.run(runner, engine); 41 | Render.run(render); 42 | -------------------------------------------------------------------------------- /examples/mojs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - mo.js 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/mojs/readme.md: -------------------------------------------------------------------------------- 1 | # mo.js 2 | 3 | mo.js (which stands for "motion js") is a newer open-source library for declarative motion graphics in JavaScript. 4 | 5 | mo.js License: MIT 6 | 7 | ## Project Links 8 | 9 | * [mo.js Github Repo](https://github.com/legomushroom/mojs) 10 | * [mo.js API Docs](https://github.com/legomushroom/mojs/tree/master/api) 11 | * [mo.js Website](https://github.com/legomushroom/mojs/tree/master/api) 12 | 13 | ## Resources 14 | * [mo.js Tutorials](http://mojs.io/tutorials/shape/) 15 | -------------------------------------------------------------------------------- /examples/mojs/script.js: -------------------------------------------------------------------------------- 1 | const ball = new mojs.Shape({ 2 | shape: 'circle', 3 | radius: 25, 4 | top: 33, 5 | left: 33, 6 | y: { 0: 160 }, 7 | duration: 575, 8 | repeat: 1, 9 | easing: 'quad.in', 10 | isYoyo: true, 11 | onComplete: () => ball.replay() 12 | }).play(); 13 | -------------------------------------------------------------------------------- /examples/motion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Motion One 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/motion/readme.md: -------------------------------------------------------------------------------- 1 | # Motion 2 | 3 | Motion is a modern animation library, built on the Web Animations API. 4 | 5 | Motion was developed by Matt Perry, based on his experiences building Popmotion (which simplified web animation before the Web Animations API existed) and Framer Motion (which became the most popular animation library in the ReactJS community). Motion is considered the successor to Framer Motion, offering support for both React and VanillaJS use-cases. 6 | 7 | ## Project Links 8 | * [Website](https://motion.dev/) 9 | * [About](https://motion.dev/about) 10 | 11 | ## Resources 12 | * [Quick start](https://motion.dev/guides/quick-start) 13 | -------------------------------------------------------------------------------- /examples/motion/script.js: -------------------------------------------------------------------------------- 1 | const ball = document.querySelector("ball"); 2 | 3 | Motion.animate( 4 | ball, 5 | { y: [0, 160] }, 6 | { 7 | duration: .575, 8 | repeat: Infinity, 9 | direction: "alternate", 10 | easing: "cubic-bezier(.6, 0.08, 0.8, .6)" 11 | } 12 | ); 13 | -------------------------------------------------------------------------------- /examples/p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - P5 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/p5/readme.md: -------------------------------------------------------------------------------- 1 | # P5.js 2 | 3 | P5.js is an open-source JavaScript library for "creating graphic and interactive experiences." It's based on the core principles of [Processing](https://github.com/processing/processing), a popular programming language for visual designers. 4 | 5 | In this demo, we use JavaScript to calculate the position of the ball, and P5 to draw the ball and display it on the page (with ``). 6 | 7 | P5.js License: GPL 2.1 8 | 9 | ## Project Links 10 | 11 | * [P5.js Github Repo](https://github.com/processing/p5.js) 12 | * [P5.js Documentation](http://p5js.org/) 13 | 14 | ## Resources 15 | 16 | * [A video introduction to P5.js](http://hello.p5js.org/) 17 | * [Tutorial: Time-based Animation](https://www.viget.com/articles/time-based-animation) 18 | * [What are the kinematic formulas? (Khan Academy)](https://www.khanacademy.org/science/physics/one-dimensional-motion/kinematic-formulas/a/what-are-the-kinematic-formulas) 19 | -------------------------------------------------------------------------------- /examples/p5/script.js: -------------------------------------------------------------------------------- 1 | const h = 575; // x vertex, half of total bounce duration 2 | const k = 160; // y vertex, total bounce height 3 | const a = -4 * k / Math.pow(h * 2, 2); // coefficient: -.000483932 4 | const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--p5'); 5 | let ypos, start, time, timestamp; 6 | 7 | function setup() { 8 | createCanvas(66, 226); 9 | fill(ballColor); 10 | noStroke(); 11 | } 12 | 13 | function draw() { 14 | timestamp = millis(); 15 | if (!start) { start = timestamp }; 16 | time = timestamp - start; 17 | 18 | // Position as a function of time, using the vertex form 19 | // of the quadratic formula: f(x) = a(x - h)^2 + k, 20 | // (where [h, k] is the vertex). See it graphically at: 21 | // https://www.desmos.com/calculator/i6yunccp7v 22 | ypos = a * Math.pow(((time + h) % (h * 2) - h), 2) + k; 23 | 24 | clear(); 25 | ellipse(33, 200 - ypos, 50, 50); 26 | } 27 | -------------------------------------------------------------------------------- /examples/popmotion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Popmotion 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/popmotion/popmotion.8.7.5.global.min.js: -------------------------------------------------------------------------------- 1 | !function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((t=t||self).popmotion={})}(this,function(t){"use strict";var n=function(t,r){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var e in r)r.hasOwnProperty(e)&&(t[e]=r[e])})(t,r)};function r(t,r){function e(){this.constructor=t}n(t,r),t.prototype=null===r?Object.create(r):(e.prototype=r.prototype,new e)}var A=function(){return(A=Object.assign||function(t){for(var r,e=1,n=arguments.length;e=n[i]&&a[u].seek(1);for(var r=1;rt||r===i);r++);var e=It(n[r-1],n[r],t);a[r-1].seek(te(e))};var n,r,e,o,i,u,a})}function Yr(t,r){var e,n,o,i,u,a,s;return Array.isArray(r)?t.push.apply(t,(n=[],o=(e=r)[e.length-1],u=(i="number"==typeof o)?o:0,a=i?e.slice(0,-1):e,s=a.length,a.forEach(function(t,r){if(n.push(t),r!==s-1){var e=t.duration||300;n.push(""+(u-e))}}),n)):t.push(r),t}function Lr(t,r,e){var n=t.duration,o=t.easings,i=t.times,u=t.values,a=u.length,s=i[a-1],c=0===r.at?0:r.at/n,f=(r.at+r.duration)/n;if(0===e)u.push(r.from),i.push(c);else if(s!==c){void 0!==r.from&&(u.push(u[a-1]),i.push(c),o.push(F));var p=void 0!==r.from?r.from:u[a-1];u.push(p),i.push(c),o.push(F)}else void 0!==r.from&&(u.push(r.from),i.push(c),o.push(F));return u.push(r.to),i.push(f),o.push(r.ease||ht),t}function Ir(n,o,i){return dr(function(t){var r=t.update,e=o.split(" ").map(function(t){return n.addEventListener(t,r,i),t});return{stop:function(){return e.forEach(function(t){return n.removeEventListener(t,r,i)})}}})}function zr(){return{clientX:0,clientY:0,pageX:0,pageY:0,x:0,y:0}}function Br(t,r){return void 0===r&&(r=zr()),r.clientX=r.x=t.clientX,r.clientY=r.y=t.clientY,r.pageX=t.pageX,r.pageY=t.pageY,r}var Wr=Ar({getOutput:function(){return{}},getCount:function(t){return Object.keys(t).length},getFirst:function(t){return t[Object.keys(t)[0]]},mapApi:function(o,i){return function(){for(var n=[],t=0;t=u.length?n:i)()},update:e})};return i(),{stop:function(){return r&&r.stop()}}})}function pe(n){return dr(function(t){var r=t.complete,e=setTimeout(r,n);return{stop:function(){return clearTimeout(e)}}})}function de(t){var e=t.onRead,r=t.onRender,n=t.uncachedValues,c=void 0===n?new Set:n,o=t.useCache,f=void 0===o||o;return function(t){void 0===t&&(t={});var n=b(t,[]),o={},i=[],u=!1;function a(t,r){t.startsWith("--")&&(n.hasCSSVariable=!0);var e=o[t];o[t]=r,o[t]!==e&&(-1===i.indexOf(t)&&i.push(t),u||(u=!0,at.render(s.render)))}var s={get:function(t,r){return void 0===r&&(r=!1),!r&&f&&!c.has(t)&&void 0!==o[t]?o[t]:e(t,n)},set:function(t,r){if("string"==typeof t)a(t,r);else for(var e in t)a(e,t[e]);return this},render:function(t){return void 0===t&&(t=!1),!u&&!0!==t||(r(o,n,i),u=!1,i.length=0),this}};return s}}function le(t,r){return be.set(t,ge(r))}var ve,he=Object.freeze({__proto__:null,applyOffset:kt,clamp:Lt,conditional:function(r,e){return function(t){return r(t)?e(t):t}},interpolate:function(t,r,e){var n=void 0===e?{}:e,o=n.clamp,i=void 0===o||o,u=n.ease,a=n.mixer,s=t.length;r.length,u&&Array.isArray(u)&&u.length,t[0]>t[s-1]&&(t=[].concat(t),r=[].concat(r),t.reverse(),r.reverse());var c,f,p,d,l,v,h,m,g,y=Gt(r,u,a),b=2===s?(v=y,h=(l=t)[0],m=l[1],g=v[0],function(t){return g(It(h,m,t))}):(f=y,p=(c=t).length,d=p-1,function(t){var r=0,e=!1;if(t<=c[0]?e=!0:t>=c[d]&&(r=d-1,e=!0),!e){for(var n=1;nt||n===d);n++);r=n-1}var o=It(c[r],c[r+1],t);return f[r](o)});return i?Wt(Lt(t[0],t[s-1]),b):b},blendArray:qt,blendColor:Bt,pipe:Wt,smooth:function(o){void 0===o&&(o=50);var i=0,u=0;return function(t){var r=V().timestamp,e=r!==u?r-u:0,n=e?Kt(i,t,e,o):i;return u=r,i=n}},snap:function(o){if("number"==typeof o)return function(t){return Math.round(t/o)*o};var i=0,u=o.length;return function(t){var r=Math.abs(o[0]-t);for(i=1;i ballStyler.set('y', v)); 10 | -------------------------------------------------------------------------------- /examples/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - React 6 | 7 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/react/react-16.13.1.min.js: -------------------------------------------------------------------------------- 1 | /** @license React v16.13.1 2 | * react.production.min.js 3 | * 4 | * Copyright (c) Facebook, Inc. and its affiliates. 5 | * 6 | * This source code is licensed under the MIT license found in the 7 | * LICENSE file in the root directory of this source tree. 8 | */ 9 | 'use strict';(function(d,r){"object"===typeof exports&&"undefined"!==typeof module?r(exports):"function"===typeof define&&define.amd?define(["exports"],r):(d=d||self,r(d.React={}))})(this,function(d){function r(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;cC.length&&C.push(a)}function O(a,b,c,g){var e=typeof a;if("undefined"===e||"boolean"===e)a=null;var d=!1;if(null===a)d=!0;else switch(e){case "string":case "number":d=!0;break;case "object":switch(a.$$typeof){case x:case xa:d=!0}}if(d)return c(g,a,""===b?"."+P(a,0):b),1;d=0;b=""===b?".":b+":";if(Array.isArray(a))for(var f=0;f>>1,e=a[g];if(void 0!== 15 | e&&0D(f,c))void 0!==k&&0>D(k,f)?(a[g]=k,a[h]=c,g=h):(a[g]=f,a[d]=c,g=d);else if(void 0!==k&&0>D(k,c))a[g]=k,a[h]=c,g=h;else break a}}return b}return null}function D(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}function F(a){for(var b=n(u);null!== 16 | b;){if(null===b.callback)E(u);else if(b.startTime<=a)E(u),b.sortIndex=b.expirationTime,S(p,b);else break;b=n(u)}}function T(a){y=!1;F(a);if(!v)if(null!==n(p))v=!0,z(U);else{var b=n(u);null!==b&&G(T,b.startTime-a)}}function U(a,b){v=!1;y&&(y=!1,V());H=!0;var c=m;try{F(b);for(l=n(p);null!==l&&(!(l.expirationTime>b)||a&&!W());){var g=l.callback;if(null!==g){l.callback=null;m=l.priorityLevel;var e=g(l.expirationTime<=b);b=q();"function"===typeof e?l.callback=e:l===n(p)&&E(p);F(b)}else E(p);l=n(p)}if(null!== 17 | l)var d=!0;else{var f=n(u);null!==f&&G(T,f.startTime-b);d=!1}return d}finally{l=null,m=c,H=!1}}function oa(a){switch(a){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1E4;default:return 5E3}}var f="function"===typeof Symbol&&Symbol.for,x=f?Symbol.for("react.element"):60103,xa=f?Symbol.for("react.portal"):60106,Aa=f?Symbol.for("react.fragment"):60107,Ba=f?Symbol.for("react.strict_mode"):60108,Ca=f?Symbol.for("react.profiler"):60114,Da=f?Symbol.for("react.provider"):60109, 18 | Ea=f?Symbol.for("react.context"):60110,Fa=f?Symbol.for("react.forward_ref"):60112,Ga=f?Symbol.for("react.suspense"):60113,Ha=f?Symbol.for("react.memo"):60115,Ia=f?Symbol.for("react.lazy"):60116,la="function"===typeof Symbol&&Symbol.iterator,pa=Object.getOwnPropertySymbols,Ja=Object.prototype.hasOwnProperty,Ka=Object.prototype.propertyIsEnumerable,I=function(){try{if(!Object.assign)return!1;var a=new String("abc");a[5]="de";if("5"===Object.getOwnPropertyNames(a)[0])return!1;var b={};for(a=0;10>a;a++)b["_"+ 19 | String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(b).map(function(a){return b[a]}).join(""))return!1;var c={};"abcdefghijklmnopqrst".split("").forEach(function(a){c[a]=a});return"abcdefghijklmnopqrst"!==Object.keys(Object.assign({},c)).join("")?!1:!0}catch(g){return!1}}()?Object.assign:function(a,b){if(null===a||void 0===a)throw new TypeError("Object.assign cannot be called with null or undefined");var c=Object(a);for(var g,e=1;e=ua};f=function(){};X=function(a){0>a||125d?(a.sortIndex=e,S(u,a),null===n(p)&&a===n(u)&&(y?V():y=!0,G(T,e-d))):(a.sortIndex=c,S(p,a),v||H||(v=!0,z(U)));return a},unstable_cancelCallback:function(a){a.callback=null},unstable_wrapCallback:function(a){var b=m;return function(){var c=m;m=b;try{return a.apply(this,arguments)}finally{m=c}}},unstable_getCurrentPriorityLevel:function(){return m}, 27 | unstable_shouldYield:function(){var a=q();F(a);var b=n(p);return b!==l&&null!==l&&null!==b&&null!==b.callback&&b.startTime<=a&&b.expirationTime { 5 | const a = (4 * k) / Math.pow(h * 2, 2); // coefficient: -.000483932 6 | 7 | // Position as a function of time, using the vertex form 8 | // of the quadratic formula: f(x) = a(x - h)^2 + k, 9 | // (where [h, k] is the vertex). See it graphically at: 10 | // https://www.desmos.com/calculator/i6yunccp7v 11 | const ypos = a * Math.pow((((elapsedTime + h) % (h * 2)) - h), 2); 12 | 13 | return ypos; 14 | }; 15 | 16 | // performs a Quadratic Ease in and Ease out repeatedly 17 | function useQuadBounce({ 18 | duration = 1150, 19 | start = 0, 20 | end = 160, 21 | } = {}) { 22 | const timeStart = useRef(Date.now()); 23 | const [value, setValue] = useState(start); 24 | 25 | useEffect(() => { 26 | const interval = setInterval(() => { 27 | const time = Date.now() - timeStart.current; 28 | setValue(start + getPosition(time, duration / 2, end - start)); 29 | }, 16); 30 | 31 | return () => clearInterval(interval); 32 | }, []); 33 | 34 | return value; 35 | } 36 | 37 | function BouncyBall() { 38 | const y = useQuadBounce(); 39 | 40 | return
; 41 | } 42 | 43 | ReactDOM.render(, document.getElementById('root')); 44 | -------------------------------------------------------------------------------- /examples/shared-styles.css: -------------------------------------------------------------------------------- 1 | @import "../site/css/example-colors.css"; 2 | 3 | /* resets the document for all our demos */ 4 | body { 5 | background-color: #111; 6 | } 7 | -------------------------------------------------------------------------------- /examples/smil/image.svg: -------------------------------------------------------------------------------- 1 | 5 | 11 | 14 | 15 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/smil/readme.md: -------------------------------------------------------------------------------- 1 | # SMIL (SVG) 2 | 3 | SMIL (Synchronized Multimedia Integration Language), is a technology for declarative, SVG-native animation. 4 | 5 | ## Support and Deprecation 6 | 7 | [Browser support for SMIL is limited](http://caniuse.com/#feat=svg-smil), and the current implementations vary widely from browser to browser. For example, performance can vary greatly, depending on the browser and the technique used to embed it. 8 | 9 | In some browsers, like Chrome, SMIL is deprecated and using it will result in a warning in the console. Support is expected to be dropped in some future version. 10 | 11 | Other browsers, like Internet Explorer, currently have no plans to implement it. 12 | 13 | ## Resources 14 | * [A Guide to SVG Animations - SMIL (CSS Tricks)](https://css-tricks.com/guide-svg-animations-smil/) 15 | * [SVG animation with SMIL (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) 16 | * [SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features](https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/) 17 | * [Fake Smile - A SMIL polyfill for IE](https://leunen.me/fakesmile/) 18 | -------------------------------------------------------------------------------- /examples/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - [Technique Name] 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/template/readme.md: -------------------------------------------------------------------------------- 1 | # Technique Name 2 | 3 | ## Project Links 4 | 5 | ## Resources 6 | -------------------------------------------------------------------------------- /examples/template/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/bouncy-ball/a741e7b76c21f9cf1930b191a0633f13d8a2ba55/examples/template/script.js -------------------------------------------------------------------------------- /examples/vanilla-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Vanilla JS 6 | 7 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/vanilla-js/readme.md: -------------------------------------------------------------------------------- 1 | # Vanilla JS 2 | 3 | Uses only Javascript and DOM APIs. No external libraries. 4 | 5 | This technique uses a mathematic function to determine the position of the ball over time, and repeatedly draws the position on the screen using `requestAnimationFrame`. 6 | 7 | Our function is a quadratic function in vertex form. It uses a modulus operator to make it discontinuous, matching the path of the ball. 8 | 9 | ## Resources 10 | 11 | * [Request Animation Frame Docs (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 12 | * [The Vertex form of Quadratic Functions](http://mathbitsnotebook.com/Algebra1/Quadratics/QDVertexForm.html) 13 | -------------------------------------------------------------------------------- /examples/vanilla-js/script.js: -------------------------------------------------------------------------------- 1 | const ball = document.querySelector('ball'); 2 | const h = 575; // x vertex, half of total bounce duration 3 | const k = 160; // y vertex, total bounce height 4 | const a = -4 * k / Math.pow(h * 2, 2); // coefficient: -.000483932 5 | let ypos, start, time; 6 | 7 | (function drawPosition(timestamp) { 8 | if (!start) { start = timestamp }; 9 | time = timestamp - start; 10 | 11 | // Position as a function of time, using the vertex form 12 | // of the quadratic formula: f(x) = a(x - h)^2 + k, 13 | // (where [h, k] is the vertex). See it graphically at: 14 | // https://www.desmos.com/calculator/i6yunccp7v 15 | ypos = a * Math.pow(((time + h) % (h * 2) - h), 2) + k; 16 | 17 | ball.style.transform = 'translateY(' + -ypos + 'px)'; 18 | window.requestAnimationFrame(drawPosition); 19 | })(performance.now()); 20 | -------------------------------------------------------------------------------- /examples/velocity/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncy Ball - Comparing Web Animation Techniques - Velocity 6 | 7 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /examples/velocity/readme.md: -------------------------------------------------------------------------------- 1 | # Velocity 2 | 3 | This animation uses Velocity, an open-source animation engine designed as a faster alternative to [jQuery .animate()](http://api.jquery.com/animate/), which shares the same API. Velocity can be used with or without jQuery. 4 | 5 | This demo uses css transforms and loops the animation 6 | 7 | Velocity License: MIT 8 | 9 | ## Project Links 10 | 11 | * [Website](http://velocityjs.org/) 12 | * [Github Repo](https://github.com/julianshapiro/velocity) 13 | 14 | ## Resources 15 | 16 | * [Getting Started](https://github.com/julianshapiro/velocity/wiki) 17 | -------------------------------------------------------------------------------- /examples/velocity/script.js: -------------------------------------------------------------------------------- 1 | const ball = document.querySelector('ball'); 2 | 3 | ball.velocity({ 4 | transform: [ 5 | 'translateY(150px)', 6 | 'translateY(0px)', 7 | 'translateY(150px)', 8 | ], 9 | }, { 10 | duration: 575, 11 | easing: 'easeInQuad', 12 | loop: true, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/video/index.html: -------------------------------------------------------------------------------- 1 | 3 | 9 | -------------------------------------------------------------------------------- /examples/video/readme.md: -------------------------------------------------------------------------------- 1 | # HTML5 Video 2 | 3 | Animated video can be embedded using the HTML5 `