move.gl 0.0.1 → 0.0.2

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

@@ -0,0 +1,360 @@
+////
+///
+/// Rotate Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for rotation animations including basic rotate, rotate
+/// in/out effects from various origins and corners. These keyframes provide
+/// entrance/exit animations with 3D rotation effects.
+///
+/// @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 Rotate Keyframes
+// ============================================================================
+
+///
+/// Simple rotation.
+///
+/// @param {Angle} $start_angle [0deg] - Starting angle
+/// @param {Angle} $end_angle [360deg] - Ending angle
+///
+@mixin keyframes_rotate($start_angle: 0deg, $end_angle: 360deg) {
+    @include keyframes(animate_rotate) {
+        from {
+            transform: rotate($start_angle);
+        }
+        to {
+            transform: rotate($end_angle);
+        }
+    }
+}
+
+///
+/// Rotation with CSS custom property support.
+///
+@mixin keyframes_animate_rotate() {
+    @include keyframes(animate_rotate) {
+        from {
+            transform: rotate(var(--animate-rotate-start, 0deg));
+        }
+        to {
+            transform: rotate(var(--animate-rotate-end, #{$animate_angle_full}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Rotate In Keyframes
+// ============================================================================
+
+///
+/// Rotate in from center.
+///
+/// @param {Angle} $angle [-200deg] - Starting rotation angle
+///
+@mixin keyframes_rotate_in($angle: $animate_rotate_in_angle) {
+    @include keyframes(animate_rotate_in) {
+        from {
+            transform-origin: center;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+        to {
+            transform-origin: center;
+            transform: none;
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Rotate in from bottom left corner.
+///
+/// @param {Angle} $angle [-45deg] - Starting rotation angle
+///
+@mixin keyframes_rotate_in_down_left($angle: $animate_rotate_corner_in_down_left) {
+    @include keyframes(animate_rotate_in_down_left) {
+        from {
+            transform-origin: left bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+        to {
+            transform-origin: left bottom;
+            transform: none;
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Rotate in from bottom right corner.
+///
+/// @param {Angle} $angle [45deg] - Starting rotation angle
+///
+@mixin keyframes_rotate_in_down_right($angle: $animate_rotate_corner_in_down_right) {
+    @include keyframes(animate_rotate_in_down_right) {
+        from {
+            transform-origin: right bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+        to {
+            transform-origin: right bottom;
+            transform: none;
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Rotate in from top left corner.
+///
+/// @param {Angle} $angle [45deg] - Starting rotation angle
+///
+@mixin keyframes_rotate_in_up_left($angle: $animate_rotate_corner_in_up_left) {
+    @include keyframes(animate_rotate_in_up_left) {
+        from {
+            transform-origin: left bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+        to {
+            transform-origin: left bottom;
+            transform: none;
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Rotate in from top right corner.
+///
+/// @param {Angle} $angle [-90deg] - Starting rotation angle
+///
+@mixin keyframes_rotate_in_up_right($angle: $animate_rotate_corner_in_up_right) {
+    @include keyframes(animate_rotate_in_up_right) {
+        from {
+            transform-origin: right bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+        to {
+            transform-origin: right bottom;
+            transform: none;
+            opacity: 1;
+        }
+    }
+}
+
+
+// ============================================================================
+// Rotate Out Keyframes
+// ============================================================================
+
+///
+/// Rotate out to center.
+///
+/// @param {Angle} $angle [200deg] - Ending rotation angle
+///
+@mixin keyframes_rotate_out($angle: $animate_rotate_out_angle) {
+    @include keyframes(animate_rotate_out) {
+        from {
+            transform-origin: center;
+            opacity: 1;
+        }
+        to {
+            transform-origin: center;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Rotate out to bottom left corner.
+///
+/// @param {Angle} $angle [45deg] - Ending rotation angle
+///
+@mixin keyframes_rotate_out_down_left($angle: $animate_rotate_corner_angle) {
+    @include keyframes(animate_rotate_out_down_left) {
+        from {
+            transform-origin: left bottom;
+            opacity: 1;
+        }
+        to {
+            transform-origin: left bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Rotate out to bottom right corner.
+///
+/// @param {Angle} $angle [-45deg] - Ending rotation angle
+///
+@mixin keyframes_rotate_out_down_right($angle: -$animate_rotate_corner_angle) {
+    @include keyframes(animate_rotate_out_down_right) {
+        from {
+            transform-origin: right bottom;
+            opacity: 1;
+        }
+        to {
+            transform-origin: right bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Rotate out to top left corner.
+///
+/// @param {Angle} $angle [-45deg] - Ending rotation angle
+///
+@mixin keyframes_rotate_out_up_left($angle: -$animate_rotate_corner_angle) {
+    @include keyframes(animate_rotate_out_up_left) {
+        from {
+            transform-origin: left bottom;
+            opacity: 1;
+        }
+        to {
+            transform-origin: left bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Rotate out to top right corner.
+///
+/// @param {Angle} $angle [90deg] - Ending rotation angle
+///
+@mixin keyframes_rotate_out_up_right($angle: $animate_flip_out_angle) {
+    @include keyframes(animate_rotate_out_up_right) {
+        from {
+            transform-origin: right bottom;
+            opacity: 1;
+        }
+        to {
+            transform-origin: right bottom;
+            transform: rotate3d(0, 0, 1, $angle);
+            opacity: 0;
+        }
+    }
+}
+
+
+// ============================================================================
+// Pendulum Rotate Keyframes
+// ============================================================================
+
+///
+/// Pendulum-like rotation effect.
+///
+/// @param {Angle} $angle [15deg] - Maximum swing angle
+///
+@mixin keyframes_rotate_pendulum($angle: $animate_angle_rapid) {
+    @include keyframes(animate_rotate_pendulum) {
+        0%, 100% {
+            transform: rotate(0deg);
+            transform-origin: top center;
+        }
+        25% {
+            transform: rotate($angle);
+        }
+        75% {
+            transform: rotate(-$angle);
+        }
+    }
+}
+
+
+// ============================================================================
+// Wobble Rotate Keyframes
+// ============================================================================
+
+///
+/// Wobbling rotation effect.
+///
+/// @param {Angle} $angle [5deg] - Wobble angle
+///
+@mixin keyframes_rotate_wobble($angle: 5deg) {
+    @include keyframes(animate_rotate_wobble) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        15% {
+            transform: rotate(-$angle);
+        }
+        30% {
+            transform: rotate($angle * 0.8);
+        }
+        45% {
+            transform: rotate(-$angle * 0.6);
+        }
+        60% {
+            transform: rotate($angle * 0.4);
+        }
+        75% {
+            transform: rotate(-$angle * 0.2);
+        }
+    }
+}
+
+
+// ============================================================================
+// 3D Rotate Keyframes
+// ============================================================================
+
+///
+/// 3D rotation on X-axis.
+///
+/// @param {Angle} $angle [360deg] - Rotation angle
+///
+@mixin keyframes_rotate_x($angle: 360deg) {
+    @include keyframes(animate_rotate_x) {
+        from {
+            transform: perspective(400px) rotateX(0deg);
+        }
+        to {
+            transform: perspective(400px) rotateX($angle);
+        }
+    }
+}
+
+///
+/// 3D rotation on Y-axis.
+///
+/// @param {Angle} $angle [360deg] - Rotation angle
+///
+@mixin keyframes_rotate_y($angle: 360deg) {
+    @include keyframes(animate_rotate_y) {
+        from {
+            transform: perspective(400px) rotateY(0deg);
+        }
+        to {
+            transform: perspective(400px) rotateY($angle);
+        }
+    }
+}

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

@@ -0,0 +1,81 @@
+// ============================================================================
+// move.gl | Rubber Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Rubber Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for rubber band animations.
+/// Creates elastic, bouncy effects that simulate rubber material physics.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Rubber Band Keyframes
+/// @name keyframes_animate_rubber_band
+/// @param {Number} $intensity [1.25] - The stretch/squash intensity factor.
+///
+@mixin keyframes_animate_rubber_band($intensity: $animate_scale_rubber_intensity) {
+    $squash: 2 - $intensity;
+    $settle1: 1 + ($intensity - 1) * 0.6;
+    $settle1_inv: 2 - $settle1;
+    $settle2: 1 - ($intensity - 1) * 0.2;
+    $settle2_inv: 2 - $settle2;
+    $settle3: 1 + ($intensity - 1) * 0.2;
+    $settle3_inv: 2 - $settle3;
+
+    @keyframes animate_rubber_band {
+        0%, 100% {
+            transform: scale3d(1, 1, 1);
+        }
+        30% {
+            transform: scale3d($intensity, $squash, 1);
+        }
+        40% {
+            transform: scale3d($squash, $intensity, 1);
+        }
+        50% {
+            transform: scale3d($settle1, $settle1_inv, 1);
+        }
+        65% {
+            transform: scale3d($settle2, $settle2_inv, 1);
+        }
+        75% {
+            transform: scale3d($settle3, $settle3_inv, 1);
+        }
+    }
+}
+
+
+///
+/// Rubber Squeeze Keyframes
+/// @name keyframes_animate_rubber_squeeze
+/// @param {Number} $squeeze [0.8] - The squeeze factor.
+///
+@mixin keyframes_animate_rubber_squeeze($squeeze: $animate_scale_rubber_squeeze) {
+    $stretch: 2 - $squeeze;
+
+    @keyframes animate_rubber_squeeze {
+        0%, 100% {
+            transform: scale3d(1, 1, 1);
+        }
+        50% {
+            transform: scale3d($squeeze, $stretch, 1);
+        }
+    }
+}