@proyecto26/animatable-component - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

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

@@ -1,1 +0,1 @@
-import{p as a,b as t}from"./p-26c8340a.js";a().then(a=>t([["p-m6vya9nn",[[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:[4,"auto-play"],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]}]]]],a));
+import{p as a,b as t}from"./p-26c8340a.js";a().then(a=>t([["p-xpxtkvbr",[[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:[4,"auto-play"],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]}]]]],a));

dist/animatable-component/index.esm.js

@@ -1,1 +0,1 @@
-import{h as t}from"./p-26c8340a.js";export{A as ANIMATIONS,E as EASING,a as EASING_FUNCTIONS}from"./p-5ab1233c.js";var e=function(t,a){var e={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&a.indexOf(i)<0&&(e[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(t);o<i.length;o++)a.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(t,i[o])&&(e[i[o]]=t[i[o]])}return e};function i(a){return i=>{const{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:u,composite:d,easing:f,fill:b,iterations:F,iterationStart:k,iterationComposite:D,autoPlay:I,currentTime:T,startTime:j,playbackRate:C,onFinish:O,onCancel:S}=i,N=e(i,["ref","keyFrames","keyFramesData","options","optionsData","animateId","delay","endDelay","duration","direction","composite","easing","fill","iterations","iterationStart","iterationComposite","autoPlay","currentTime","startTime","playbackRate","onFinish","onCancel"]);return t("animatable-component",{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:u,composite:d,easing:f,fill:b,iterations:F,iterationStart:k,iterationComposite:D,autoPlay:I,currentTime:T,startTime:j,playbackRate:C,onFinish:O,onCancel:S},t(a,Object.assign({},N)))}}export{i as createAnimatableComponent};
+import{h as t}from"./p-26c8340a.js";export{A as ANIMATIONS,E as EASING,a as EASING_FUNCTIONS}from"./p-21d2122f.js";var e=function(t,a){var e={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&a.indexOf(i)<0&&(e[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(t);o<i.length;o++)a.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(t,i[o])&&(e[i[o]]=t[i[o]])}return e};function i(a){return i=>{const{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:d,composite:f,easing:u,fill:F,iterations:b,iterationStart:k,iterationComposite:D,autoPlay:I,currentTime:T,startTime:j,playbackRate:C,onFinish:O,onCancel:S}=i,N=e(i,["ref","keyFrames","keyFramesData","options","optionsData","animateId","delay","endDelay","duration","direction","composite","easing","fill","iterations","iterationStart","iterationComposite","autoPlay","currentTime","startTime","playbackRate","onFinish","onCancel"]);return t("animatable-component",{ref:o,keyFrames:n,keyFramesData:r,options:s,optionsData:c,animateId:m,delay:l,endDelay:p,duration:y,direction:d,composite:f,easing:u,fill:F,iterations:b,iterationStart:k,iterationComposite:D,autoPlay:I,currentTime:T,startTime:j,playbackRate:C,onFinish:O,onCancel:S},t(a,Object.assign({},N)))}}export{i as createAnimatableComponent};

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

@@ -1,1 +0,1 @@
-System.register(["./p-f73383a0.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-5nrn0o9c.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:[4,"auto-play"],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]}]]]],t)}))}}}));
+System.register(["./p-f73383a0.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-enrbpq4o.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:[4,"auto-play"],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]}]]]],t)}))}}}));

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

@@ -6,3 +6,3 @@ 'use strict';
 const core = require('./core-b6b4e35b.js');
-const animations = require('./animations-0ef5d88a.js');
+const animations = require('./animations-ce477ffd.js');
 
@@ -9,0 +9,0 @@ const AnimatableComponent = class {

dist/cjs/index.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 const core = require('./core-b6b4e35b.js');
-const animations = require('./animations-0ef5d88a.js');
+const animations = require('./animations-ce477ffd.js');
 
@@ -9,0 +9,0 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {

dist/collection/animations/animations.js

@@ -7,5 +7,13 @@ import ATTENTION_SEEKERS from './attention-seekers';
 import FLIPPERS from './flippers';
+import LIGHTSPEED from './lightspeed';
+import ROTATING_ENTRANCES from './rotating-entrances';
+import ROTATING_EXITS from './rotating-exits';
+import SLIDING_ENTRANCES from './sliding-entrances';
+import SLIDING_EXITS from './sliding-exits';
+import ZOOM_ENTRANCES from './zoom-entrances';
+import ZOOM_EXITS from './zoom-exits';
+import SPECIALS from './specials';
 import { ANIMATIONS } from './common';
 export const ANIMATION_KEY_ERROR = 'Animation not supported';
 export { ANIMATIONS };
-export default Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ATTENTION_SEEKERS), BOUNCING_ENTRANCES), BOUNCING_EXITS), FADING_ENTRANCES), FADING_EXITS), FLIPPERS);
+export default Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ATTENTION_SEEKERS), BOUNCING_ENTRANCES), BOUNCING_EXITS), FADING_ENTRANCES), FADING_EXITS), FLIPPERS), LIGHTSPEED), ROTATING_ENTRANCES), ROTATING_EXITS), SLIDING_ENTRANCES), SLIDING_EXITS), ZOOM_ENTRANCES), ZOOM_EXITS), SPECIALS);

