https://github.com/knowler/restart-animations-element
A custom element for restarting animations on the page or for another element.
https://github.com/knowler/restart-animations-element
custom-elements web-components
Last synced: about 1 month ago
JSON representation
A custom element for restarting animations on the page or for another element.
- Host: GitHub
- URL: https://github.com/knowler/restart-animations-element
- Owner: knowler
- Created: 2023-12-01T16:42:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-01T17:53:57.000Z (over 2 years ago)
- Last Synced: 2024-10-12T08:12:46.250Z (over 1 year ago)
- Topics: custom-elements, web-components
- Language: JavaScript
- Homepage: https://codepen.io/knowler/pen/QWYZYEv
- Size: 4.88 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Restart Animations Element
A custom element for restarting animations on the page or for another
element. This only works for animations that persist. [See a demo on CodePen](https://codepen.io/knowler/pen/QWYZYEv).
## Usage
Here’s how to get it into your document and a few ways you can define it:
```js
import { RestartAnimationsElement } from "https://esm.sh/gh/knowler/restart-animations-element/restart-animations-element.js?raw";
// 1. Use the static method. Defines element ``
RestartAnimationsElement.define();
// 2. Set a custom tag name.
RestartAnimationsElement.define("replay-animations");
// 3. The standard way
if (!window.customElements.get("restart-animations")) {
window.customElements.define("restart-animations", RestartAnimationsElement);
}
```
Here’s how to use it:
```html
```
That’ll effectively display this:
```html
Restart Animations
```
## Scoping to a specific element
By default, the button will restart the animations for the entire page.
You can provide the `for` attribute an element ID to scope this to just
that element and it’s descedants.
```html
```
## Customize
This element has two slots:
1. The unnamed slot which is used to set the text of the button. You can
override it like this:
```html
Replay Animations
```
2. The `button` slot. This allows you to provide your own button.
```html
Replay Animations
```
The default button is exposed with CSS Parts and you can style it like
this:
```css
restart-animations::part(button) {
font-family: Comic Sans MS;
color: DeepPink;
}
```