feat: rotating_entrances, rotating_exits

apps/docs/src/app/core/sidebar/sidebar.component.ts

@@ -165,6 +165,26 @@ export const SIDEBAR_ROUTES = [
           animateCSSLink('lightSpeedOutRight'),
         ],
       },
+      {
+        name: 'Rotating Entrances',
+        children: [
+          animateCSSLink('rotateIn'),
+          animateCSSLink('rotateInDownLeft'),
+          animateCSSLink('rotateInDownRight'),
+          animateCSSLink('rotateInUpLeft'),
+          animateCSSLink('rotateInUpRight'),
+        ],
+      },
+      {
+        name: 'Rotating Exits',
+        children: [
+          animateCSSLink('rotateOut'),
+          animateCSSLink('rotateOutDownLeft'),
+          animateCSSLink('rotateOutDownRight'),
+          animateCSSLink('rotateOutUpLeft'),
+          animateCSSLink('rotateOutUpRight'),
+        ],
+      },
     ],
   },
 ] as SidebarRoot[];

apps/docs/src/app/motion-data/animate-css-data.ts

@@ -37,6 +37,16 @@ import {
   pulse,
   rollIn,
   rollOut,
+  rotateIn,
+  rotateInDownLeft,
+  rotateInDownRight,
+  rotateInUpLeft,
+  rotateInUpRight,
+  rotateOut,
+  rotateOutDownLeft,
+  rotateOutDownRight,
+  rotateOutUpLeft,
+  rotateOutUpRight,
   rubberBand,
   shakeX,
   shakeY,
@@ -216,5 +226,19 @@ export const ANIMATE_CSS_DATA: MotionGroup = {
     getAllEnters('lightspeed', 'lightSpeedInRight', lightSpeedInRight),
     getAllLeaves('lightspeed', 'lightSpeedOutLeft', lightSpeedOutLeft),
     getAllLeaves('lightspeed', 'lightSpeedOutRight', lightSpeedOutRight),
+
+    /** Rotating Entrances */
+    getAllEnters('rotating_entrances', 'rotateIn', rotateIn),
+    getAllEnters('rotating_entrances', 'rotateInDownLeft', rotateInDownLeft),
+    getAllEnters('rotating_entrances', 'rotateInDownRight', rotateInDownRight),
+    getAllEnters('rotating_entrances', 'rotateInUpLeft', rotateInUpLeft),
+    getAllEnters('rotating_entrances', 'rotateInUpRight', rotateInUpRight),
+
+    /** Rotating Exits */
+    getAllLeaves('rotating_exits', 'rotateOut', rotateOut),
+    getAllLeaves('rotating_exits', 'rotateOutDownLeft', rotateOutDownLeft),
+    getAllLeaves('rotating_exits', 'rotateOutDownRight', rotateOutDownRight),
+    getAllLeaves('rotating_exits', 'rotateOutUpLeft', rotateOutUpLeft),
+    getAllLeaves('rotating_exits', 'rotateOutUpRight', rotateOutUpRight),
   ],
 };

libs/motion/animatecss/src/index.ts

@@ -85,3 +85,17 @@ export * from './lib/lightspeed/light-speed-in-left';
 export * from './lib/lightspeed/light-speed-in-right';
 export * from './lib/lightspeed/light-speed-out-left';
 export * from './lib/lightspeed/light-speed-out-right';
+
+/** Rotating Entrances */
+export * from './lib/rotating_entrances/rotate-in';
+export * from './lib/rotating_entrances/rotate-in-down-left';
+export * from './lib/rotating_entrances/rotate-in-down-right';
+export * from './lib/rotating_entrances/rotate-in-up-left';
+export * from './lib/rotating_entrances/rotate-in-up-right';
+
+/** Rotating Exits */
+export * from './lib/rotating_exits/rotate-out';
+export * from './lib/rotating_exits/rotate-out-down-left';
+export * from './lib/rotating_exits/rotate-out-down-right';
+export * from './lib/rotating_exits/rotate-out-up-left';
+export * from './lib/rotating_exits/rotate-out-up-right';

libs/motion/animatecss/src/lib/rotating_entrances/rotate-in-down-left.ts

