├── .editorconfig
├── .github
├── FUNDING.yml
└── workflows
│ └── release.yml
├── .gitignore
├── .vscode
├── extensions.json
└── settings.json
├── LICENSE
├── README.md
├── eslint.config.mjs
├── index.html
├── netlify.toml
├── package.json
├── pnpm-lock.yaml
├── public
├── fonts
│ ├── WorkSans-Bold.woff2
│ ├── WorkSans-Regular.woff2
│ └── WorkSans.css
├── img
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ ├── favicon-emoji.svg
│ └── favicon.svg
└── service-worker.js
├── src
├── docs
│ ├── index.ts
│ ├── main.css
│ └── registerServiceWorker.ts
├── index.ts
├── utils.ts
└── vite-env.d.ts
├── tsconfig.json
├── unocss.config.ts
└── vite.config.ts
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: ['https://paypal.me/jschopplich']
2 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | tags:
6 | - 'v*'
7 |
8 | permissions:
9 | contents: write
10 |
11 | jobs:
12 | release:
13 | runs-on: ubuntu-latest
14 | steps:
15 | - uses: actions/checkout@v4
16 | with:
17 | fetch-depth: 0
18 | - uses: pnpm/action-setup@v3
19 | - uses: actions/setup-node@v4
20 | with:
21 | node-version: 20
22 | registry-url: https://registry.npmjs.org/
23 | cache: pnpm
24 |
25 | - name: Publish changelog
26 | run: npx changelogithub
27 | env:
28 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
29 |
30 | - run: pnpm install
31 | - run: pnpm run build
32 |
33 | - name: Publish to npm
34 | run: npm publish --access public
35 | env:
36 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
37 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": [
3 | "dbaeumer.vscode-eslint"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | // Enable the ESLint flat config support
3 | "eslint.useFlatConfig": true,
4 |
5 | // Disable the default formatter, use ESLint instead
6 | "prettier.enable": false,
7 | "editor.formatOnSave": false,
8 |
9 | // Auto-fix
10 | "editor.codeActionsOnSave": {
11 | "source.fixAll.eslint": "explicit",
12 | "source.organizeImports": "never"
13 | },
14 |
15 | // Silent the stylistic rules in you IDE, but still auto-fix them
16 | "eslint.rules.customizations": [
17 | { "rule": "style/*", "severity": "off", "fixable": true },
18 | { "rule": "format/*", "severity": "off", "fixable": true },
19 | { "rule": "*-indent", "severity": "off", "fixable": true },
20 | { "rule": "*-spacing", "severity": "off", "fixable": true },
21 | { "rule": "*-spaces", "severity": "off", "fixable": true },
22 | { "rule": "*-order", "severity": "off", "fixable": true },
23 | { "rule": "*-dangle", "severity": "off", "fixable": true },
24 | { "rule": "*-newline", "severity": "off", "fixable": true },
25 | { "rule": "*quotes", "severity": "off", "fixable": true },
26 | { "rule": "*semi", "severity": "off", "fixable": true }
27 | ],
28 |
29 | // Enable ESLint for all supported languages
30 | "eslint.validate": [
31 | "javascript",
32 | "javascriptreact",
33 | "typescript",
34 | "typescriptreact",
35 | "vue",
36 | "html",
37 | "markdown",
38 | "json",
39 | "jsonc",
40 | "yaml",
41 | "toml",
42 | "xml",
43 | "gql",
44 | "graphql",
45 | "astro",
46 | "svelte",
47 | "css",
48 | "less",
49 | "scss",
50 | "pcss",
51 | "postcss"
52 | ]
53 | }
54 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020-PRESENT Johann Schopplich
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 | Animere.js
6 |
7 |
8 | CSS-driven scroll-based animations
9 | Explore the demo »
10 |
11 |
12 |
13 |
14 | ## Animere.js
15 |
16 | ### Key Features
17 |
18 | - 🍃 **Lightweight**: 1 kB minified & gzipped
19 | - ✨ **CSS-driven**: Utilizes [Animate.css](https://animate.style) under the hood
20 | - 🔧 **Customizable**: Use `data` attributes for animation duration, delay, repeat
21 | - ♿️ **Accessible**: Respects reduced motion preference
22 | - 🔍 **SEO-friendly**: Detects e.g. Google Bot and skips initialization
23 |
24 | ## Installation
25 |
26 | Animere.js can be used without a build step. Simply load it from a CDN:
27 |
28 | ```html
29 |
30 |
31 |
32 |
33 | ```
34 |
35 | - The `defer` attribute makes the script execute after HTML content is parsed.
36 | - The `init` attribute tells Animere.js to automatically initialize and animate all elements that have a `data-animere` attribute.
37 |
38 | ### Manual Initialization
39 |
40 | If you don't want the auto initialize, remove the `init` attribute and move the scripts to end of ``:
41 |
42 | ```html
43 |
44 |
47 | ```
48 |
49 | Or, use the ES module build by installing the `animere` npm package:
50 |
51 | ```js
52 | import { createAnimere } from 'animere'
53 |
54 | createAnimere()
55 | ```
56 |
57 | ### Production CDN URLs
58 |
59 | The short CDN URLs are meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:
60 |
61 | - Global build: https://unpkg.com/animere@3.0.0/dist/animere.iife.js
62 | - Exposes `Animere` global property, supports auto initializing
63 | - ESM build: https://unpkg.com/animere@3.0.0/dist/animere.mjs
64 | - Must be used with `
79 |
80 |
81 |