move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_rubber.scss

@@ -0,0 +1,115 @@
+////
+///
+/// Rubber Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides rubber band-style stretching and squashing animations.
+/// Creates elastic, bouncy effects that simulate rubber material physics.
+/// Perfect for playful UI elements and attention-grabbing effects.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Rubber Band Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rubber band-style stretching and squashing effect.
+///
+/// @name animate_rubber_band
+/// @param {Number} $intensity [1.25] - Stretch/squash intensity factor
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [1] - Number of iterations
+///
+/// @example scss - Basic usage
+///   .bouncy-element {
+///     @include animate_rubber_band;
+///   }
+///
+@mixin animate_rubber_band(
+    $intensity: 1.25,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: 1
+) {
+    @include animate_base(
+        animate_rubber_band,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_rubber_band($intensity);
+}
+
+
+///
+/// Subtle Rubber Band Animation
+/// A gentler rubber band effect.
+///
+/// @name animate_rubber_band_subtle
+/// @param {Duration} $duration [$animate_base_duration] - The animation duration.
+///
+@mixin animate_rubber_band_subtle(
+    $duration: $animate_base_duration
+) {
+    @include animate_rubber_band(1.1, $duration);
+}
+
+
+///
+/// Intense Rubber Band Animation
+/// A more dramatic rubber band effect.
+///
+/// @name animate_rubber_band_intense
+/// @param {Duration} $duration [$animate_base_duration] - The animation duration.
+///
+@mixin animate_rubber_band_intense(
+    $duration: $animate_base_duration
+) {
+    @include animate_rubber_band(1.4, $duration);
+}
+
+
+///
+/// Rubber Squeeze Animation
+/// Creates a horizontal squeeze effect.
+///
+/// @name animate_rubber_squeeze
+/// @param {Number} $squeeze [0.8] - The squeeze factor (< 1 = thinner).
+/// @param {Duration} $duration [$animate_base_duration_fast] - The animation duration.
+/// @param {String} $timing_function [ease-out] - The timing function.
+///
+@mixin animate_rubber_squeeze(
+    $squeeze: 0.8,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_rubber_squeeze,
+        $duration,
+        $timing_function,
+        1
+    );
+    @include keyframes_animate_rubber_squeeze($squeeze);
+}

package/src/scss/mixins/animations/_scale.scss

