@proyecto26/animatable-component - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/animatable-component/animatable-component.esm.js

@@ -1,1 +0,1 @@
-import{p as a,b as t}from"./p-b300bf53.js";a().then(a=>t([["p-o2svhulb",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[1540,"autoplay"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64],clear:[64],destroy:[64]}]]]],a));
+import{p as a,b as t}from"./p-b300bf53.js";a().then(a=>t([["p-oq2oarj0",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[1540,"autoplay"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64],clear:[64],destroy:[64]}]]]],a));

dist/animatable-component/p-bcd5789f.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-fca08e7d.system.js"],(function(){"use strict";var t,e;return{setters:[function(a){t=a.p;e=a.b}],execute:function(){t().then((function(t){return e([["p-snsy4wge.system",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[1540,"autoplay"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64],clear:[64],destroy:[64]}]]]],t)}))}}}));
+System.register(["./p-fca08e7d.system.js"],(function(){"use strict";var t,e;return{setters:[function(a){t=a.p;e=a.b}],execute:function(){t().then((function(t){return e([["p-krix0va1.system",[[4,"animatable-component",{animation:[1],keyFrames:[1040],keyFramesData:[1,"key-frames-data"],options:[1040],optionsData:[1,"options-data"],animateId:[1025,"animate-id"],delay:[1026],endDelay:[1026,"end-delay"],duration:[1026],direction:[1025],composite:[1025],easing:[1025],fill:[1025],iterations:[1026],iterationStart:[1026,"iteration-start"],iterationComposite:[1025,"iteration-composite"],autoPlay:[1540,"autoplay"],currentTime:[2,"current-time"],startTime:[2,"start-time"],playbackRate:[2,"playback-rate"],getCurrentTime:[64],getStartTime:[64],getPending:[64],getPlaybackRate:[64],getPlayState:[64],cancel:[64],finish:[64],pause:[64],play:[64],reverse:[64],clear:[64],destroy:[64]}]]]],t)}))}}}));

dist/cjs/animatable-component.cjs.entry.js

