move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/keyframes/animations/_flip.scss

@@ -0,0 +1,266 @@
+////
+///
+/// Flip Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for 3D flip animations that rotate elements around
+/// X, Y, or Z axes. Includes standard flip, flip in/out variations, and
+/// card flip effects for interactive UI elements.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+@use "../_base" as *;
+
+
+// ============================================================================
+// Basic Flip Keyframes
+// ============================================================================
+
+///
+/// Standard 3D flip animation.
+///
+/// @param {Number} $rotate_x [0] - X-axis rotation factor
+/// @param {Number} $rotate_y [1] - Y-axis rotation factor
+/// @param {Number} $rotate_z [0] - Z-axis rotation factor
+/// @param {Angle} $start_angle [0] - Starting angle
+/// @param {Angle} $end_angle [360deg] - Ending angle
+///
+@mixin keyframes_flip(
+    $rotate_x: 0,
+    $rotate_y: 1,
+    $rotate_z: 0,
+    $start_angle: 0,
+    $end_angle: 360deg
+) {
+    @include keyframes(animate_flip) {
+        0% {
+            transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $start_angle);
+        }
+        100% {
+            transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $end_angle);
+        }
+    }
+}
+
+///
+/// Flip with CSS custom property support.
+///
+@mixin keyframes_animate_flip($rotate_x: 0, $rotate_y: 1, $rotate_z: 0) {
+    @include keyframes(animate_flip) {
+        0% {
+            transform: rotate3d($rotate_x, $rotate_y, $rotate_z, 0deg);
+        }
+        100% {
+            transform: rotate3d($rotate_x, $rotate_y, $rotate_z, var(--animate-flip-angle, 360deg));
+        }
+    }
+}
+
+
+// ============================================================================
+// Flip In Keyframes
+// ============================================================================
+
+///
+/// Flip in on X-axis (from top).
+///
+/// @param {Angle} $start_angle [-90deg] - Starting rotation angle
+///
+@mixin keyframes_flip_in_x($start_angle: $animate_flip_in_angle) {
+    @include keyframes(animate_flip_in_x) {
+        from {
+            transform: perspective(400px) rotateX($start_angle);
+            opacity: 0;
+        }
+        40% {
+            transform: perspective(400px) rotateX(20deg);
+        }
+        60% {
+            transform: perspective(400px) rotateX(-10deg);
+            opacity: 1;
+        }
+        80% {
+            transform: perspective(400px) rotateX(5deg);
+        }
+        to {
+            transform: perspective(400px) rotateX(0deg);
+        }
+    }
+}
+
+///
+/// Flip in on Y-axis (from side).
+///
+/// @param {Angle} $start_angle [-90deg] - Starting rotation angle
+///
+@mixin keyframes_flip_in_y($start_angle: $animate_flip_in_angle) {
+    @include keyframes(animate_flip_in_y) {
+        from {
+            transform: perspective(400px) rotateY($start_angle);
+            opacity: 0;
+        }
+        40% {
+            transform: perspective(400px) rotateY(20deg);
+        }
+        60% {
+            transform: perspective(400px) rotateY(-10deg);
+            opacity: 1;
+        }
+        80% {
+            transform: perspective(400px) rotateY(5deg);
+        }
+        to {
+            transform: perspective(400px) rotateY(0deg);
+        }
+    }
+}
+
+
+// ============================================================================
+// Flip Out Keyframes
+// ============================================================================
+
+///
+/// Flip out on X-axis.
+///
+/// @param {Angle} $end_angle [90deg] - Ending rotation angle
+///
+@mixin keyframes_flip_out_x($end_angle: $animate_flip_out_angle) {
+    @include keyframes(animate_flip_out_x) {
+        from {
+            transform: perspective(400px);
+        }
+        30% {
+            transform: perspective(400px) rotateX(-20deg);
+            opacity: 1;
+        }
+        to {
+            transform: perspective(400px) rotateX($end_angle);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Flip out on Y-axis.
+///
+/// @param {Angle} $end_angle [90deg] - Ending rotation angle
+///
+@mixin keyframes_flip_out_y($end_angle: $animate_flip_out_angle) {
+    @include keyframes(animate_flip_out_y) {
+        from {
+            transform: perspective(400px);
+        }
+        30% {
+            transform: perspective(400px) rotateY(-15deg);
+            opacity: 1;
+        }
+        to {
+            transform: perspective(400px) rotateY($end_angle);
+            opacity: 0;
+        }
+    }
+}
+
+
+// ============================================================================
+// Card Flip Keyframes
+// ============================================================================
+
+///
+/// Card flip effect - front to back.
+///
+@mixin keyframes_card_flip() {
+    @include keyframes(animate_card_flip) {
+        0% {
+            transform: perspective(1000px) rotateY(0deg);
+        }
+        100% {
+            transform: perspective(1000px) rotateY(180deg);
+        }
+    }
+}
+
+///
+/// Card flip effect - back to front.
+///
+@mixin keyframes_card_flip_back() {
+    @include keyframes(animate_card_flip_back) {
+        0% {
+            transform: perspective(1000px) rotateY(180deg);
+        }
+        100% {
+            transform: perspective(1000px) rotateY(0deg);
+        }
+    }
+}
+
+
+// ============================================================================
+// Flip with Scale Keyframes
+// ============================================================================
+
+///
+/// Flip combined with scale effect.
+///
+/// @param {Number} $scale [0.8] - Scale at midpoint
+///
+@mixin keyframes_flip_scale($scale: $animate_scale_flip) {
+    @include keyframes(animate_flip_scale) {
+        0%, 100% {
+            transform: perspective(400px) rotateY(0deg) scale(1);
+        }
+        50% {
+            transform: perspective(400px) rotateY(180deg) scale($scale);
+        }
+    }
+}
+
+
+// ============================================================================
+// Diagonal Flip Keyframes
+// ============================================================================
+
+///
+/// Flip on diagonal axis.
+///
+/// @param {Angle} $angle [360deg] - Rotation angle
+///
+@mixin keyframes_flip_diagonal($angle: $animate_flip_diagonal_angle) {
+    @include keyframes(animate_flip_diagonal) {
+        0% {
+            transform: rotate3d(1, 1, 0, 0deg);
+        }
+        100% {
+            transform: rotate3d(1, 1, 0, $angle);
+        }
+    }
+}
+
+///
+/// Flip on opposite diagonal axis.
+///
+/// @param {Angle} $angle [360deg] - Rotation angle
+///
+@mixin keyframes_flip_diagonal_alt($angle: $animate_flip_diagonal_angle) {
+    @include keyframes(animate_flip_diagonal_alt) {
+        0% {
+            transform: rotate3d(1, -1, 0, 0deg);
+        }
+        100% {
+            transform: rotate3d(1, -1, 0, $angle);
+        }
+    }
+}

package/{scss/mixins → dist/scss/mixins/keyframes}/animations/_index.scss

@@ -1,20 +1,31 @@
+////
+///
+/// Animation Keyframes Module
+/// =========================================================================
+///
+/// CSS @keyframes definitions for all animation effects. These keyframes
+/// are used by the animations mixins module to create reusable animation
+/// effects like bounce, fade, spin, shake, and more.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
 // ============================================================================
-// StyleScape | Animations | Index
+// Forward Animation Keyframes
 // ============================================================================
 
-@forward "base";
 @forward "beat";
 @forward "blink";
 @forward "bounce";
-@forward "elastic";
 @forward "fade";
 @forward "flash";
 @forward "flip";
-@forward "float";
-@forward "glow";
-@forward "heartbeat";
-@forward "hinge";
-@forward "jello";
 @forward "jiggle";
 @forward "lightspeed";
 @forward "nod";
@@ -29,8 +40,6 @@
 @forward "slide";
 @forward "spin";
 @forward "sway";
-@forward "swing";
-@forward "tada";
 @forward "twist";
 @forward "wave";
 @forward "wobble";

package/dist/scss/mixins/keyframes/animations/_jiggle.scss

@@ -0,0 +1,85 @@
+// ============================================================================
+// move.gl | Jiggle Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Jiggle Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for jiggle animations.
+/// Quick, nervous jiggling animations for horizontal and vertical movement.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Jiggle Keyframes
+/// @name keyframes_animate_jiggle
+/// @param {Length} $amplitude [5px] - The distance to move.
+///
+@mixin keyframes_animate_jiggle($amplitude: $animate_jiggle_amplitude) {
+    @keyframes animate_jiggle {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-$amplitude); }
+        50% { transform: translateX($amplitude); }
+        75% { transform: translateX(-$amplitude); }
+    }
+}
+
+
+///
+/// Jiggle Vertical Keyframes
+/// @name keyframes_animate_jiggle_vertical
+/// @param {Length} $amplitude [5px] - The distance to move.
+///
+@mixin keyframes_animate_jiggle_vertical($amplitude: $animate_jiggle_amplitude) {
+    @keyframes animate_jiggle_vertical {
+        0%, 100% { transform: translateY(0); }
+        25% { transform: translateY(-$amplitude); }
+        50% { transform: translateY($amplitude); }
+        75% { transform: translateY(-$amplitude); }
+    }
+}
+
+
+///
+/// Jiggle Multi Keyframes
+/// @name keyframes_animate_jiggle_multi
+/// @param {Length} $amplitude [5px] - The distance to move.
+///
+@mixin keyframes_animate_jiggle_multi($amplitude: $animate_jiggle_amplitude) {
+    @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); }
+    }
+}
+
+
+///
+/// Jiggle Slow Keyframes
+/// @name keyframes_animate_jiggle_slow
+/// @param {Length} $amplitude [3px] - The distance to move.
+///
+@mixin keyframes_animate_jiggle_slow($amplitude: $animate_jiggle_amplitude_slow) {
+    @keyframes animate_jiggle_slow {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-$amplitude); }
+        50% { transform: translateX($amplitude); }
+        75% { transform: translateX(-$amplitude); }
+    }
+}

