feat: add 'blink', 'pulsate' and 'scale' animations

Author: igorMSoares

js-css-animations/animate.js

@@ -122,6 +122,8 @@ const updateCssProperties = (element, opts) => {
           angle: 'deg',
           blur: 'px',
           iteration: '',
+          initialScale: '',
+          finalScale: '',
         };
 
         opts[prop] = `${opts[prop]}` + unit[prop];
@@ -200,7 +202,7 @@ const isMotion = animType => animType === 'motion';
  */
 const removeMotionCssClass = element => {
   const className = [...element.classList].find(cl =>
-    cl.match(/js\-anim\-\-rotate/)
+    cl.match(/js\-anim\-\-(rotate|scale)/)
   );
   if (className) element.classList.remove(className);
 };

js-css-animations/globals.js

@@ -41,6 +41,7 @@ export const MOTION_ANIMS_ID = Object.freeze({
   rotateLeftCCW: 7,
   rotate: 8,
   rotationLoop: 9,
+  scale: 10,
 });
 
 /**
@@ -61,6 +62,8 @@ export const PROPERTY_NAMES = Object.freeze({
   iteration: '--js-css-animation--iteration',
   direction: '--js-css-animation--direction',
   transfOrigin: '--js-css-animation--transf-origin',
+  initialScale: '--js-css-animation--initial-scale',
+  finalScale: '--js-css-animation--final-scale',
 });
 
 /**
@@ -119,6 +122,7 @@ export const CLASS_NAMES = Object.freeze({
     'js-anim--rotate-left__ccw',
     'js-anim--rotate',
     'js-anim--rotation-loop',
+    'js-anim--scale',
   ],
   moveBack: [
     'js-anim--rotate-up',
@@ -131,6 +135,7 @@ export const CLASS_NAMES = Object.freeze({
     'js-anim--rotate-up',
     'js-anim--rotate-up',
     'js-anim--rotate-up',
+    'js-anim--scale__back',
   ],
 });
 

js-css-animations/js-animations.css

@@ -139,6 +139,24 @@
   }
 }
 
+@keyframes js-anim--scale {
+  from {
+    transform: scale(var(--js-css-animation--initial-scale));
+  }
+  to {
+    transform: scale(var(--js-css-animation--final-scale));
+  }
+}
+
+@keyframes js-anim--scale__back {
+  from {
+    transform: scale(var(--js-css-animation--final-scale));
+  }
+  to {
+    transform: scale(var(--js-css-animation--initial-scale));
+  }
+}
+
 :root {
   --js-css-animation--duration: 800ms;
   --js-css-animation--timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
@@ -178,7 +196,9 @@
 .js-anim--slide-right__back,
 .js-anim--fade-in,
 .js-anim--fade-out,
-.js-anim--rotation-loop {
+.js-anim--rotation-loop,
+.js-anim--scale,
+.js-anim--scale__back {
   animation-duration: var(--js-css-animation--duration);
   animation-timing-function: var(--js-css-animation--timing-function);
   animation-delay: var(--js-css-animation--delay);
@@ -256,6 +276,22 @@
   animation-name: js-anim--rotation-loop;
 }
 
+.js-anim--scale,
+.js-anim--scale__back {
+  --js-css-animation--transf-origin: 'center';
+  --js-css-animation--initial-scale: 1;
+  --js-css-animation--final-scale: 1;
+  transform-origin: var(--js-css-animation--transf-origin);
+}
+
+.js-anim--scale {
+  animation-name: js-anim--scale;
+}
+
+.js-anim--scale__back {
+  animation-name: js-anim--scale__back;
+}
+
 .js-anim--fade-out {
   animation-name: js-anim--fade-out;
 }

js-css-animations/js-css-animations.js

@@ -298,11 +298,12 @@ const jsCssAnimations = (function () {
         ...opts,
       });
     },
-    pulse: (target, opts = {}) => {
-      jsCssAnimations.show.collapse(target, {
+    pulsate: (target, opts = {}) => {
+      jsCssAnimations.scale(target, {
+        finalScale: '1.5',
         duration: '1s',
         iteration: 'infinite',
-        direction: 'alternate',
+        direction: 'reverse',
         ...opts,
       });
     },

main.js

@@ -112,12 +112,14 @@ jsCssAnimations.init.rotate({
   },
 });
 
-jsCssAnimations.pulse('#anchor img', {
-  transfOrigin: 'bottom',
+jsCssAnimations.pulsate('#anchor2 img', {
+  finalScale: 1.2,
 });
 
-jsCssAnimations.rotationLoop('#anchor2 img', {
-  angle: 180,
-  duration: '1s',
-  transfOrigin: 'bottom right',
+jsCssAnimations.init.scale({
+  trigger: '#anchor2 img',
+  targetSelector: '.p2',
+  finalScale: 1.2,
+  duration: '1.5s',
+  initialScale: 1,
 });