@shoelace-style/animations

WebJar for @shoelace-style/animations

License	MIT
GroupId	org.webjars.npm
ArtifactId	shoelace-style__animations
Last Version	1.1.0
Release Date	Mar 31, 2021
Type	jar
Description	@shoelace-style/animations WebJar for @shoelace-style/animations
Project URL	https://www.webjars.org
Source Code Management	https://github.com/shoelace-style/animations

Download shoelace-style__animations

Filename	Size
shoelace-style__animations-1.1.0.pom
shoelace-style__animations-1.1.0.jar	45 KB
shoelace-style__animations-1.1.0-sources.jar	22 bytes
shoelace-style__animations-1.1.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/shoelace-style__animations/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>shoelace-style__animations</artifactId>
    <version>1.1.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/shoelace-style__animations/
implementation 'org.webjars.npm:shoelace-style__animations:1.1.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/shoelace-style__animations/
implementation ("org.webjars.npm:shoelace-style__animations:1.1.0")

Apache Buildr

'org.webjars.npm:shoelace-style__animations:jar:1.1.0'

Apache Ivy

<dependency org="org.webjars.npm" name="shoelace-style__animations" rev="1.1.0">
  <artifact name="shoelace-style__animations" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='shoelace-style__animations', version='1.1.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "shoelace-style__animations" % "1.1.0"

Leiningen

[org.webjars.npm/shoelace-style__animations "1.1.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Shoelace Animations

Your favorite animate.css effects available as ES modules for use with the Web Animations API.

• 🏆 ~100 quality animations
• 🎾 ~30 popular easings
• 🚚 Works with CDNs
• 🌲 Fully tree-shakeable

Try it on JSFiddle

This module was built for Shoelace, but it works well as a stand-alone library too!

Installation

npm install @shoelace-style/animations

Usage

Importing all animations:

import * as animations from '@shoelace-style/animations';

Importing individual animations:

import { bounce } from '@shoelace-style/animations';

Importing easings:

import { easings } from '@shoelace-style/animations';

Animating an element:

<div style="display: block; width: 100px; height: 100px; background: tomato; margin: 2rem;"></div>

<script type="module">
  import { easings, flip } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/animations@1/dist/index.js';

  const box = document.querySelector('div');

  box.animate(flip, {
    duration: 1500,
    iterations: Infinity,
    easing: easings.easeInSine
  });
</script>

This example uses the jsDelivr CDN. To import the library locally, install it and make node_modules/@shoelace-style/animations/dist available to your app or bundler.

Developers

This script parses all animation stylesheets found in node_modules/animate.css and generates keyframe objects that you can use with the Web Animations API. As animations are tweaked and added to animate.css, the keyframes herein will be kept in sync when rerunning the script.

To build the project, run:

npm run build

This will purge and rebuild the dist directory.

Please report all bugs and suggestions to the issue tracker.

Shoelace

A forward-thinking library of web components.

Versions

Version
1.1.0 Mar 31, 2021
1.0.0 Feb 17, 2021