@@ -0,0 +1,382 @@
+////
+///
+/// Scale Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides scale-based animations for expanding and shrinking elements.
+/// Includes smooth expand/contract effects with customizable scale factors.
+/// Useful for emphasis, feedback, and transition animations.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Scale Animation
+/// ---------------------------------------------------------------------------
+/// Creates a scale animation where the element pulses up and down.
+///
+/// @name animate_scale
+/// @param {Number} $scale_start [1] - The initial scale of the element.
+/// @param {Number} $scale_end [$animate_scale_pop] - The scale at maximum size.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+/// @example scss - Basic usage
+///   .element {
+///     @include animate_scale;
+///   }
+///
+@mixin animate_scale(
+    $scale_start: $animate_scale_base,
+    $scale_end: $animate_scale_pop,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_scale($scale_end);
+}
+
+
+///
+/// Expand Animation
+/// ---------------------------------------------------------------------------
+/// Creates an expand animation where the element scales up and down.
+///
+/// @name animate_scale_expand
+/// @param {Number} $scale_start [1] - The initial scale of the element.
+/// @param {Number} $scale_end [1.2] - The scale at maximum size.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-out] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_scale_expand(
+    $scale_start: $animate_scale_base,
+    $scale_end: $animate_scale_pop,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_expand,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_scale_expand($scale_start, $scale_end);
+}
+
+
+///
+/// Shrink Animation
+/// ---------------------------------------------------------------------------
+/// Creates an animation where the element shrinks and expands.
+///
+/// @name animate_scale_shrink
+/// @param {Number} $scale_min [0.8] - The minimum scale during animation.
+/// @param {Number} $scale_max [1.2] - The maximum scale during animation.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_scale_shrink(
+    $scale_min: 0.8,
+    $scale_max: 1.2,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_shrink,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_scale_shrink($scale_min, $scale_max);
+}
+
+
+// ============================================================================
+// Scale In/Out Mixins
+// ============================================================================
+
+///
+/// Scale In Animation
+/// ---------------------------------------------------------------------------
+/// Creates an entrance animation that scales element in from small.
+///
+/// @name animate_scale_in
+/// @param {Number} $start_scale [0] - Starting scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function
+///
+@mixin animate_scale_in(
+    $start_scale: 0,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function
+) {
+    @include animate_base(
+        animate_scale_in,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_scale_in($start_scale);
+}
+
+
+///
+/// Scale In Center Animation
+/// ---------------------------------------------------------------------------
+/// Creates an entrance animation that scales element in from center.
+///
+/// @name animate_scale_in_center
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function
+///
+@mixin animate_scale_in_center(
+    $start_scale: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function
+) {
+    @include animate_base(
+        animate_scale_in_center,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_scale_in_center($start_scale);
+}
+
+
+///
+/// Scale In Pop Animation
+/// ---------------------------------------------------------------------------
+/// Creates an entrance animation with overshoot (pop effect).
+///
+/// @name animate_scale_in_pop
+/// @param {Number} $start_scale [0] - Starting scale
+/// @param {Number} $overshoot [1.1] - Overshoot scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function_elastic] - Timing function
+///
+@mixin animate_scale_in_pop(
+    $start_scale: 0,
+    $overshoot: 1.1,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function_elastic
+) {
+    @include animate_base(
+        animate_scale_in_pop,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_scale_in_pop($start_scale, $overshoot);
+}
+
+
+///
+/// Scale Out Animation
+/// ---------------------------------------------------------------------------
+/// Creates an exit animation that scales element out to nothing.
+///
+/// @name animate_scale_out
+/// @param {Number} $end_scale [0] - Ending scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function
+///
+@mixin animate_scale_out(
+    $end_scale: 0,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function
+) {
+    @include animate_base(
+        animate_scale_out,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_scale_out($end_scale);
+}
+
+
+///
+/// Scale Out Center Animation
+/// ---------------------------------------------------------------------------
+/// Creates an exit animation that scales element out from center.
+///
+/// @name animate_scale_out_center
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function
+///
+@mixin animate_scale_out_center(
+    $end_scale: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function
+) {
+    @include animate_base(
+        animate_scale_out_center,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_scale_out_center($end_scale);
+}
+
+
+// ============================================================================
+// Scale with Bounce Mixins
+// ============================================================================
+
+///
+/// Scale Bounce Animation
+/// ---------------------------------------------------------------------------
+/// Creates a scale animation with bounce effect.
+///
+/// @name animate_scale_bounce
+/// @param {Number} $scale [1.2] - Target scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_scale_bounce(
+    $scale: $animate_scale_pop,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_bounce,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_scale_bounce($scale);
+}
+
+
+// ============================================================================
+// Scale X/Y Mixins
+// ============================================================================
+
+///
+/// Scale X Animation
+/// ---------------------------------------------------------------------------
+/// Creates a scale animation on X-axis only.
+///
+/// @name animate_scale_x
+/// @param {Number} $scale_x [1.2] - X-axis scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_scale_x(
+    $scale_x: 1.2,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_x,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_scale_x($scale_x);
+}
+
+
+///
+/// Scale Y Animation
+/// ---------------------------------------------------------------------------
+/// Creates a scale animation on Y-axis only.
+///
+/// @name animate_scale_y
+/// @param {Number} $scale_y [1.2] - Y-axis scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_scale_y(
+    $scale_y: 1.2,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_scale_y,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_scale_y($scale_y);
+}
+
+
+// ============================================================================
+// Scale Transition Classes
+// ============================================================================
+
+///
+/// Scale Transition Mixin
+/// ---------------------------------------------------------------------------
+/// Creates CSS classes for scale transitions (in/out).
+/// Implements the previously commented-out scale-transition pattern.
+///
+/// @name scale_transition
+///
+/// @example scss - Usage
+///   .element {
+///     @include scale_transition;
+///   }
+///
+@mixin scale_transition(
+    $transition_duration: 0.3s,
+    $transition_out_duration: 0.2s,
+    $timing_function: cubic-bezier(0.53, 0.01, 0.36, 1.63)
+) {
+    transition: transform $transition_duration $timing_function;
+
+    &.scale-out {
+        transform: scale(0);
+        transition: transform $transition_out_duration !important;
+    }
+
+    &.scale-in {
+        transform: scale(1);
+    }
+}