feat: 'transfOrigin' can be passed as an option

to customize transform-origin css property
only applicable to collapse/expand and rotation animations

Author: igorMSoares

js-css-animations/globals.js

@@ -60,6 +60,7 @@ export const PROPERTY_NAMES = Object.freeze({
   angle: '--js-css-animation--rotation-angle',
   iteration: '--js-css-animation--iteration',
   direction: '--js-css-animation--direction',
+  transfOrigin: '--js-css-animation--transf-origin',
 });
 
 /**
@@ -116,7 +117,7 @@ export const CLASS_NAMES = Object.freeze({
     'js-anim--rotate-down__ccw',
     'js-anim--rotate-left',
     'js-anim--rotate-left__ccw',
-    'js-anim--rotated',
+    'js-anim--rotate',
     'js-anim--rotation-loop',
   ],
   moveBack: [

js-css-animations/js-animations.css

@@ -6,15 +6,15 @@
   to {
     opacity: 0;
     transform: scaleY(0);
-    transform-origin: center top;
+    transform-origin: var(--js-css-animation--transf-origin);
   }
 }
 
 @keyframes js-anim--expand {
   from {
     opacity: 0;
     transform: scaleY(0);
-    transform-origin: center top;
+    transform-origin: var(--js-css-animation--transf-origin);
   }
   to {
     opacity: 1;
@@ -135,6 +135,7 @@
 @keyframes js-anim--rotation-loop {
   to {
     transform: rotate(var(--js-css-animation--rotation-angle));
+    transform-origin: var(--js-css-animation--transf-origin);
   }
 }
 
@@ -194,8 +195,10 @@
 .js-anim--rotate-down__ccw,
 .js-anim--rotate-left,
 .js-anim--rotate-left__ccw,
-.js-anim--rotated {
+.js-anim--rotate {
+  --js-css-animation--transf-origin: 'center';
   transform: rotate(var(--js-css-animation--rotation-angle));
+  transform-origin: var(--js-css-animation--transf-origin);
   transition-property: transform;
   transition-duration: var(--js-css-animation--duration);
   transition-timing-function: var(--js-css-animation--timing-function);
@@ -248,6 +251,8 @@
 .js-anim--rotation-loop {
   --js-css-animation--rotation-angle: 0deg;
   --js-css-animation--iteration: infinite;
+  --js-css-animation--direction: alternate;
+  --js-css-animation--transf-origin: 'center';
   animation-name: js-anim--rotation-loop;
 }
 
@@ -259,6 +264,11 @@
   animation-name: js-anim--fade-in;
 }
 
+.js-anim--collapse,
+.js-anim--expand {
+  --js-css-animation--transf-origin: top center;
+}
+
 .js-anim--collapse {
   animation-name: js-anim--collapse;
 }

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

@@ -87,6 +87,7 @@ const toggle = (selector, animA, animB, opts = {}) => {
     'angle',
     'iteration',
     'direction',
+    'transfOrigin',
     'keepSpace',
     'overflowHidden',
     'dimensionsTransition',
@@ -289,6 +290,22 @@ const jsCssAnimations = (function () {
     show: showVisibilityAnim,
     hide: hideVisibilityAnim,
     toggle: toggle,
+    blink: (target, opts = {}) => {
+      jsCssAnimations.show.fade(target, {
+        duration: '1s',
+        iteration: 'infinite',
+        direction: 'alternate',
+        ...opts,
+      });
+    },
+    pulse: (target, opts = {}) => {
+      jsCssAnimations.show.collapse(target, {
+        duration: '1s',
+        iteration: 'infinite',
+        direction: 'alternate',
+        ...opts,
+      });
+    },
     isRotated: checkRotation,
     /**
      * @param {Element|string} selector - Dom element or a valid CSS selector

main.js

@@ -62,6 +62,7 @@ jsCssAnimations.init.collapse({
   targetSelector: '.collapse-expand--p__mult',
   staggerDelay: 400,
   keepSpace: true,
+  transfOrigin: 'center',
 });
 
 jsCssAnimations.init.fade({
@@ -98,16 +99,25 @@ jsCssAnimations.init.rotate({
     if (validateInput(document.querySelector('#rotation-angle'))) {
       // @ts-ignore
       const angle = Number(document.getElementById('rotation-angle')?.value);
-      jsCssAnimations.rotate('.rotation-area', { angle: angle });
+      jsCssAnimations.rotate('.rotation-area', {
+        angle: angle,
+      });
     }
   },
   complete: () => {
-    jsCssAnimations.rotate('.rotation-area', { angle: '0deg', delay: '1s' });
+    jsCssAnimations.rotate('.rotation-area', {
+      angle: '0deg',
+      delay: '1s',
+    });
   },
 });
 
-jsCssAnimations.show.fade('#anchor img', {
-  iteration: 10,
+jsCssAnimations.pulse('#anchor img', {
+  transfOrigin: 'bottom',
+});
+
+jsCssAnimations.rotationLoop('#anchor2 img', {
+  angle: 180,
   duration: '1s',
-  direction: 'alternate',
+  transfOrigin: 'bottom right',
 });