move.gl 0.0.1

package/scss/mixins/animations/_ripple.scss

@@ -0,0 +1,169 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Ripple 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
+// ============================================================================
+
+
+///
+/// Ripple Animation
+/// Creates a ripple effect where the element scales up and fades out.
+/// @name animate_ripple
+/// @param {Number} $scale_start [1] - The initial scale of the ripple.
+/// @param {Number} $scale_end [1.5] - The final scale of the ripple.
+/// @param {Number} $opacity_start [1] - The initial opacity of the ripple.
+/// @param {Number} $opacity_end [0] - The final opacity of the ripple.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
+///
+@mixin animate_ripple(
+    $scale_start: 1, 
+    $scale_end: 1.5, 
+    $opacity_start: 1, 
+    $opacity_end: 0, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_ripple,
+        $duration,
+        $timing_function,
+        infinite,
+    );
+    @keyframes animate_ripple {
+        0% { transform: scale($scale_start); opacity: $opacity_start; }
+        100% { transform: scale($scale_end); opacity: $opacity_end; }
+    }
+}
+
+
+
+// Slow Ripple Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slow Ripple Animation
+/// Creates a slower ripple effect where the element scales up and fades out.
+/// 
+/// @name animate_ripple_slow
+/// @param {Number} $scale_end [1.5] - The final scale of the ripple.
+/// @param {Number} $opacity_end [0] - The final opacity of the ripple.
+/// @param {Number|String} $duration [2s] - The duration of the ripple animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
+///
+@mixin animate_ripple_slow(
+    $scale_end: 1.5, 
+    $opacity_end: 0, 
+    $duration: 2s, 
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_ripple_slow,
+        $duration,
+        $timing_function,
+        infinite,
+    );
+    @keyframes animate_ripple_slow {
+        0% { transform: scale(1); opacity: 1; }
+        100% { transform: scale($scale_end); opacity: $opacity_end; }
+    }
+}
+
+
+// Multi-Ripple Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Multi-Ripple Animation
+/// Creates a ripple effect with multiple stages of scaling and fading.
+/// @name animate_ripple_multi
+/// @param {Number} $scale_first [1.2] - The scale of the ripple at the first stage.
+/// @param {Number} $scale_second [1.5] - The scale of the ripple at the second stage.
+/// @param {Number} $opacity_end [0] - The final opacity of the ripple.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
+///
+@mixin animate_ripple_multi(
+    $scale_first: 1.2,
+    $scale_second: 1.5,
+    $opacity_end: 0,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_ripple_multi,
+        $duration,
+        $timing_function,
+        infinite,
+    );
+    @keyframes animate_ripple_multi {
+        0%, 100% { transform: scale(1); opacity: 1; }
+        50% { transform: scale($scale_first); opacity: 0.5; }
+        100% { transform: scale($scale_second); opacity: $opacity_end; }
+    }
+}
+
+
+// Ripple with Color Change
+// ----------------------------------------------------------------------------
+
+///
+/// Ripple with Color Change
+/// Creates a ripple effect where the element scales up, fades out, and changes color.
+/// @name animate_ripple_color
+/// @param {Number} $scale_end [1.5] - The final scale of the ripple.
+/// @param {Number} $opacity_end [0] - The final opacity of the ripple.
+/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the ripple.
+/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the ripple.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
+///
+@mixin animate_ripple_color(
+    $scale_end: 1.5, 
+    $opacity_end: 0,
+    $color_start: $animate_base_color_start,
+    $color_end: $animate_base_color_end,
+    $duration: $animate_base_duration, 
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_ripple_color,
+        $duration,
+        $timing_function,
+        infinite,
+    );
+    @keyframes animate_ripple_color {
+        0% { transform: scale(1); opacity: 1; background-color: $color_start; }
+        100% { transform: scale($scale_end); opacity: $opacity_end; background-color: $color_end; }
+    }
+}

package/scss/mixins/animations/_roll.scss

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