move.gl 0.0.1 → 0.0.2

package/scss/mixins/animations/_hinge.scss

@@ -1,119 +0,0 @@
-// ============================================================================
-// 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/_jello.scss

@@ -1,129 +0,0 @@
-// ============================================================================
-// 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

@@ -1,163 +0,0 @@
-// ============================================================================
-// 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); }
-    }
-}

package/scss/mixins/animations/_lightspeed.scss

@@ -1,130 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Lightspeed 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 lightSpeedIn {
-//     from {
-//       -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-//       transform: translate3d(100%, 0, 0) skewX(-30deg);
-//       opacity: 0;
-//     }
-  
-//     60% {
-//       -webkit-transform: skewX(20deg);
-//       transform: skewX(20deg);
-//       opacity: 1;
-//     }
-  
-//     80% {
-//       -webkit-transform: skewX(-5deg);
-//       transform: skewX(-5deg);
-//       opacity: 1;
-//     }
-  
-//     100% {
-//       -webkit-transform: none;
-//       transform: none;
-//       opacity: 1;
-//     }
-//   }
-  
-//   @keyframes lightSpeedIn {
-//     from {
-//       -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-//       transform: translate3d(100%, 0, 0) skewX(-30deg);
-//       opacity: 0;
-//     }
-  
-//     60% {
-//       -webkit-transform: skewX(20deg);
-//       transform: skewX(20deg);
-//       opacity: 1;
-//     }
-  
-//     80% {
-//       -webkit-transform: skewX(-5deg);
-//       transform: skewX(-5deg);
-//       opacity: 1;
-//     }
-  
-//     100% {
-//       -webkit-transform: none;
-//       transform: none;
-//       opacity: 1;
-//     }
-//   }
-  
-//   .lightSpeedIn {
-//     -webkit-animation-name: lightSpeedIn;
-//     animation-name: lightSpeedIn;
-//     -webkit-animation-timing-function: ease-out;
-//     animation-timing-function: ease-out;
-//   }
-  
-//   @-webkit-keyframes lightSpeedOut {
-//     from {
-//       opacity: 1;
-//     }
-  
-//     100% {
-//       -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-//       transform: translate3d(100%, 0, 0) skewX(30deg);
-//       opacity: 0;
-//     }
-//   }
-  
-//   @keyframes lightSpeedOut {
-//     from {
-//       opacity: 1;
-//     }
-  
-//     100% {
-//       -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-//       transform: translate3d(100%, 0, 0) skewX(30deg);
-//       opacity: 0;
-//     }
-//   }
-  
-//   .lightSpeedOut {
-//     -webkit-animation-name: lightSpeedOut;
-//     animation-name: lightSpeedOut;
-//     -webkit-animation-timing-function: ease-in;
-//     animation-timing-function: ease-in;
-//   }
-  

package/scss/mixins/animations/_pop.scss

@@ -1,150 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Pop 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
-// ============================================================================
-
-
-///
-/// Pop Animation
-/// Creates a pop animation where the element scales up and then back down.
-/// @name animate_pop
-/// @param {Number} $scale [1.2] - The scale factor for the pop effect.
-/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
-///
-@mixin animate_pop(
-    $scale: 1.2, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out
-) {
-    @include animate_base(
-        animate_pop,
-        $duration,
-        $timing_function,
-        1,
-    );
-    @keyframes animate_pop {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale($scale); }
-    }
-}
-
-
-// Rapid Pop Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Rapid Pop Animation
-/// Creates a rapid pop animation with a quick scaling effect.
-/// @name animate_pop_fast
-/// @param {Number} $scale [1.2] - The scale factor for the pop effect.
-/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
-///
-@mixin animate_pop_fast(
-    $scale: 1.2, 
-    $duration: $animate_base_duration_fast,
-    $timing_function: ease-in-out
-) {
-    @include animate_base(
-        animate_pop_fast,
-        $duration,
-        $timing_function,
-        1,
-    );
-    @keyframes animate_pop_fast {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale($scale); }
-    }
-}
-
-
-// Gentle Pop Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Gentle Pop Animation
-/// Creates a gentler pop animation with a slower scaling effect.
-/// @name animate_pop_slow
-/// @param {Number} $scale [1.1] - The scale factor for the pop effect.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pop animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
-///
-@mixin animate_pop_slow(
-    $scale: 1.1, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out
-) {
-    @include animate_base(
-        animate_pop_slow,
-        $duration,
-        $timing_function,
-        1,
-);
-    @keyframes animate_pop_slow {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale($scale); }
-    }
-}
-
-
-// Pop with Rotation
-// ----------------------------------------------------------------------------
-
-///
-/// Pop with Rotation
-/// Creates a pop animation combined with a rotation effect.
-/// @name animate_pop_rotate
-/// @param {Number} $scale [1.2] - The scale factor for the pop effect.
-/// @param {Number|String} $rotation_angle [10deg] - The rotation angle during the pop effect.
-/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
-///
-@mixin animate_pop_rotate(
-    $scale: 1.2, 
-    $rotation_angle: 10deg, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out
-) {
-    @include animate_base(
-        animate_pop_rotate,
-        $duration,
-        $timing_function,
-        1,
-    );
-    @keyframes animate_pop_rotate {
-        0%, 100% { transform: scale(1) rotate(0); }
-        50% { transform: scale($scale) rotate($rotation_angle); }
-    }
-}