move.gl 0.0.1 → 0.0.2

package/scss/mixins/animations/_pulse.scss

@@ -1,213 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Pulse 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
-// ============================================================================
-
-
-///
-/// Pulse Animation
-/// Creates a pulsing animation where the element scales between the minimum
-/// and maximum scale values.
-/// 
-/// @name animate_pulse
-/// @param {Number} $scale_min [1] - The minimum scale of the pulse.
-/// @param {Number} $scale_max [1.1] - The maximum scale of the pulse.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pulse animation.
-/// @param {String} $timing_function [linear] - The timing function for the pulse animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_pulse(
-    $scale_min: 1, 
-    $scale_max: 1.1, 
-    $duration: $animate_base_duration, 
-    $timing_function: linear, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_pulse,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @keyframes animate_pulse {
-        0%, 100% { transform: scale($scale_min); }
-        50% { transform: scale($scale_max); }
-    }
-}
-
-
-
-// Slow Pulse Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Slow Pulse Animation
-/// Creates a slower pulsing animation with more subtle scale changes.
-/// @name animate_pulse_slow
-/// @param {Number} $scale_min [0.95] - The minimum scale of the pulse.
-/// @param {Number} $scale_max [1.05] - The maximum scale of the pulse.
-/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the pulse animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_pulse_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_pulse_slow,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @keyframes animate_pulse_slow {
-        0%, 100% { transform: scale($scale_min); }
-        50% { transform: scale($scale_max); }
-    }
-}
-
-
-
-// Rapid Pulse Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Rapid Pulse Animation
-/// Creates a rapid pulsing animation with more pronounced scale changes.
-/// @name animate_pulse_fast
-/// @param {Number} $scale_min [0.9] - The minimum scale of the pulse.
-/// @param {Number} $scale_max [1.2] - The maximum scale of the pulse.
-/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pulse animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_pulse_fast(
-    $scale_min: 0.9, 
-    $scale_max: 1.2, 
-    $duration: $animate_base_duration_fast,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_pulse_fast,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @keyframes animate_pulse_fast {
-        0%, 100% { transform: scale($scale_min); }
-        50% { transform: scale($scale_max); }
-    }
-}
-
-
-
-// Color Pulse Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Color Pulse Animation
-/// Creates a pulsing animation where the background color of the element transitions between two colors.
-/// @name animate_pulse_color
-/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the pulse.
-/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the pulse.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pulse animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_pulse_color(
-    $color_start: $animate_base_color_start, 
-    $color_end: $animate_base_color_end, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_pulse_color,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @keyframes animate_pulse_color {
-        0%, 100% { background-color: $color_start; }
-        50% { background-color: $color_end; }
-    }
-}
-
-
-
-// originally authored by Nick Pettit - https://github.com/nickpettit/glide
-
-// @-webkit-keyframes pulse {
-//     from {
-//       -webkit-transform: scale3d(1, 1, 1);
-//       transform: scale3d(1, 1, 1);
-//     }
-  
-//     50% {
-//       -webkit-transform: scale3d(1.05, 1.05, 1.05);
-//       transform: scale3d(1.05, 1.05, 1.05);
-//     }
-  
-//     100% {
-//       -webkit-transform: scale3d(1, 1, 1);
-//       transform: scale3d(1, 1, 1);
-//     }
-//   }
-  
-//   @keyframes pulse {
-//     from {
-//       -webkit-transform: scale3d(1, 1, 1);
-//       transform: scale3d(1, 1, 1);
-//     }
-  
-//     50% {
-//       -webkit-transform: scale3d(1.05, 1.05, 1.05);
-//       transform: scale3d(1.05, 1.05, 1.05);
-//     }
-  
-//     100% {
-//       -webkit-transform: scale3d(1, 1, 1);
-//       transform: scale3d(1, 1, 1);
-//     }
-//   }
-  
-//   .pulse {
-//     -webkit-animation-name: pulse;
-//     animation-name: pulse;
-//   }
-  

package/scss/mixins/animations/_roll.scss