package/dist/scss/mixins/keyframes/animations/_lightspeed.scss

@@ -0,0 +1,73 @@
+// ============================================================================
+// move.gl | Lightspeed Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Lightspeed Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for lightspeed animations.
+/// High-speed entrance and exit animations with skew effects.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Lightspeed In Keyframes
+/// @name keyframes_animate_lightspeed_in
+/// @param {Number|String} $distance [100%] - The starting distance.
+/// @param {Angle} $skew_start [-30deg] - The initial skew angle.
+///
+@mixin keyframes_animate_lightspeed_in($distance: $animate_translate_slide, $skew_start: $animate_lightspeed_skew_start) {
+    @keyframes animate_lightspeed_in {
+        0% {
+            transform: translate3d($distance, 0, 0) skewX($skew_start);
+            opacity: 0;
+        }
+        60% {
+            transform: skewX(20deg);
+            opacity: 1;
+        }
+        80% {
+            transform: skewX(-5deg);
+            opacity: 1;
+        }
+        100% {
+            transform: none;
+            opacity: 1;
+        }
+    }
+}
+
+
+///
+/// Lightspeed Out Keyframes
+/// @name keyframes_animate_lightspeed_out
+/// @param {Number|String} $distance [100%] - The ending distance.
+/// @param {Angle} $skew_end [30deg] - The final skew angle.
+///
+@mixin keyframes_animate_lightspeed_out($distance: $animate_translate_slide, $skew_end: $animate_lightspeed_skew_end) {
+    @keyframes animate_lightspeed_out {
+        0% {
+            transform: none;
+            opacity: 1;
+        }
+        100% {
+            transform: translate3d($distance, 0, 0) skewX($skew_end);
+            opacity: 0;
+        }
+    }
+}