@@ -0,0 +1,72 @@
+/**
+ * ref: https://github.com/animate-css/animate.css/blob/main/source/rotating_entrances/rotateInDownLeft.css
+ */
+import { keyframes, style } from '@angular/animations';
+import {
+  createDefaults,
+  createMotionFromAnimate,
+  createOnEnter,
+  createOnIncr,
+  MotionOptions,
+  setDefaults,
+} from '@ngverse/motion/core';
+import { getAnimatecssDefaults } from '../common/animate-css-defaults';
+
+type rotateInDownLeftMotionOptions = MotionOptions;
+
+const defaults = createDefaults<rotateInDownLeftMotionOptions>();
+
+const name = `rotateInDownLeft`;
+
+/**
+ * rotateInDownLeft animation
+ */
+export const rotateInDownLeft =
+  createMotionFromAnimate<rotateInDownLeftMotionOptions>(
+    keyframes([
+      style({
+        'transform-origin': 'left bottom',
+        visibility: 'visible',
+        opacity: 0,
+        transform: 'rotate3d(0, 0, 1, -45deg)',
+        easing: 'ease',
+        offset: 0,
+      }),
+      style({
+        opacity: 1,
+        transform: 'rotate3d(0, 0, 1, 0deg)',
+        easing: 'ease',
+        offset: 1,
+      }),
+    ]),
+    defaults,
+    getAnimatecssDefaults()
+  );
+
+/**
+ * sets default values for the `rotateInDownLeft` animation
+ */
+export const setRotateInDownLeftDefaults =
+  setDefaults<rotateInDownLeftMotionOptions>(defaults);
+
+/**
+ * rotateInDownLeft animation on :enter
+ * @remarks triggerName: `rotateInDownLeftOnEnter`
+ */
+export const rotateInDownLeftOnEnter = createOnEnter(
+  rotateInDownLeft,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);
+
+/**
+ * rotateInDownLeft animation on :incr
+ * @remarks triggerName: `rotateInDownLeftOnIncr`
+ */
+export const rotateInDownLeftOnIncr = createOnIncr(
+  rotateInDownLeft,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);

libs/motion/animatecss/src/lib/rotating_entrances/rotate-in-down-right.ts

@@ -0,0 +1,72 @@
+/**
+ * ref: https://github.com/animate-css/animate.css/blob/main/source/rotating_entrances/rotateInDownRight.css
+ */
+import { keyframes, style } from '@angular/animations';
+import {
+  createDefaults,
+  createMotionFromAnimate,
+  createOnEnter,
+  createOnIncr,
+  MotionOptions,
+  setDefaults,
+} from '@ngverse/motion/core';
+import { getAnimatecssDefaults } from '../common/animate-css-defaults';
+
+type rotateInDownRightMotionOptions = MotionOptions;
+
+const defaults = createDefaults<rotateInDownRightMotionOptions>();
+
+const name = `rotateInDownRight`;
+
+/**
+ * rotateInDownRight animation
+ */
+export const rotateInDownRight =
+  createMotionFromAnimate<rotateInDownRightMotionOptions>(
+    keyframes([
+      style({
+        'transform-origin': 'right bottom',
+        visibility: 'visible',
+        opacity: 0,
+        transform: 'rotate3d(0, 0, 1, 45deg)',
+        easing: 'ease',
+        offset: 0,
+      }),
+      style({
+        opacity: 1,
+        transform: 'rotate3d(0, 0, 1, 0deg)',
+        easing: 'ease',
+        offset: 1,
+      }),
+    ]),
+    defaults,
+    getAnimatecssDefaults()
+  );
+
+/**
+ * sets default values for the `rotateInDownRight` animation
+ */
+export const setRotateInDownRightDefaults =
+  setDefaults<rotateInDownRightMotionOptions>(defaults);
+
+/**
+ * rotateInDownRight animation on :enter
+ * @remarks triggerName: `rotateInDownRightOnEnter`
+ */
+export const rotateInDownRightOnEnter = createOnEnter(
+  rotateInDownRight,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);
+
+/**
+ * rotateInDownRight animation on :incr
+ * @remarks triggerName: `rotateInDownRightOnIncr`
+ */
+export const rotateInDownRightOnIncr = createOnIncr(
+  rotateInDownRight,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);

libs/motion/animatecss/src/lib/rotating_entrances/rotate-in-up-left.ts