dist/collection/animations/attention-seekers.js

 import { ANIMATIONS } from './common';
+const BOUNCE_DEFAULT = {
+    transform: 'translate(0)',
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'
+};
 const BOUNCE = [
-    { offset: 0, transform: 'translateY(0px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
-    { offset: 0.2, transform: 'translateY(0px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+    Object.assign({ offset: 0 }, BOUNCE_DEFAULT),
+    Object.assign({ offset: 0.2 }, BOUNCE_DEFAULT),
     { offset: 0.4, transform: 'translateY(-30px)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' },
     { offset: 0.43, transform: 'translateY(-30px)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' },
-    { offset: 0.53, transform: 'translateY(0px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+    Object.assign({ offset: 0.53 }, BOUNCE_DEFAULT),
     { offset: 0.7, transform: 'translateY(-15px)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' },
-    { offset: 0.8, transform: 'translateY(0px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
+    Object.assign({ offset: 0.8 }, BOUNCE_DEFAULT),
     { offset: 0.9, transform: 'translateY(-4px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
-    { offset: 1, transform: 'translateY(0px)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' }
+    Object.assign({ offset: 1 }, BOUNCE_DEFAULT)
 ];
@@ -20,13 +24,17 @@ const FLASH = [
 ];
+const JELLO_DEFAULT = {
+    transform: 'skewX(0deg) skewY(0deg)',
+    transformOrigin: 'center'
+};
 const JELLO = [
-    { offset: 0, transform: 'skewX(0deg) skewY(0deg)' },
-    { offset: 0.111, transform: 'skewX(0deg) skewY(0deg)' },
-    { offset: 0.222, transform: 'skewX(-12.5deg) skewY(-12.5deg)' },
-    { offset: 0.333, transform: 'skewX(6.25deg) skewY(6.25deg)' },
-    { offset: 0.444, transform: 'skewX(-3.125deg) skewY(-3.125deg)' },
-    { offset: 0.555, transform: 'skewX(1.5625deg) skewY(1.5625deg)' },
-    { offset: 0.666, transform: 'skewX(-0.78125deg) skewY(-0.78125deg)' },
-    { offset: 0.777, transform: 'skewX(0.390625deg) skewY(0.390625deg)' },
-    { offset: 0.888, transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' },
-    { offset: 1, transform: 'skewX(0deg) skewY(0deg)' }
+    Object.assign({ offset: 0 }, JELLO_DEFAULT),
+    Object.assign({ offset: 0.111 }, JELLO_DEFAULT),
+    Object.assign(Object.assign({ offset: 0.222 }, JELLO_DEFAULT), { transform: 'skewX(-12.5deg) skewY(-12.5deg)' }),
+    Object.assign(Object.assign({ offset: 0.333 }, JELLO_DEFAULT), { transform: 'skewX(6.25deg) skewY(6.25deg)' }),
+    Object.assign(Object.assign({ offset: 0.444 }, JELLO_DEFAULT), { transform: 'skewX(-3.125deg) skewY(-3.125deg)' }),
+    Object.assign(Object.assign({ offset: 0.555 }, JELLO_DEFAULT), { transform: 'skewX(1.5625deg) skewY(1.5625deg)' }),
+    Object.assign(Object.assign({ offset: 0.666 }, JELLO_DEFAULT), { transform: 'skewX(-0.78125deg) skewY(-0.78125deg)' }),
+    Object.assign(Object.assign({ offset: 0.777 }, JELLO_DEFAULT), { transform: 'skewX(0.390625deg) skewY(0.390625deg)' }),
+    Object.assign(Object.assign({ offset: 0.888 }, JELLO_DEFAULT), { transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' }),
+    Object.assign({ offset: 1 }, JELLO_DEFAULT)
 ];
@@ -45,22 +53,24 @@ const PULSE = [
 ];
+const SHAKE_LEFT = { transform: 'translateX(-10px)' };
+const SHAKE_RIGHT = { transform: 'translateX(10px)' };
 const SHAKE = [
     { offset: 0, transform: 'translateX(0px)' },
-    { offset: 0.1, transform: 'translateX(-10px)' },
-    { offset: 0.2, transform: 'translateX(10px)' },
-    { offset: 0.3, transform: 'translateX(-10px)' },
-    { offset: 0.4, transform: 'translateX(10px)' },
-    { offset: 0.5, transform: 'translateX(-10px)' },
-    { offset: 0.6, transform: 'translateX(10px)' },
-    { offset: 0.7, transform: 'translateX(-10px)' },
-    { offset: 0.8, transform: 'translateX(10px)' },
-    { offset: 0.9, transform: 'translateX(-10px)' },
+    Object.assign({ offset: 0.1 }, SHAKE_LEFT),
+    Object.assign({ offset: 0.2 }, SHAKE_RIGHT),
+    Object.assign({ offset: 0.3 }, SHAKE_LEFT),
+    Object.assign({ offset: 0.4 }, SHAKE_RIGHT),
+    Object.assign({ offset: 0.5 }, SHAKE_LEFT),
+    Object.assign({ offset: 0.6 }, SHAKE_RIGHT),
+    Object.assign({ offset: 0.7 }, SHAKE_LEFT),
+    Object.assign({ offset: 0.8 }, SHAKE_RIGHT),
+    Object.assign({ offset: 0.9 }, SHAKE_LEFT),
     { offset: 1, transform: 'translateX(0px)' }
 ];
 const SWING = [
-    { offset: 0, transform: 'rotate(0deg)' },
-    { offset: 0.2, transform: 'rotate(15deg)' },
-    { offset: 0.4, transform: 'rotate(-10deg)' },
-    { offset: 0.6, transform: 'rotate(5deg)' },
-    { offset: 0.8, transform: 'rotate(-5deg)' },
-    { offset: 1, transform: 'rotate(0deg)' }
+    { offset: 0, transform: 'rotate(0deg)', transformOrigin: 'top center' },
+    { offset: 0.2, transform: 'rotate(15deg)', transformOrigin: 'top center' },
+    { offset: 0.4, transform: 'rotate(-10deg)', transformOrigin: 'top center' },
+    { offset: 0.6, transform: 'rotate(5deg)', transformOrigin: 'top center' },
+    { offset: 0.8, transform: 'rotate(-5deg)', transformOrigin: 'top center' },
+    { offset: 1, transform: 'rotate(0deg)', transformOrigin: 'top center' }
 ];
@@ -90,17 +100,18 @@ const RUBBER_BAND = [
 const WOBBLE = [
-    { offset: 0, transform: 'translateX(0px) rotate(0deg)' },
-    { offset: 0.15, transform: 'translateX(-25px) rotate(-5deg)' },
-    { offset: 0.3, transform: 'translateX(20px) rotate(3deg)' },
-    { offset: 0.45, transform: 'translateX(-15px) rotate(-3deg)' },
-    { offset: 0.6, transform: 'translateX(10px) rotate(2deg)' },
-    { offset: 0.75, transform: 'translateX(-5px) rotate(-1deg)' },
-    { offset: 1, transform: 'translateX(0px) rotate(0deg)' }
+    { offset: 0, transform: 'translate(0) rotate(0deg)' },
+    { offset: 0.15, transform: 'translateX(-25%) rotate(-5deg)' },
+    { offset: 0.3, transform: 'translateX(20%) rotate(3deg)' },
+    { offset: 0.45, transform: 'translateX(-15%) rotate(-3deg)' },
+    { offset: 0.6, transform: 'translateX(10%) rotate(2deg)' },
+    { offset: 0.75, transform: 'translateX(-5%) rotate(-1deg)' },
+    { offset: 1, transform: 'translate(0) rotate(0deg)' }
 ];
+const HEART_BEAT_DEFAULT = { transform: 'scale(1)', easing: 'ease-in-out' };
 const HEART_BEAT = [
-    { offset: 0, transform: 'scale(1)' },
-    { offset: 0.14, transform: 'scale(1.3)' },
-    { offset: 0.28, transform: 'scale(1)' },
-    { offset: 0.42, transform: 'scale(1.3)' },
-    { offset: 0.70, transform: 'scale(1)' },
-    { offset: 1, transform: 'scale(1)' },
+    Object.assign({ offset: 0 }, HEART_BEAT_DEFAULT),
+    Object.assign(Object.assign({ offset: 0.14 }, HEART_BEAT_DEFAULT), { transform: 'scale(1.3)' }),
+    Object.assign({ offset: 0.28 }, HEART_BEAT_DEFAULT),
+    Object.assign(Object.assign({ offset: 0.42 }, HEART_BEAT_DEFAULT), { transform: 'scale(1.3)' }),
+    Object.assign({ offset: 0.70 }, HEART_BEAT_DEFAULT),
+    Object.assign({ offset: 1 }, HEART_BEAT_DEFAULT),
 ];
@@ -107,0 +118,0 @@ export default {

dist/collection/animations/common.js

@@ -50,3 +50,3 @@ export const ANIMATIONS_ATTENTION_SEEKERS = {
 };
-export const FLIPPERS = {
+export const ANIMATIONS_FLIPPERS = {
     FLIP: 'flip',
@@ -58,2 +58,54 @@ FLIP_IN_X: 'flipInX',
 };
-export const ANIMATIONS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ANIMATIONS_ATTENTION_SEEKERS), ANIMATIONS_BOUNCING_ENTRANCES), ANIMATIONS_BOUNCING_EXITS), ANIMATIONS_FADING_ENTRANCES), ANIMATIONS_FADING_EXITS), FLIPPERS);
+export const ANIMATIONS_LIGHTSPEED = {
+    LIGHT_SPEED_IN: 'lightSpeedIn',
+    LIGHT_SPEED_OUT: 'lightSpeedOut'
+};
+export const ANIMATIONS_ROTATING_ENTRANCES = {
+    ROTATE_IN: 'rotateIn',
+    ROTATE_IN_CLOCKWISE: 'rotateInClockwise',
+    ROTATE_IN_DOWN_LEFT: 'rotateInDownLeft',
+    ROTATE_IN_DOWN_RIGHT: 'rotateInDownRight',
+    ROTATE_IN_UP_LEFT: 'rotateInUpLeft',
+    ROTATE_IN_UP_RIGHT: 'rotateInUpRight'
+};
+export const ANIMATIONS_ROTATING_EXITS = {
+    ROTATE_OUT: 'rotateOut',
+    ROTATE_OUT_CLOCKWISE: 'rotateOutClockwise',
+    ROTATE_OUT_DOWN_LEFT: 'rotateOutDownLeft',
+    ROTATE_OUT_DOWN_RIGHT: 'rotateOutDownRight',
+    ROTATE_OUT_UP_LEFT: 'rotateOutUpLeft',
+    ROTATE_OUT_UP_RIGHT: 'rotateOutUpRight'
+};
+export const ANIMATIONS_SLIDING_ENTRANCES = {
+    SLIDE_IN_UP: 'slideInUp',
+    SLIDE_IN_DOWN: 'slideInDown',
+    SLIDE_IN_LEFT: 'slideInLeft',
+    SLIDE_IN_RIGHT: 'slideInRight'
+};
+export const ANIMATIONS_SLIDING_EXITS = {
+    SLIDE_OUT_UP: 'slideOutUp',
+    SLIDE_OUT_DOWN: 'slideOutDown',
+    SLIDE_OUT_LEFT: 'slideOutLeft',
+    SLIDE_OUT_RIGHT: 'slideOutRight'
+};
+export const ANIMATIONS_ZOOM_ENTRANCES = {
+    ZOOM_IN: 'zoomIn',
+    ZOOM_IN_UP: 'zoomInUp',
+    ZOOM_IN_DOWN: 'zoomInDown',
+    ZOOM_IN_LEFT: 'zoomInLeft',
+    ZOOM_IN_RIGHT: 'zoomInRight'
+};
+export const ANIMATIONS_ZOOM_EXITS = {
+    ZOOM_OUT: 'zoomOut',
+    ZOOM_OUT_UP: 'zoomOutUp',
+    ZOOM_OUT_DOWN: 'zoomOutDown',
+    ZOOM_OUT_LEFT: 'zoomOutLeft',
+    ZOOM_OUT_RIGHT: 'zoomOutRight'
+};
+export const ANIMATIONS_SPECIALS = {
+    HINGE: 'hinge',
+    JACK_IN_THE_BOX: 'jackInTheBox',
+    ROLL_IN: 'rollIn',
+    ROLL_OUT: 'rollOut'
+};
+export const ANIMATIONS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ANIMATIONS_ATTENTION_SEEKERS), ANIMATIONS_BOUNCING_ENTRANCES), ANIMATIONS_BOUNCING_EXITS), ANIMATIONS_FADING_ENTRANCES), ANIMATIONS_FADING_EXITS), ANIMATIONS_FLIPPERS), ANIMATIONS_LIGHTSPEED), ANIMATIONS_ROTATING_ENTRANCES), ANIMATIONS_ROTATING_EXITS), ANIMATIONS_SLIDING_ENTRANCES), ANIMATIONS_SLIDING_EXITS), ANIMATIONS_ZOOM_ENTRANCES), ANIMATIONS_ZOOM_EXITS), ANIMATIONS_SPECIALS);