package/dist/scss/mixins/keyframes/animations/_nod.scss

@@ -0,0 +1,79 @@
+// ============================================================================
+// move.gl | Nod Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Nod Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for nod animations.
+/// Rotates elements on the X-axis to simulate nodding gestures.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Nod Keyframes
+/// @name keyframes_animate_nod
+/// @param {Angle} $angle [10deg] - The angle of rotation.
+///
+@mixin keyframes_animate_nod($angle: $animate_angle_nod) {
+    @keyframes animate_nod {
+        0%, 100% { transform: rotateX(0deg); }
+        50% { transform: rotateX($angle); }
+    }
+}
+
+
+///
+/// Nod Slow Keyframes
+/// @name keyframes_animate_nod_slow
+/// @param {Angle} $angle [10deg] - The angle of rotation.
+///
+@mixin keyframes_animate_nod_slow($angle: $animate_angle_nod) {
+    @keyframes animate_nod_slow {
+        0%, 100% { transform: rotateX(0deg); }
+        50% { transform: rotateX($angle); }
+    }
+}
+
+
+///
+/// Nod Bounce Keyframes
+/// @name keyframes_animate_nod_bounce
+/// @param {Angle} $angle [10deg] - The angle of rotation.
+/// @param {Length} $bounce_height [5px] - The height of the bounce.
+///
+@mixin keyframes_animate_nod_bounce($angle: $animate_angle_nod, $bounce_height: $animate_translate_nod_bounce) {
+    @keyframes animate_nod_bounce {
+        0%, 100% { transform: rotateX(0deg) translateY(0); }
+        50% { transform: rotateX($angle) translateY(-$bounce_height); }
+    }
+}
+
+
+///
+/// Nod Continuous Keyframes
+/// @name keyframes_animate_nod_continuous
+/// @param {Angle} $angle [10deg] - The angle of rotation.
+///
+@mixin keyframes_animate_nod_continuous($angle: $animate_angle_nod) {
+    @keyframes animate_nod_continuous {
+        0% { transform: rotateX(0deg); }
+        25%, 75% { transform: rotateX($angle); }
+        50%, 100% { transform: rotateX(-$angle); }
+    }
+}

