move.gl 0.0.1

package/scss/mixins/animations/_rotate.scss

@@ -0,0 +1,428 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Rotate 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 rotateIn {
+//     from {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       -webkit-transform: rotate3d(0, 0, 1, -200deg);
+//       transform: rotate3d(0, 0, 1, -200deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   @keyframes rotateIn {
+//     from {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       -webkit-transform: rotate3d(0, 0, 1, -200deg);
+//       transform: rotate3d(0, 0, 1, -200deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   .rotateIn {
+//     -webkit-animation-name: rotateIn;
+//     animation-name: rotateIn;
+//   }
+  
+//   @-webkit-keyframes rotateInDownLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -45deg);
+//       transform: rotate3d(0, 0, 1, -45deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   @keyframes rotateInDownLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -45deg);
+//       transform: rotate3d(0, 0, 1, -45deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   .rotateInDownLeft {
+//     -webkit-animation-name: rotateInDownLeft;
+//     animation-name: rotateInDownLeft;
+//   }
+  
+//   @-webkit-keyframes rotateInDownRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 45deg);
+//       transform: rotate3d(0, 0, 1, 45deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   @keyframes rotateInDownRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 45deg);
+//       transform: rotate3d(0, 0, 1, 45deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   .rotateInDownRight {
+//     -webkit-animation-name: rotateInDownRight;
+//     animation-name: rotateInDownRight;
+//   }
+  
+//   @-webkit-keyframes rotateInUpLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 45deg);
+//       transform: rotate3d(0, 0, 1, 45deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   @keyframes rotateInUpLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 45deg);
+//       transform: rotate3d(0, 0, 1, 45deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   .rotateInUpLeft {
+//     -webkit-animation-name: rotateInUpLeft;
+//     animation-name: rotateInUpLeft;
+//   }
+  
+//   @-webkit-keyframes rotateInUpRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -90deg);
+//       transform: rotate3d(0, 0, 1, -90deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   @keyframes rotateInUpRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -90deg);
+//       transform: rotate3d(0, 0, 1, -90deg);
+//       opacity: 0;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   .rotateInUpRight {
+//     -webkit-animation-name: rotateInUpRight;
+//     animation-name: rotateInUpRight;
+//   }
+  
+//   @-webkit-keyframes rotateOut {
+//     from {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       -webkit-transform: rotate3d(0, 0, 1, 200deg);
+//       transform: rotate3d(0, 0, 1, 200deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes rotateOut {
+//     from {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: center;
+//       transform-origin: center;
+//       -webkit-transform: rotate3d(0, 0, 1, 200deg);
+//       transform: rotate3d(0, 0, 1, 200deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .rotateOut {
+//     -webkit-animation-name: rotateOut;
+//     animation-name: rotateOut;
+//   }
+  
+//   @-webkit-keyframes rotateOutDownLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 45deg);
+//       transform: rotate3d(0, 0, 1, 45deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes rotateOutDownLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 45deg);
+//       transform: rotate3d(0, 0, 1, 45deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .rotateOutDownLeft {
+//     -webkit-animation-name: rotateOutDownLeft;
+//     animation-name: rotateOutDownLeft;
+//   }
+  
+//   @-webkit-keyframes rotateOutDownRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -45deg);
+//       transform: rotate3d(0, 0, 1, -45deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes rotateOutDownRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -45deg);
+//       transform: rotate3d(0, 0, 1, -45deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .rotateOutDownRight {
+//     -webkit-animation-name: rotateOutDownRight;
+//     animation-name: rotateOutDownRight;
+//   }
+  
+//   @-webkit-keyframes rotateOutUpLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -45deg);
+//       transform: rotate3d(0, 0, 1, -45deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes rotateOutUpLeft {
+//     from {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: left bottom;
+//       transform-origin: left bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, -45deg);
+//       transform: rotate3d(0, 0, 1, -45deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .rotateOutUpLeft {
+//     -webkit-animation-name: rotateOutUpLeft;
+//     animation-name: rotateOutUpLeft;
+//   }
+  
+//   @-webkit-keyframes rotateOutUpRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 90deg);
+//       transform: rotate3d(0, 0, 1, 90deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes rotateOutUpRight {
+//     from {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform-origin: right bottom;
+//       transform-origin: right bottom;
+//       -webkit-transform: rotate3d(0, 0, 1, 90deg);
+//       transform: rotate3d(0, 0, 1, 90deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .rotateOutUpRight {
+//     -webkit-animation-name: rotateOutUpRight;
+//     animation-name: rotateOutUpRight;
+//   }

package/scss/mixins/animations/_rubber.scss

@@ -0,0 +1,116 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Rubber 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 rubberBand {
+//     from {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+  
+//     30% {
+//       -webkit-transform: scale3d(1.25, 0.75, 1);
+//       transform: scale3d(1.25, 0.75, 1);
+//     }
+  
+//     40% {
+//       -webkit-transform: scale3d(0.75, 1.25, 1);
+//       transform: scale3d(0.75, 1.25, 1);
+//     }
+  
+//     50% {
+//       -webkit-transform: scale3d(1.15, 0.85, 1);
+//       transform: scale3d(1.15, 0.85, 1);
+//     }
+  
+//     65% {
+//       -webkit-transform: scale3d(.95, 1.05, 1);
+//       transform: scale3d(.95, 1.05, 1);
+//     }
+  
+//     75% {
+//       -webkit-transform: scale3d(1.05, .95, 1);
+//       transform: scale3d(1.05, .95, 1);
+//     }
+  
+//     100% {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+//   }
+  
+//   @keyframes rubberBand {
+//     from {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+  
+//     30% {
+//       -webkit-transform: scale3d(1.25, 0.75, 1);
+//       transform: scale3d(1.25, 0.75, 1);
+//     }
+  
+//     40% {
+//       -webkit-transform: scale3d(0.75, 1.25, 1);
+//       transform: scale3d(0.75, 1.25, 1);
+//     }
+  
+//     50% {
+//       -webkit-transform: scale3d(1.15, 0.85, 1);
+//       transform: scale3d(1.15, 0.85, 1);
+//     }
+  
+//     65% {
+//       -webkit-transform: scale3d(.95, 1.05, 1);
+//       transform: scale3d(.95, 1.05, 1);
+//     }
+  
+//     75% {
+//       -webkit-transform: scale3d(1.05, .95, 1);
+//       transform: scale3d(1.05, .95, 1);
+//     }
+  
+//     100% {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+//   }
+  
+//   .rubberBand {
+//     -webkit-animation-name: rubberBand;
+//     animation-name: rubberBand;
+//   }

package/scss/mixins/animations/_scale.scss

@@ -0,0 +1,113 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Scale 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
+// ============================================================================
+
+
+///
+/// Expand Animation
+/// Creates an expand animation where the element scales up and down.
+/// @name animate_scale_expand
+/// @param {Number|String} $scale_start [1] - The initial scale of the element.
+/// @param {Number|String} $scale_end [1.2] - The scale of the element at its maximum size.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the expand animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the expand animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_scale_expand(
+    $scale_start: 1, 
+    $scale_end: 1.2, 
+    $duration: $animate_base_duration,
+    $timing_function: ease-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_expand,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_scale_expand {
+        0%, 100% { transform: scale($scale_start); }
+        50% { transform: scale($scale_end); }
+    }
+}
+
+
+//   // Scale transition
+// .scale-transition {
+//   &.scale-out {
+//     transform: scale(0);
+//     transition: transform .2s !important;
+//   }
+
+//   &.scale-in {
+//     transform: scale(1);
+//   }
+
+//   transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+// }
+
+
+// Expand and Shrink Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Expand and Shrink Animation
+/// Creates an animation where the element alternates between expanding and shrinking.
+/// @name animate_scale_shrink
+/// @param {Number|String} $scale_min [0.8] - The minimum scale of the element during the animation.
+/// @param {Number|String} $scale_max [1.2] - The maximum scale of the element during the animation.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the expand and shrink animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the expand and shrink animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_scale_shrink(
+    $scale_min: 0.8, 
+    $scale_max: 1.2, 
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_shrink,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_scale_shrink {
+        0%, 100% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+    }
+}