@@ -1,261 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Roll 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 "base" as *;
-
-
-// ============================================================================
-// Mixins
-// ============================================================================
-
-
-///
-/// Roll Animation
-/// Creates a rolling animation where the element translates and rotates
-/// horizontally.
-/// 
-/// @name animate_roll
-/// @param {Number|String} $translate-distance [100%] - The distance to translate the element horizontally.
-/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the roll.
-/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_roll(
-    $translate-distance: 100%, 
-    $rotation_angle: 360deg, 
-    $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_roll,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_roll {
-        0% { transform: translateX(0) rotate(0deg); }
-        100% { transform: translateX($translate-distance) rotate($rotation_angle); }
-    }
-}
-
-
-// Reverse Roll Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Reverse Roll Animation
-/// Creates a reverse rolling animation where the element translates and rotates horizontally in the opposite direction.
-/// @name animate_roll_reverse
-/// @param {Number|String} $translate-distance [-100%] - The distance to translate the element horizontally.
-/// @param {Number|String} $rotation_angle [-360deg] - The rotation angle for the reverse roll.
-/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_roll_reverse(
-    $translate-distance: -100%, 
-    $rotation_angle: -360deg, 
-    $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_roll_reverse,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_roll_reverse {
-        0% { transform: translateX(0) rotate(0deg); }
-        100% { transform: translateX($translate-distance) rotate($rotation_angle); }
-    }
-}
-
-
-// Slow Roll Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Slow Roll Animation
-/// Creates a slower rolling animation where the element translates and rotates horizontally.
-/// @name animate_roll_slow
-/// @param {Number|String} $translate-distance [100%] - The distance to translate the element horizontally.
-/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the roll.
-/// @param {Number|String} $duration [$animate_base_duration_slow/// 2] - The duration of the roll animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_roll_slow(
-    $translate-distance: 100%, 
-    $rotation_angle: 360deg, 
-    $duration: $animate_base_duration_slow * 2,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_roll_slow,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_roll_slow {
-        0% { transform: translateX(0) rotate(0deg); }
-        100% { transform: translateX($translate-distance) rotate($rotation_angle); }
-    }
-}
-
-
-
-// Vertical Roll Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Vertical Roll Animation
-/// Creates a rolling animation where the element translates and rotates vertically.
-/// @name animate_roll_vertical
-/// @param {Number|String} $translate-distance [100%] - The distance to translate the element vertically.
-/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the vertical roll.
-/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_roll_vertical(
-    $translate-distance: 100%, 
-    $rotation_angle: 360deg, 
-    $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_roll_vertical,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_roll_vertical {
-        0% { transform: translateY(0) rotate(0deg); }
-        100% { transform: translateY($translate-distance) rotate($rotation_angle); }
-    }
-}
-
-
-
-
-
-// originally authored by Nick Pettit - https://github.com/nickpettit/glide
-
-// @-webkit-keyframes rollIn {
-//     from {
-//       opacity: 0;
-//       -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-//       transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-//     }
-  
-//     100% {
-//       opacity: 1;
-//       -webkit-transform: none;
-//       transform: none;
-//     }
-//   }
-  
-//   @keyframes rollIn {
-//     from {
-//       opacity: 0;
-//       -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-//       transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-//     }
-  
-//     100% {
-//       opacity: 1;
-//       -webkit-transform: none;
-//       transform: none;
-//     }
-//   }
-  
-//   .rollIn {
-//     -webkit-animation-name: rollIn;
-//     animation-name: rollIn;
-//   }
-  
-//   /* originally authored by Nick Pettit - https://github.com/nickpettit/glide///
-  
-//   @-webkit-keyframes rollOut {
-//     from {
-//       opacity: 1;
-//     }
-  
-//     100% {
-//       opacity: 0;
-//       -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-//       transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-//     }
-//   }
-  
-//   @keyframes rollOut {
-//     from {
-//       opacity: 1;
-//     }
-  
-//     100% {
-//       opacity: 0;
-//       -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-//       transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-//     }
-//   }
-  
-//   .rollOut {
-//     -webkit-animation-name: rollOut;
-//     animation-name: rollOut;
-//   }
-  
-//   @-webkit-keyframes zoomIn {
-//     from {
-//       opacity: 0;
-//       -webkit-transform: scale3d(.3, .3, .3);
-//       transform: scale3d(.3, .3, .3);
-//     }
-  
-//     50% {
-//       opacity: 1;
-//     }
-//   }
-  
-//   @keyframes zoomIn {
-//     from {
-//       opacity: 0;
-//       -webkit-transform: scale3d(.3, .3, .3);
-//       transform: scale3d(.3, .3, .3);
-//     }
-  
-//     50% {
-//       opacity: 1;
-//     }
-//   }
-