Fix animations bloat

docs/components/animation.md

@@ -2,15 +2,15 @@
 
 [component-header:sl-animation]
 
-Animate elements declaratively with over 500 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 
-To animate an element, wrap it in `<sl-animation>` and set a `name` and `duration`.
+To animate an element, wrap it in `<sl-animation>` and set a `name` and `duration`. Refer to the [properties table](#properties) for additional options.
 
 ```html preview
 <div class="animation-overview">
   <sl-animation name="bounce" duration="2000"><div class="box"></div></sl-animation>
   <sl-animation name="jello" duration="2000"><div class="box"></div></sl-animation>
-  <sl-animation name="heart-beat" duration="2000"><div class="box"></div></sl-animation>
+  <sl-animation name="heartBeat" duration="2000"><div class="box"></div></sl-animation>
   <sl-animation name="flip" duration="2000"><div class="box"></div></sl-animation>
 </div>
 
@@ -31,7 +31,7 @@ To animate an element, wrap it in `<sl-animation>` and set a `name` and `duratio
 
 ### Animations & Easings
 
-This example demonstrates all of the baked-in animations and easings. All animations were generated based on the popular [Animate.css](https://animate.style/) and [Animista](https://animista.net/) projects.
+This example demonstrates all of the baked-in animations and easings. Animations are based on those found in the popular [Animate.css](https://animate.style/) library.
 
 ```html preview
 <div class="animation-sandbox">
@@ -103,7 +103,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ```html preview
 <div class="animation-scroll">
-  <sl-animation name="scale-in-center" duration="3000" iterations="1"><div class="box"></div></sl-animation>
+  <sl-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></sl-animation>
 </div>
 
 <script>
@@ -149,10 +149,20 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
 <script>
   const animation = document.querySelector('.animation-keyframes sl-animation');
   animation.keyframes = [
-    { transform: 'scale(1)', opacity: 1 },
+    {
-    { transform: 'scale(.5)', opacity: .5 },
+      offset: 0,
-    { transform: 'scale(.667)', opacity: .667 },
+      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-    { transform: 'scale(.6)', opacity: .6 }
+      fillMode: 'both',
+      transformOrigin: 'center center',
+      transform: 'rotate(0)'
+    },
+    {
+      offset: 1,
+      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+      fillMode: 'both',
+      transformOrigin: 'center center',
+      transform: 'rotate(90deg)'
+    }
   ];
 </script>
 

docs/getting-started/changelog.md

@@ -6,6 +6,13 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- 🚨 BREAKING CHANGE: Fixed animations bloat
+  - Removed ~400 baked-in Animista animations because they were causing ~200KB of bloat (they can still be used with custom keyframes)
+  - Reworked animations into a separate module ([`@shoelace-style/animations`](https://github.com/shoelace-style/animations)) so it's more maintainable and animations are sync with the latest version of animate.css
+  - Animation and easing names are now camelcase (e.g. `easeInOut` instead of `ease-in-out`)
+
 ## 2.0.0-beta.25
 
 - 🚨 BREAKING CHANGE: Reworked color tokens

package-lock.json

@@ -131,6 +131,11 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.3.tgz",
       "integrity": "sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg=="
     },
+    "@shoelace-style/animations": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.0.0.tgz",
+      "integrity": "sha512-sv005CAsCmNmo1Uth/0k1lnU/Jp9/RDskVcCVBwaL/nwRLmm+BOC01ihVmTJ3RqBcYNzP5o+BuKC/GJOFUvLPw=="
+    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",

package.json

@@ -73,6 +73,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.5.3",
+    "@shoelace-style/animations": "^1.0.0",
     "@stencil/core": "^2.3.0",
     "@types/resize-observer-browser": "^0.1.4",
     "color": "^3.1.2"

src/components.d.ts

@@ -55,7 +55,7 @@ export namespace Components {
          */
         "duration": number;
         /**
-          * The rate of the animation's change over time.
+          * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.
          */
         "easing": string;
         /**
@@ -95,7 +95,7 @@ export namespace Components {
          */
         "keyframes": Keyframe[];
         /**
-          * The name of the animation to use.
+          * The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
          */
         "name": string;
         /**
@@ -1718,7 +1718,7 @@ declare namespace LocalJSX {
          */
         "duration"?: number;
         /**
-          * The rate of the animation's change over time.
+          * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.
          */
         "easing"?: string;
         /**
@@ -1742,7 +1742,7 @@ declare namespace LocalJSX {
          */
         "keyframes"?: Keyframe[];
         /**
-          * The name of the animation to use.
+          * The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
          */
         "name"?: string;
         /**

src/components/animation/animation.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch, h } from '@stencil/core';
-import animations from './animations';
+import { animations } from './animations';
-import easings from './easings';
+import { easings } from './easings';
 
 /**
  * @since 2.0
@@ -19,7 +19,7 @@ export class Animate {
 
   @Element() host: HTMLSlAnimationElement;
 
-  /** The name of the animation to use. */
+  /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   @Prop() name = 'none';
 
   /** The number of milliseconds to delay the start of the animation. */
@@ -31,7 +31,10 @@ export class Animate {
   /** The number of milliseconds each iteration of the animation takes to complete. */
   @Prop() duration = 1000;
 
-  /** The rate of the animation's change over time. */
+  /**
+   * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
+   * such as `cubic-bezier(0, 1, .76, 1.14)`.
+   */
   @Prop() easing = 'linear';
 
   /** The number of milliseconds to delay after the active period of an animation sequence. */
@@ -125,8 +128,8 @@ export class Animate {
   }
 
   createAnimation() {
-    const easing = easings.hasOwnProperty(this.easing) ? easings[this.easing] : this.easing;
+    const easing = easings[this.easing] || this.easing;
-    const keyframes = this.keyframes ? this.keyframes : animations[this.name];
+    const keyframes: Keyframe[] = this.keyframes ? this.keyframes : animations[this.name];
     const slot = this.host.shadowRoot.querySelector('slot');
     const element = slot.assignedElements({ flatten: true })[0] as HTMLElement;
 

src/components/animation/animations/index.ts

@@ -1,12 +1 @@
-import animatecss from './animatecss';
+export * as animations from '@shoelace-style/animations';
-import animista from './animista';
-
-const sortObject = (o: any) =>
-  Object.keys(o)
-    .sort()
-    .reduce((r, k) => ((r[k] = o[k]), r), {});
-
-export default {
-  none: [],
-  ...sortObject({ ...animatecss, ...animista })
-};

src/components/animation/easings/index.ts

@@ -1,31 +1,31 @@
-export default {
+export const easings = {
   linear: 'linear',
-  ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+  ease: 'ease',
-  'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
+  easeIn: 'ease-in',
-  'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
+  easeOut: 'ease-out',
-  'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)',
+  easeInOut: 'ease-in-out',
-  'ease-in-cubic': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  easeInSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
-  'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1.0)',
+  easeOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
-  'ease-in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.0)',
+  easeInOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
-  'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
+  easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-  'ease-out-circ': 'cubic-bezier(0.075, 0.82, 0.165, 1.0)',
+  easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-  'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+  easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
-  'ease-in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+  easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
-  'ease-out-expo': 'cubic-bezier(0.19, 1.0, 0.22, 1.0)',
+  easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-  'ease-in-out-expo': 'cubic-bezier(1.0, 0.0, 0.0, 1.0)',
+  easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
-  'ease-in-quad': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+  easeInQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
-  'ease-out-quad': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  easeOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
-  'ease-in-out-quad': 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+  easeInOutQuart: 'cubic-bezier(0.77, 0, 0.175, 1)',
-  'ease-in-quart': 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
+  easeInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
-  'ease-out-quart': 'cubic-bezier(0.165, 0.84, 0.44, 1.0)',
+  easeOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
-  'ease-in-out-quart': 'cubic-bezier(0.77, 0.0, 0.175, 1.0)',
+  easeInOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)',
-  'ease-in-quint': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+  easeInExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
-  'ease-out-quint': 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+  easeOutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',
-  'ease-in-out-quint': 'cubic-bezier(0.86, 0.0, 0.07, 1.0)',
+  easeInOutExpo: 'cubic-bezier(1, 0, 0, 1)',
-  'ease-in-sine': 'cubic-bezier(0.47, 0.0, 0.745, 0.715)',
+  easeInCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
-  'ease-out-sine': 'cubic-bezier(0.39, 0.575, 0.565, 1.0)',
+  easeOutCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
-  'ease-in-out-sine': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+  easeInOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
-  'ease-in-back': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
+  easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
-  'ease-out-back': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+  easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-  'ease-in-out-back': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+  easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
 };