@@ -33,3 +33,2 @@ 'use strict';
     animationDidChangeHandler(animation) {
-        debugger;
         const keyFrames = index.Animations[animation];
@@ -184,6 +183,4 @@ if (keyFrames) {
             animationOptions.composite = this.composite;
-        if (this.easing) {
-            const defaultEasing = this.easing;
-            animationOptions.easing = index.EASING_FUNCTIONS[defaultEasing] || this.easing;
-        }
+        const easingType = (this.easing || animationOptions.easing);
+        animationOptions.easing = index.EASING_FUNCTIONS[easingType] || easingType;
         if (this.endDelay !== undefined)
@@ -190,0 +187,0 @@ animationOptions.endDelay = this.endDelay;

dist/collection/components/animatable-component/animatable-component.js

@@ -28,3 +28,2 @@ import { h } from "@stencil/core";
     animationDidChangeHandler(animation) {
-        debugger;
         const keyFrames = Animations[animation];
@@ -179,6 +178,4 @@ if (keyFrames) {
             animationOptions.composite = this.composite;
-        if (this.easing) {
-            const defaultEasing = this.easing;
-            animationOptions.easing = EASING_FUNCTIONS[defaultEasing] || this.easing;
-        }
+        const easingType = (this.easing || animationOptions.easing);
+        animationOptions.easing = EASING_FUNCTIONS[easingType] || easingType;
         if (this.endDelay !== undefined)
@@ -185,0 +182,0 @@ animationOptions.endDelay = this.endDelay;

dist/esm-es5/animatable-component.entry.js

@@ -69,3 +69,2 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     class_1.prototype.animationDidChangeHandler = function (animation) {
-        debugger;
         var keyFrames = Animations[animation];
@@ -286,6 +285,4 @@ if (keyFrames) {
             animationOptions.composite = this.composite;
-        if (this.easing) {
-            var defaultEasing = this.easing;
-            animationOptions.easing = EASING_FUNCTIONS[defaultEasing] || this.easing;
-        }
+        var easingType = (this.easing || animationOptions.easing);
+        animationOptions.easing = EASING_FUNCTIONS[easingType] || easingType;
         if (this.endDelay !== undefined)
@@ -292,0 +289,0 @@ animationOptions.endDelay = this.endDelay;

dist/esm/animatable-component.entry.js

@@ -29,3 +29,2 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-8eb39732.js';
     animationDidChangeHandler(animation) {
-        debugger;
         const keyFrames = Animations[animation];
@@ -180,6 +179,4 @@ if (keyFrames) {
             animationOptions.composite = this.composite;
-        if (this.easing) {
-            const defaultEasing = this.easing;
-            animationOptions.easing = EASING_FUNCTIONS[defaultEasing] || this.easing;
-        }
+        const easingType = (this.easing || animationOptions.easing);
+        animationOptions.easing = EASING_FUNCTIONS[easingType] || easingType;
         if (this.endDelay !== undefined)
@@ -186,0 +183,0 @@ animationOptions.endDelay = this.endDelay;

package.json

 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "description": "A WebComponent to use Web Animations API in a declarative way! 💅",
-  "author": "Juan David Nicholls Cardona",
+  "author": "Proyecto 26",
   "homepage": "https://proyecto26.github.io/animatable-component",
@@ -8,0 +8,0 @@ "main": "dist/index.js",

readme.md

@@ -19,3 +19,3 @@ ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
 You can animate any HTML element easily:
-```
+```html
 <animatable-component
@@ -31,51 +31,14 @@ autoplay
 ```
-As you can see it's like *Animate.css* but with superpowers because you can keep the last state (opacity, transform, etc) of a previous animation before to create another one.
 
-To animate things you can use the `createAnimatableComponent` utility.
+## Demo
 
-```
-import {
-  createAnimatableComponent
-} from '@proyecto26/animatable-component';
+Do you want to see this web component in action? Visit https://codepen.io/jdnichollsc/full/rNNYBbe yay! 🎉
 
-const SendMessageButton = (props) =>(
-  <ion-fab-button {...props}>
-    <ion-icon name='send' />
-  </ion-fab-button>
-);
-const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton);
-const keyFramesSendMessage: Keyframe[] = [
-  {
-    opacity: '0',
-    transform: 'rotate(0deg)'
-  },
-  {
-    opacity: '1',
-    transform: 'rotate(360deg)'
-  }
-];
-const optionsSendMessage: KeyframeAnimationOptions = {
-  duration: 500,
-  easing: 'ease-in-out'
-};
+- Meet `<animatable />`, a tiny Web Component: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh
 
-...
-  render() {
-    return (
-       <AnimatableSendMessageButton
-        keyFrames={keyFramesSendMessage}
-        options={optionsSendMessage}
-        onFinish={() => alert('Eureka!')}
-      />
-    )
-  }
-...
-```
+![Animatable](https://github.com/proyecto26/animatable-component/blob/master/img/animatable.png?raw=true)
 
-## Demo
+As you can see it's like *[Animate.css](https://daneden.github.io/animate.css/)* but with superpowers because you can keep the last state (opacity, transform, etc) of a previous animation before to create another one.
 
-Do you want to see this web component in action? Visit https://codepen.io/jdnichollsc/full/rNNYBbe yay! 🎉
 
-- Meet `<animatable />`, a tiny Web Component: https://dev.to/jdnichollsc/meet-animatable-a-tiny-web-component-to-use-web-animations-api-as-a-component-1glh
-
 ## Properties
@@ -224,3 +187,3 @@
 
-- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.0.0/dist/animatable-component.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/animatable-component@1.0.1/dist/animatable-component.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
@@ -323,2 +286,55 @@
 
+### Stencil
+
+To animate [Functional Components](https://stenciljs.com/docs/functional-components) you can use the `createAnimatableComponent` utility, e.g:
+- `utils.tsx`
+```tsx
+import {
+  createAnimatableComponent
+} from '@proyecto26/animatable-component';
+
+const SendMessageButton = (props) => (
+  <ion-fab-button {...props}>
+    <ion-icon name='send' />
+  </ion-fab-button>
+);
+export const AnimatableSendMessageButton = createAnimatableComponent(SendMessageButton);
+export const keyFramesSendMessage: Keyframe[] = [
+  {
+    opacity: '0',
+    transform: 'rotate(0deg)'
+  },
+  {
+    opacity: '1',
+    transform: 'rotate(360deg)'
+  }
+];
+export const optionsSendMessage: KeyframeAnimationOptions = {
+  duration: 500,
+  easing: 'ease-in-out'
+};
+```
+- `my-component.tsx`
+```tsx
+import { Component, Host, h } from '@stencil/core';
+import { AnimatableSendMessageButton, keyFramesSendMessage, optionsSendMessage } from './utils'
+
+@Component({
+  tag: 'my-component',
+  shadow: false
+})
+export class MyComponent {
+  render() {
+    return (
+       <AnimatableSendMessageButton
+        autoPlay
+        keyFrames={keyFramesSendMessage}
+        options={optionsSendMessage}
+        onFinish={() => alert('Eureka!')}
+      />
+    )
+  }
+}
+```
+
 ## Supporting 🍻
@@ -325,0 +341,0 @@ I believe in Unicorns 🦄

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1042350

increased by0.03%

Number of lines in readme file

347

increased by4.83%

Worsened metrics

Lines of code

16456

decreased by-0.07%

No dependency changes