move.gl 0.0.1

package/scss/mixins/animations/_heartbeat.scss

@@ -0,0 +1,175 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Heartbeat Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Heartbeat Animation
+/// Creates a heartbeat animation where the element scales up and down.
+/// 
+/// @name animate_heartbeat
+/// @param {Number} $scale_min [0.9] - The minimum scale of the heartbeat.
+/// @param {Number} $scale_max [1.1] - The maximum scale of the heartbeat.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the heartbeat animation.
+/// @param {String} $timing_function [linear] - The timing function for the heartbeat animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_heartbeat(
+    $scale_min: 0.9, 
+    $scale_max: 1.1, 
+    $duration: $animate_base_duration, 
+    $timing_function: linear, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_heartbeat,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_heartbeat {
+        0%, 100% { transform: scale(1); }
+        25% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+        75% { transform: scale($scale_min); }
+    }
+}
+
+
+
+///
+/// Rapid Heartbeat Animation
+/// Creates a rapid heartbeat animation with faster scaling transitions.
+/// 
+/// @name animate_heartbeat_fast
+/// @param {Number} $scale_min [0.85] - The minimum scale of the heartbeat.
+/// @param {Number} $scale_max [1.15] - The maximum scale of the heartbeat.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the heartbeat animation.
+/// @param {String} $timing_function [linear] - The timing function for the heartbeat animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_heartbeat_fast(
+    $scale_min: 0.85, 
+    $scale_max: 1.15, 
+    $duration: $animate_base_duration_fast, 
+    $timing_function: linear, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_heartbeat_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_heartbeat_fast {
+        0%, 100% { transform: scale(1); }
+        14%, 86% { transform: scale($scale_min); }
+        28%, 72% { transform: scale($scale_max); }
+        42%, 58% { transform: scale($scale_min); }
+    }
+}
+
+
+///
+/// Slow Heartbeat Animation
+/// Creates a slow heartbeat animation with more gradual scaling transitions.
+/// @name animate_heartbeat_slow
+/// @param {Number} $scale_min [0.95] - The minimum scale of the heartbeat.
+/// @param {Number} $scale_max [1.05] - The maximum scale of the heartbeat.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the heartbeat animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the heartbeat animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_heartbeat_slow(
+    $scale_min: 0.95, 
+    $scale_max: 1.05, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_heartbeat_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_heartbeat_slow {
+        0%, 100% { transform: scale(1); }
+        25% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+        75% { transform: scale($scale_min); }
+    }
+}
+
+
+
+///
+/// Heartbeat with Color Change
+/// Creates a heartbeat animation that includes a color transition.
+/// @name animate_heartbeat_color
+/// @param {Number} $scale_min [0.9] - The minimum scale of the heartbeat.
+/// @param {Number} $scale_max [1.1] - The maximum scale of the heartbeat.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the heartbeat animation.
+/// @param {String} $timing_function [linear] - The timing function for the heartbeat animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the element.
+/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the element.
+///
+@mixin animate_heartbeat_color(
+    $scale_min: 0.9, 
+    $scale_max: 1.1, 
+    $duration: $animate_base_duration, 
+    $timing_function: linear, 
+    $iteration_count: $animate_base_iteration_count,
+    $color_start: $animate_base_color_start, 
+    $color_end: $animate_base_color_end,
+) {
+    @include animate_base(
+        animate_heartbeat_color,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_heartbeat_color {
+        0%, 100% { 
+            transform: scale(1); 
+            color: $color_start;
+        }
+        50% { 
+            transform: scale($scale_max); 
+            color: $color_end;
+        }
+    }
+}

package/scss/mixins/animations/_hinge.scss

@@ -0,0 +1,119 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Hinge Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+
+
+// .animated.hinge {
+//     -webkit-animation-duration: 2s;
+//     animation-duration: 2s;
+//   }
+  
+  
+//   @-webkit-keyframes hinge {
+//     0% {
+//       -webkit-transform-origin: top left;
+//       transform-origin: top left;
+//       -webkit-animation-timing-function: ease-in-out;
+//       animation-timing-function: ease-in-out;
+//     }
+  
+//     20%, 60% {
+//       -webkit-transform: rotate3d(0, 0, 1, 80deg);
+//       transform: rotate3d(0, 0, 1, 80deg);
+//       -webkit-transform-origin: top left;
+//       transform-origin: top left;
+//       -webkit-animation-timing-function: ease-in-out;
+//       animation-timing-function: ease-in-out;
+//     }
+  
+//     40%, 80% {
+//       -webkit-transform: rotate3d(0, 0, 1, 60deg);
+//       transform: rotate3d(0, 0, 1, 60deg);
+//       -webkit-transform-origin: top left;
+//       transform-origin: top left;
+//       -webkit-animation-timing-function: ease-in-out;
+//       animation-timing-function: ease-in-out;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform: translate3d(0, 700px, 0);
+//       transform: translate3d(0, 700px, 0);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes hinge {
+//     0% {
+//       -webkit-transform-origin: top left;
+//       transform-origin: top left;
+//       -webkit-animation-timing-function: ease-in-out;
+//       animation-timing-function: ease-in-out;
+//     }
+  
+//     20%, 60% {
+//       -webkit-transform: rotate3d(0, 0, 1, 80deg);
+//       transform: rotate3d(0, 0, 1, 80deg);
+//       -webkit-transform-origin: top left;
+//       transform-origin: top left;
+//       -webkit-animation-timing-function: ease-in-out;
+//       animation-timing-function: ease-in-out;
+//     }
+  
+//     40%, 80% {
+//       -webkit-transform: rotate3d(0, 0, 1, 60deg);
+//       transform: rotate3d(0, 0, 1, 60deg);
+//       -webkit-transform-origin: top left;
+//       transform-origin: top left;
+//       -webkit-animation-timing-function: ease-in-out;
+//       animation-timing-function: ease-in-out;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform: translate3d(0, 700px, 0);
+//       transform: translate3d(0, 700px, 0);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .hinge {
+//     -webkit-animation-name: hinge;
+//     animation-name: hinge;
+//   }
+  

package/scss/mixins/animations/_index.scss

@@ -0,0 +1,37 @@
+// ============================================================================
+// StyleScape | Animations | Index
+// ============================================================================
+
+@forward "base";
+@forward "beat";
+@forward "blink";
+@forward "bounce";
+@forward "elastic";
+@forward "fade";
+@forward "flash";
+@forward "flip";
+@forward "float";
+@forward "glow";
+@forward "heartbeat";
+@forward "hinge";
+@forward "jello";
+@forward "jiggle";
+@forward "lightspeed";
+@forward "nod";
+@forward "pop";
+@forward "pulse";
+@forward "ripple";
+@forward "roll";
+@forward "rotate";
+@forward "rubber";
+@forward "scale";
+@forward "shake";
+@forward "slide";
+@forward "spin";
+@forward "sway";
+@forward "swing";
+@forward "tada";
+@forward "twist";
+@forward "wave";
+@forward "wobble";
+@forward "zoom";

package/scss/mixins/animations/_jello.scss

@@ -0,0 +1,129 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Jello Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+
+// @-webkit-keyframes jello {
+//     from, 11.1%, 100% {
+//       -webkit-transform: none;
+//       transform: none;
+//     }
+  
+//     22.2% {
+//       -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+//       transform: skewX(-12.5deg) skewY(-12.5deg);
+//     }
+  
+//     33.3% {
+//       -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+//       transform: skewX(6.25deg) skewY(6.25deg);
+//     }
+  
+//     44.4% {
+//       -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+//       transform: skewX(-3.125deg) skewY(-3.125deg);
+//     }
+  
+//     55.5% {
+//       -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+//       transform: skewX(1.5625deg) skewY(1.5625deg);
+//     }
+  
+//     66.6% {
+//       -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+//       transform: skewX(-0.78125deg) skewY(-0.78125deg);
+//     }
+  
+//     77.7% {
+//       -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+//       transform: skewX(0.390625deg) skewY(0.390625deg);
+//     }
+  
+//     88.8% {
+//       -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+//       transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+//     }
+//   }
+  
+//   @keyframes jello {
+//     from, 11.1%, 100% {
+//       -webkit-transform: none;
+//       transform: none;
+//     }
+  
+//     22.2% {
+//       -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+//       transform: skewX(-12.5deg) skewY(-12.5deg);
+//     }
+  
+//     33.3% {
+//       -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+//       transform: skewX(6.25deg) skewY(6.25deg);
+//     }
+  
+//     44.4% {
+//       -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+//       transform: skewX(-3.125deg) skewY(-3.125deg);
+//     }
+  
+//     55.5% {
+//       -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+//       transform: skewX(1.5625deg) skewY(1.5625deg);
+//     }
+  
+//     66.6% {
+//       -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+//       transform: skewX(-0.78125deg) skewY(-0.78125deg);
+//     }
+  
+//     77.7% {
+//       -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+//       transform: skewX(0.390625deg) skewY(0.390625deg);
+//     }
+  
+//     88.8% {
+//       -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+//       transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+//     }
+//   }
+  
+//   .jello {
+//     -webkit-animation-name: jello;
+//     animation-name: jello;
+//     -webkit-transform-origin: center;
+//     transform-origin: center;
+//   }

package/scss/mixins/animations/_jiggle.scss

@@ -0,0 +1,163 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Jiggle Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Jiggle Animation
+/// Creates a horizontal jiggle animation where the element moves left and
+/// right.
+/// 
+/// @name animate_jiggle
+/// @param {Number|String} $amplitude [5px] - The distance the element moves during the jiggle.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the jiggle animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_jiggle(
+    $amplitude: 5px,
+    $duration: $animate_base_duration_fast, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle,
+        $duration, 
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_jiggle {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-$amplitude); }
+        50% { transform: translateX($amplitude); }
+        75% { transform: translateX(-$amplitude); }
+    }
+}
+
+
+
+///
+/// Vertical Jiggle Animation
+/// Creates a vertical jiggle animation where the element moves up and down.
+/// 
+/// @name animate_jiggle_vertical
+/// @param {Number|String} $amplitude [5px] - The distance the element moves during the jiggle.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the jiggle animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_jiggle_vertical(
+    $amplitude: 5px,
+    $duration: $animate_base_duration_fast, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle_vertical,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_jiggle_vertical {
+        0%, 100% { transform: translateY(0); }
+        25% { transform: translateY(-$amplitude); }
+        50% { transform: translateY($amplitude); }
+        75% { transform: translateY(-$amplitude); }
+    }
+}
+
+
+
+///
+/// Multi-Directional Jiggle Animation
+/// Creates a jiggle animation where the element moves in both X and Y
+/// directions.
+/// 
+/// @name animate_jiggle_multi
+/// @param {Number|String} $amplitude [5px] - The distance the element moves during the jiggle.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the jiggle animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_jiggle_multi(
+    $amplitude: 5px,
+    $duration: $animate_base_duration_fast, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle_multi,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_jiggle_multi {
+        0%, 100% { transform: translate(0, 0); }
+        25% { transform: translate(-$amplitude, $amplitude); }
+        50% { transform: translate($amplitude, -$amplitude); }
+        75% { transform: translate(-$amplitude, $amplitude); }
+    }
+}
+
+
+///
+/// Gentle Jiggle Animation
+/// Creates a gentler jiggle animation with slower transitions.
+/// 
+/// @name animate_jiggle_slow
+/// @param {Number|String} $amplitude [3px] - The distance the element moves during the jiggle.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the jiggle animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the jiggle animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_jiggle_slow(
+    $amplitude: 3px,
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_jiggle_slow {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-$amplitude); }
+        50% { transform: translateX($amplitude); }
+        75% { transform: translateX(-$amplitude); }
+    }
+}