@@ -0,0 +1,72 @@
+/**
+ * ref: https://github.com/animate-css/animate.css/blob/main/source/rotating_entrances/rotateInUpLeft.css
+ */
+import { keyframes, style } from '@angular/animations';
+import {
+  createDefaults,
+  createMotionFromAnimate,
+  createOnEnter,
+  createOnIncr,
+  MotionOptions,
+  setDefaults,
+} from '@ngverse/motion/core';
+import { getAnimatecssDefaults } from '../common/animate-css-defaults';
+
+type rotateInUpLeftMotionOptions = MotionOptions;
+
+const defaults = createDefaults<rotateInUpLeftMotionOptions>();
+
+const name = `rotateInUpLeft`;
+
+/**
+ * rotateInUpLeft animation
+ */
+export const rotateInUpLeft =
+  createMotionFromAnimate<rotateInUpLeftMotionOptions>(
+    keyframes([
+      style({
+        'transform-origin': 'left bottom',
+        visibility: 'visible',
+        opacity: 0,
+        transform: 'rotate3d(0, 0, 1, 45deg)',
+        easing: 'ease',
+        offset: 0,
+      }),
+      style({
+        opacity: 1,
+        transform: 'rotate3d(0, 0, 1, 0deg)',
+        easing: 'ease',
+        offset: 1,
+      }),
+    ]),
+    defaults,
+    getAnimatecssDefaults()
+  );
+
+/**
+ * sets default values for the `rotateInUpLeft` animation
+ */
+export const setRotateInUpLeftDefaults =
+  setDefaults<rotateInUpLeftMotionOptions>(defaults);
+
+/**
+ * rotateInUpLeft animation on :enter
+ * @remarks triggerName: `rotateInUpLeftOnEnter`
+ */
+export const rotateInUpLeftOnEnter = createOnEnter(
+  rotateInUpLeft,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);
+
+/**
+ * rotateInUpLeft animation on :incr
+ * @remarks triggerName: `rotateInUpLeftOnIncr`
+ */
+export const rotateInUpLeftOnIncr = createOnIncr(
+  rotateInUpLeft,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);

libs/motion/animatecss/src/lib/rotating_entrances/rotate-in-up-right.ts

@@ -0,0 +1,72 @@
+/**
+ * ref: https://github.com/animate-css/animate.css/blob/main/source/rotating_entrances/rotateInUpRight.css
+ */
+import { keyframes, style } from '@angular/animations';
+import {
+  createDefaults,
+  createMotionFromAnimate,
+  createOnEnter,
+  createOnIncr,
+  MotionOptions,
+  setDefaults,
+} from '@ngverse/motion/core';
+import { getAnimatecssDefaults } from '../common/animate-css-defaults';
+
+type rotateInUpRightMotionOptions = MotionOptions;
+
+const defaults = createDefaults<rotateInUpRightMotionOptions>();
+
+const name = `rotateInUpRight`;
+
+/**
+ * rotateInUpRight animation
+ */
+export const rotateInUpRight =
+  createMotionFromAnimate<rotateInUpRightMotionOptions>(
+    keyframes([
+      style({
+        'transform-origin': 'right bottom',
+        visibility: 'visible',
+        opacity: 0,
+        transform: 'rotate3d(0, 0, 1, -90deg)',
+        easing: 'ease',
+        offset: 0,
+      }),
+      style({
+        opacity: 1,
+        transform: 'translate3d(0, 0, 0)',
+        easing: 'ease',
+        offset: 1,
+      }),
+    ]),
+    defaults,
+    getAnimatecssDefaults()
+  );
+
+/**
+ * sets default values for the `rotateInUpRight` animation
+ */
+export const setRotateInUpRightDefaults =
+  setDefaults<rotateInUpRightMotionOptions>(defaults);
+
+/**
+ * rotateInUpRight animation on :enter
+ * @remarks triggerName: `rotateInUpRightOnEnter`
+ */
+export const rotateInUpRightOnEnter = createOnEnter(
+  rotateInUpRight,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);
+
+/**
+ * rotateInUpRight animation on :incr
+ * @remarks triggerName: `rotateInUpRightOnIncr`
+ */
+export const rotateInUpRightOnIncr = createOnIncr(
+  rotateInUpRight,
+  name,
+  defaults,
+  getAnimatecssDefaults()
+);