move.gl 0.0.1 → 0.0.2

package/scss/mixins/animations/_bounce.scss

@@ -1,192 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Bounce 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
-// ============================================================================
-
-
-///
-/// Bounce Animation
-/// Creates a simple bounce animation where the element moves up and down.
-/// 
-/// @name animate_bounce
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
-/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-/// @param {Number|String} $bounce_height [-20%] - The height of the bounce.
-///
-@mixin animate_bounce(
-    $duration: $animate_base_duration,
-    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
-    $iteration_count: $animate_base_iteration_count,
-    $bounce_height: -20%
-) {
-    @include animate_base(
-        animate_bounce,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @keyframes animate_bounce {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY($bounce_height); }
-    }
-}
-
-
-
-// @keyframes bounce {
-// 	0%,100% {
-// 		-webkit-transform: translate3d(0,-30px,0);
-// 		transform: translate3d(0,-30px,0);
-// 	}
-// 	50% {
-// 		-webkit-transform: translate3d(0,-4px,0);
-// 		transform: translate3d(0,-4px,0);
-// 	}
-// }
-
-
-///
-/// Extended Bounce Animation
-/// Creates an extended bounce animation with multiple stages of scaling
-/// and bouncing.
-/// 
-/// @name animate_bounce_extended
-/// @param {Number} $start-scale_x [1.1] - Initial scale in the X direction.
-/// @param {Number} $start-scale_y [0.9] - Initial scale in the Y direction.
-/// @param {Number} $jump_scale_x [0.9] - Scale in the X direction during the jump.
-/// @param {Number} $jump_scale_y [1.1] - Scale in the Y direction during the jump.
-/// @param {Number|String} $bounce_height [-0.5em] - The height of the bounce.
-/// @param {Number} $land_scale_x [1.05] - Scale in the X direction upon landing.
-/// @param {Number} $land_scale_y [0.95] - Scale in the Y direction upon landing.
-/// @param {Number|String} $rebound_height [-0.125em] - The height of the rebound.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
-/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_bounce_extended(
-    $start-scale_x: 1.1,
-    $start-scale_y: 0.9,
-    $jump_scale_x: 0.9,
-    $jump_scale_y: 1.1,
-    $bounce_height: -0.5em,
-    $land_scale_x: 1.05,
-    $land_scale_y: 0.95,
-    $rebound_height: -0.125em,
-    $duration: $animate_base_duration,
-    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_bounce,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_bounce {
-        0%   { transform: scale(1,1) translateY(0); }
-        10%  { transform: scale($start-scale_x, $start-scale_y) translateY(0); }
-        30%  { transform: scale($jump_scale_x, $jump_scale_y) translateY($bounce_height); }
-        50%  { transform: scale($land_scale_x, $land_scale_y) translateY(0); }
-        57%  { transform: scale(1,1) translateY($rebound_height); }
-        64%  { transform: scale(1,1) translateY(0); }
-        100% { transform: scale(1,1) translateY(0); }
-    }
-}
-
-
-
-///
-/// Bounce with Rotation Animation
-/// Creates a bounce animation that includes a rotation as the element moves
-/// up and down.
-/// 
-/// @name animate_bounce_rotate
-/// @param {Number|String} $rotation_angle [360deg] - The angle of rotation during the bounce.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
-/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_bounce_rotate(
-    $rotation_angle: 360deg,
-    $duration: $animate_base_duration,
-    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_bounce_rotate,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_bounce_rotate {
-        0%, 100% { transform: translateY(0) rotate(0); }
-        50% { transform: translateY(-20%) rotate($rotation_angle); }
-    }
-}
-
-
-
-///
-/// Multi-Directional Bounce Animation
-/// Creates a bounce animation that moves the element in multiple
-/// directions (X and Y).
-/// 
-/// @name animate_bounce_multi
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
-/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-/// @param {Number|String} $bounce_x [-10%] - The distance the element moves along the X-axis during the bounce.
-/// @param {Number|String} $bounce_y [-20%] - The distance the element moves along the Y-axis during the bounce.
-///
-@mixin animate_bounce_multi(
-    $duration: $animate_base_duration,
-    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
-    $iteration_count: $animate_base_iteration_count,
-    $bounce_x: -10%,
-    $bounce_y: -20%
-) {
-    @include animate_base(
-        animate_bounce_multi,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_bounce_multi {
-        0%, 100% { transform: translate(0, 0); }
-        25% { transform: translate($bounce_x, 0); }
-        50% { transform: translate(0, $bounce_y); }
-        75% { transform: translate($bounce_x, 0); }
-    }
-}

package/scss/mixins/animations/_fade.scss

@@ -1,154 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Fade 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
-// ============================================================================
-
-
-@mixin animate_fade(
-    $start_opacity: 1,
-    $mid_opacity: 0,
-    $end_opacity: 1,
-    $duration: $animate_base_duration,
-    $timing_function: cubic-bezier(.4, 0, .6, 1),
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_fade,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_fade {
-        0%, 100% { opacity: $start-opacity; }
-        50% { opacity: $mid-opacity; }
-    }
-}
-
-
-@mixin animate_fade_in(
-    $start_opacity: 0,
-    $end_opacity: 1,
-    $duration: $animate_base_duration,
-    $timing_function: ease-in
-) {
-    @include animate_base(
-        animate_fade_in,
-        $duration,
-        $timing_function,
-        1
-    );
-    @keyframes animate_fade_in {
-        from { opacity: $start-opacity; }
-        to { opacity: $end-opacity; }
-    }
-}
-
-
-// @keyframes fadeIn {
-//     from {
-//       opacity: 0;
-//       transform: translate3d(0, -100%, 0);
-//     }
-  
-//     to {
-//       opacity: 1;
-//       transform: none;
-//     }
-//   }
-
-// $boot-fadein-time: 2s;
-// $boot-fadein-opacity-start: 0;
-// $boot-fadein-opacity-end: 1;
-
-//   .fade {
-//     @include transition($transition-fade);
-  
-//     &:not(.show) {
-//         opacity: 0;
-//     }
-// }
-  
-
-// Fade Out Animation
-// ----------------------------------------------------------------------------
-
-@mixin animate_fade_out(
-    $start_opacity: 1,
-    $end_opacity: 0,
-    $duration: $animate_base_duration,
-    $timing_function: ease-out
-) {
-    @include animate_base(
-        animate_fade_in,
-        $duration,
-        $timing_function,
-        1
-    );
-    @keyframes animate_fade_out {
-        from { opacity: $start-opacity; }
-        to { opacity: $end-opacity; }
-    }
-}
-
-
-// @keyframes fadeOut {
-//     from {
-//       opacity: 1;
-//     }
-  
-//     to {
-//          transform: translate3d(0, -100%, 0);
-//       opacity: 0;
-//     }
-//   }
-
-
-@mixin animate_fade_gradual(
-    $start_opacity: 1,
-    $end_opacity: 0.5,
-    $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out,
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_fade_gradual,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_fade_gradual {
-        0%, 100% { opacity: $start-opacity; }
-        50% { opacity: $end-opacity; }
-    }
-}

package/scss/mixins/animations/_flip.scss

@@ -1,72 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Flip 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
-// ============================================================================
-
-
-///
-/// Flip Animation
-/// Creates a flip animation that rotates an element around a 3D axis.
-/// 
-/// @name animate_flip
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the flip animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the flip animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-/// @param {Number} $rotate_x [0] - The X-axis rotation factor.
-/// @param {Number} $rotate_y [1] - The Y-axis rotation factor.
-/// @param {Number} $rotate_z [0] - The Z-axis rotation factor.
-/// @param {Number|String} $rotate_start-angle [0] - The starting angle of rotation.
-/// @param {Number|String} $rotate_end-angle [360deg] - The ending angle of rotation.
-///
-@mixin animate_flip(
-    $duration: $animate_base_duration,
-    $timing_function: ease-in-out,
-    $iteration_count: $animate_base_iteration_count,
-    $rotate_x: 0,
-    $rotate_y: 1,
-    $rotate_z: 0,
-    $rotate_start-angle: 0,
-    $rotate_end-angle: 360deg
-) {
-    @include animate_base(
-        animate_flip,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_flip {
-        0% { transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $rotate_start-angle); }
-        100% { transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $rotate_end-angle); }
-    }
-}

package/scss/mixins/animations/_heartbeat.scss

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