package/dist/scss/mixins/keyframes/animations/_pop.scss

@@ -0,0 +1,78 @@
+// ============================================================================
+// move.gl | Pop Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Pop Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for pop animations.
+/// Quick pop-in/pop-out animations for element emphasis.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Pop Keyframes
+/// @name keyframes_animate_pop
+/// @param {Number} $scale [1.2] - The scale factor.
+///
+@mixin keyframes_animate_pop($scale: $animate_scale_pop) {
+    @keyframes animate_pop {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale($scale); }
+    }
+}
+
+
+///
+/// Pop Fast Keyframes
+/// @name keyframes_animate_pop_fast
+/// @param {Number} $scale [1.2] - The scale factor.
+///
+@mixin keyframes_animate_pop_fast($scale: $animate_scale_pop) {
+    @keyframes animate_pop_fast {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale($scale); }
+    }
+}
+
+
+///
+/// Pop Slow Keyframes
+/// @name keyframes_animate_pop_slow
+/// @param {Number} $scale [1.1] - The scale factor.
+///
+@mixin keyframes_animate_pop_slow($scale: $animate_scale_bounce) {
+    @keyframes animate_pop_slow {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale($scale); }
+    }
+}
+
+
+///
+/// Pop Rotate Keyframes
+/// @name keyframes_animate_pop_rotate
+/// @param {Number} $scale [1.2] - The scale factor.
+/// @param {Angle} $rotation_angle [10deg] - The rotation angle.
+///
+@mixin keyframes_animate_pop_rotate($scale: $animate_scale_pop, $rotation_angle: $animate_angle_pop_rotate) {
+    @keyframes animate_pop_rotate {
+        0%, 100% { transform: scale(1) rotate(0); }
+        50% { transform: scale($scale) rotate($rotation_angle); }
+    }
+}