dist/collection/animations/flippers.js

 import { ANIMATIONS } from './common';
 const FLIP = [
-    { offset: 0, easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(-360deg)' },
-    { offset: 0.4, easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-190deg)' },
-    { offset: 0.5, easing: 'ease-in', transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-170deg)' },
-    { offset: 0.8, easing: 'ease-in', transform: 'perspective(400px) scale(0.95) translateZ(0) rotateY(0deg)' },
-    { offset: 1, easing: 'ease-in', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(0deg)' }
+    { offset: 0, backfaceVisibility: 'visible', easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(-360deg)' },
+    { offset: 0.4, backfaceVisibility: 'visible', easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-190deg)' },
+    { offset: 0.5, backfaceVisibility: 'visible', easing: 'ease-in', transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-170deg)' },
+    { offset: 0.8, backfaceVisibility: 'visible', easing: 'ease-in', transform: 'perspective(400px) scale(0.95) translateZ(0) rotateY(0deg)' },
+    { offset: 1, backfaceVisibility: 'visible', easing: 'ease-in', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(0deg)' }
 ];
 const FLIP_IN_X = [
-    { offset: 0, opacity: 0, easing: 'ease-in', transform: 'perspective(400px) rotateX(90deg)' },
-    { offset: 0.4, opacity: 0.5, easing: 'ease-in', transform: 'perspective(400px) rotateX(-20deg)' },
-    { offset: 0.6, opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(10deg)' },
-    { offset: 0.8, opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(-5deg)' },
-    { offset: 1, opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(0deg)' }
+    { offset: 0, backfaceVisibility: 'visible', opacity: 0, easing: 'ease-in', transform: 'perspective(400px) rotateX(90deg)' },
+    { offset: 0.4, backfaceVisibility: 'visible', opacity: 0.5, easing: 'ease-in', transform: 'perspective(400px) rotateX(-20deg)' },
+    { offset: 0.6, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(10deg)' },
+    { offset: 0.8, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(-5deg)' },
+    { offset: 1, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(0deg)' }
 ];
 const FLIP_IN_Y = [
-    { offset: 0, opacity: 0, easing: 'ease-in', transform: 'perspective(400px) rotateY(90deg)' },
-    { offset: 0.4, opacity: 0.5, easing: 'ease-in', transform: 'perspective(400px) rotateY(-20deg)' },
-    { offset: 0.6, opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(10deg)' },
-    { offset: 0.8, opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(-5deg)' },
-    { offset: 1, opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(0deg)' }
+    { offset: 0, backfaceVisibility: 'visible', opacity: 0, easing: 'ease-in', transform: 'perspective(400px) rotateY(90deg)' },
+    { offset: 0.4, backfaceVisibility: 'visible', opacity: 0.5, easing: 'ease-in', transform: 'perspective(400px) rotateY(-20deg)' },
+    { offset: 0.6, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(10deg)' },
+    { offset: 0.8, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(-5deg)' },
+    { offset: 1, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(0deg)' }
 ];
 const FLIP_OUT_X = [
-    { offset: 0, opacity: 1, transform: 'perspective(400px) rotateX(0deg)' },
-    { offset: 0.3, opacity: 1, transform: 'perspective(400px) rotateX(-15deg)' },
-    { offset: 1, opacity: 0, transform: 'perspective(400px) rotateX(90deg)' }
+    { offset: 0, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateX(0deg)' },
+    { offset: 0.3, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateX(-15deg)' },
+    { offset: 1, backfaceVisibility: 'visible', opacity: 0, transform: 'perspective(400px) rotateX(90deg)' }
 ];
 const FLIP_OUT_Y = [
-    { offset: 0, opacity: 1, transform: 'perspective(400px) rotateY(0deg)' },
-    { offset: 0.3, opacity: 1, transform: 'perspective(400px) rotateY(-15deg)' },
-    { offset: 1, opacity: 0, transform: 'perspective(400px) rotateY(90deg)' }
+    { offset: 0, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateY(0deg)' },
+    { offset: 0.3, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateY(-15deg)' },
+    { offset: 1, backfaceVisibility: 'visible', opacity: 0, transform: 'perspective(400px) rotateY(90deg)' }
 ];
@@ -33,0 +33,0 @@ export default {

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

@@ -38,3 +38,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { r as registerInstance, c as createEvent, h, g as getElement } from './core-2ea9cbb5.js';
-import { b as ANIMATION_KEY_ERROR, a as EASING_FUNCTIONS, c as Animations } from './animations-5a527f43.js';
+import { b as ANIMATION_KEY_ERROR, a as EASING_FUNCTIONS, c as Animations } from './animations-801962e1.js';
 var AnimatableComponent = /** @class */ (function () {
@@ -41,0 +41,0 @@ function class_1(hostRef) {

dist/esm/animatable-component.entry.js

 import { r as registerInstance, c as createEvent, h, g as getElement } from './core-2ea9cbb5.js';
-import { b as ANIMATION_KEY_ERROR, a as EASING_FUNCTIONS, c as Animations } from './animations-5a527f43.js';
+import { b as ANIMATION_KEY_ERROR, a as EASING_FUNCTIONS, c as Animations } from './animations-801962e1.js';
 
@@ -4,0 +4,0 @@ const AnimatableComponent = class {

dist/types/animations/animations.d.ts

@@ -5,2 +5,38 @@ import { ANIMATIONS, AnimationsType } from './common';
 declare const _default: {
+    [ANIMATIONS.HINGE]: Keyframe[];
+    [ANIMATIONS.JACK_IN_THE_BOX]: Keyframe[];
+    [ANIMATIONS.ROLL_IN]: Keyframe[];
+    [ANIMATIONS.ROLL_OUT]: Keyframe[];
+    [ANIMATIONS.ZOOM_OUT]: Keyframe[];
+    [ANIMATIONS.ZOOM_OUT_UP]: Keyframe[];
+    [ANIMATIONS.ZOOM_OUT_DOWN]: Keyframe[];
+    [ANIMATIONS.ZOOM_OUT_LEFT]: Keyframe[];
+    [ANIMATIONS.ZOOM_OUT_RIGHT]: Keyframe[];
+    [ANIMATIONS.ZOOM_IN]: Keyframe[];
+    [ANIMATIONS.ZOOM_IN_UP]: Keyframe[];
+    [ANIMATIONS.ZOOM_IN_DOWN]: Keyframe[];
+    [ANIMATIONS.ZOOM_IN_LEFT]: Keyframe[];
+    [ANIMATIONS.ZOOM_IN_RIGHT]: Keyframe[];
+    [ANIMATIONS.SLIDE_OUT_UP]: Keyframe[];
+    [ANIMATIONS.SLIDE_OUT_DOWN]: Keyframe[];
+    [ANIMATIONS.SLIDE_OUT_LEFT]: Keyframe[];
+    [ANIMATIONS.SLIDE_OUT_RIGHT]: Keyframe[];
+    [ANIMATIONS.SLIDE_IN_UP]: Keyframe[];
+    [ANIMATIONS.SLIDE_IN_DOWN]: Keyframe[];
+    [ANIMATIONS.SLIDE_IN_LEFT]: Keyframe[];
+    [ANIMATIONS.SLIDE_IN_RIGHT]: Keyframe[];
+    [ANIMATIONS.ROTATE_OUT]: Keyframe[];
+    [ANIMATIONS.ROTATE_OUT_CLOCKWISE]: Keyframe[];
+    [ANIMATIONS.ROTATE_OUT_DOWN_LEFT]: Keyframe[];
+    [ANIMATIONS.ROTATE_OUT_DOWN_RIGHT]: Keyframe[];
+    [ANIMATIONS.ROTATE_OUT_UP_LEFT]: Keyframe[];
+    [ANIMATIONS.ROTATE_OUT_UP_RIGHT]: Keyframe[];
+    [ANIMATIONS.ROTATE_IN]: Keyframe[];
+    [ANIMATIONS.ROTATE_IN_CLOCKWISE]: Keyframe[];
+    [ANIMATIONS.ROTATE_IN_DOWN_LEFT]: Keyframe[];
+    [ANIMATIONS.ROTATE_IN_DOWN_RIGHT]: Keyframe[];
+    [ANIMATIONS.ROTATE_IN_UP_LEFT]: Keyframe[];
+    [ANIMATIONS.ROTATE_IN_UP_RIGHT]: Keyframe[];
+    [ANIMATIONS.LIGHT_SPEED_IN]: Keyframe[];
+    [ANIMATIONS.LIGHT_SPEED_OUT]: Keyframe[];
     [ANIMATIONS.FLIP]: Keyframe[];
@@ -7,0 +43,0 @@ [ANIMATIONS.FLIP_IN_X]: Keyframe[];

dist/types/animations/common.d.ts

@@ -50,3 +50,3 @@ export declare const ANIMATIONS_ATTENTION_SEEKERS: {
 };
-export declare const FLIPPERS: {
+export declare const ANIMATIONS_FLIPPERS: {
     readonly FLIP: "flip";
@@ -58,3 +58,91 @@ readonly FLIP_IN_X: "flipInX";
 };
+export declare const ANIMATIONS_LIGHTSPEED: {
+    readonly LIGHT_SPEED_IN: "lightSpeedIn";
+    readonly LIGHT_SPEED_OUT: "lightSpeedOut";
+};
+export declare const ANIMATIONS_ROTATING_ENTRANCES: {
+    readonly ROTATE_IN: "rotateIn";
+    readonly ROTATE_IN_CLOCKWISE: "rotateInClockwise";
+    readonly ROTATE_IN_DOWN_LEFT: "rotateInDownLeft";
+    readonly ROTATE_IN_DOWN_RIGHT: "rotateInDownRight";
+    readonly ROTATE_IN_UP_LEFT: "rotateInUpLeft";
+    readonly ROTATE_IN_UP_RIGHT: "rotateInUpRight";
+};
+export declare const ANIMATIONS_ROTATING_EXITS: {
+    readonly ROTATE_OUT: "rotateOut";
+    readonly ROTATE_OUT_CLOCKWISE: "rotateOutClockwise";
+    readonly ROTATE_OUT_DOWN_LEFT: "rotateOutDownLeft";
+    readonly ROTATE_OUT_DOWN_RIGHT: "rotateOutDownRight";
+    readonly ROTATE_OUT_UP_LEFT: "rotateOutUpLeft";
+    readonly ROTATE_OUT_UP_RIGHT: "rotateOutUpRight";
+};
+export declare const ANIMATIONS_SLIDING_ENTRANCES: {
+    readonly SLIDE_IN_UP: "slideInUp";
+    readonly SLIDE_IN_DOWN: "slideInDown";
+    readonly SLIDE_IN_LEFT: "slideInLeft";
+    readonly SLIDE_IN_RIGHT: "slideInRight";
+};
+export declare const ANIMATIONS_SLIDING_EXITS: {
+    readonly SLIDE_OUT_UP: "slideOutUp";
+    readonly SLIDE_OUT_DOWN: "slideOutDown";
+    readonly SLIDE_OUT_LEFT: "slideOutLeft";
+    readonly SLIDE_OUT_RIGHT: "slideOutRight";
+};
+export declare const ANIMATIONS_ZOOM_ENTRANCES: {
+    readonly ZOOM_IN: "zoomIn";
+    readonly ZOOM_IN_UP: "zoomInUp";
+    readonly ZOOM_IN_DOWN: "zoomInDown";
+    readonly ZOOM_IN_LEFT: "zoomInLeft";
+    readonly ZOOM_IN_RIGHT: "zoomInRight";
+};
+export declare const ANIMATIONS_ZOOM_EXITS: {
+    readonly ZOOM_OUT: "zoomOut";
+    readonly ZOOM_OUT_UP: "zoomOutUp";
+    readonly ZOOM_OUT_DOWN: "zoomOutDown";
+    readonly ZOOM_OUT_LEFT: "zoomOutLeft";
+    readonly ZOOM_OUT_RIGHT: "zoomOutRight";
+};
+export declare const ANIMATIONS_SPECIALS: {
+    readonly HINGE: "hinge";
+    readonly JACK_IN_THE_BOX: "jackInTheBox";
+    readonly ROLL_IN: "rollIn";
+    readonly ROLL_OUT: "rollOut";
+};
 export declare const ANIMATIONS: {
+    readonly HINGE: "hinge";
+    readonly JACK_IN_THE_BOX: "jackInTheBox";
+    readonly ROLL_IN: "rollIn";
+    readonly ROLL_OUT: "rollOut";
+    readonly ZOOM_OUT: "zoomOut";
+    readonly ZOOM_OUT_UP: "zoomOutUp";
+    readonly ZOOM_OUT_DOWN: "zoomOutDown";
+    readonly ZOOM_OUT_LEFT: "zoomOutLeft";
+    readonly ZOOM_OUT_RIGHT: "zoomOutRight";
+    readonly ZOOM_IN: "zoomIn";
+    readonly ZOOM_IN_UP: "zoomInUp";
+    readonly ZOOM_IN_DOWN: "zoomInDown";
+    readonly ZOOM_IN_LEFT: "zoomInLeft";
+    readonly ZOOM_IN_RIGHT: "zoomInRight";
+    readonly SLIDE_OUT_UP: "slideOutUp";
+    readonly SLIDE_OUT_DOWN: "slideOutDown";
+    readonly SLIDE_OUT_LEFT: "slideOutLeft";
+    readonly SLIDE_OUT_RIGHT: "slideOutRight";
+    readonly SLIDE_IN_UP: "slideInUp";
+    readonly SLIDE_IN_DOWN: "slideInDown";
+    readonly SLIDE_IN_LEFT: "slideInLeft";
+    readonly SLIDE_IN_RIGHT: "slideInRight";
+    readonly ROTATE_OUT: "rotateOut";
+    readonly ROTATE_OUT_CLOCKWISE: "rotateOutClockwise";
+    readonly ROTATE_OUT_DOWN_LEFT: "rotateOutDownLeft";
+    readonly ROTATE_OUT_DOWN_RIGHT: "rotateOutDownRight";
+    readonly ROTATE_OUT_UP_LEFT: "rotateOutUpLeft";
+    readonly ROTATE_OUT_UP_RIGHT: "rotateOutUpRight";
+    readonly ROTATE_IN: "rotateIn";
+    readonly ROTATE_IN_CLOCKWISE: "rotateInClockwise";
+    readonly ROTATE_IN_DOWN_LEFT: "rotateInDownLeft";
+    readonly ROTATE_IN_DOWN_RIGHT: "rotateInDownRight";
+    readonly ROTATE_IN_UP_LEFT: "rotateInUpLeft";
+    readonly ROTATE_IN_UP_RIGHT: "rotateInUpRight";
+    readonly LIGHT_SPEED_IN: "lightSpeedIn";
+    readonly LIGHT_SPEED_OUT: "lightSpeedOut";
     readonly FLIP: "flip";
@@ -61,0 +149,0 @@ readonly FLIP_IN_X: "flipInX";

package.json

 {
   "name": "@proyecto26/animatable-component",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A WebComponent to use Web Animations API in a declarative way! 💅",
@@ -5,0 +5,0 @@ "author": "Juan David Nicholls Cardona",

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

1024521

increased by9.8%

Number of package files

102

increased by18.6%

Lines of code

16098

increased by9.13%

Number of lines in readme file

246

increased by1.65%

No dependency changes