move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_slide.scss

@@ -0,0 +1,501 @@
+////
+///
+/// Slide Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides directional sliding animations for elements entering or exiting
+/// the viewport. Includes slide in/out from all directions with customizable
+/// distances and timing. Ideal for modals, drawers, and content transitions.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Slide In Left Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in animation from the left.
+///
+/// @name animate_slide_in_left
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_in_left(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_left($distance);
+}
+
+
+///
+/// Slide In Right Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in animation from the right.
+///
+/// @name animate_slide_in_right
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_in_right(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_right($distance);
+}
+
+
+///
+/// Slide In Up Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in animation from below.
+///
+/// @name animate_slide_in_up
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_in_up(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_up($distance);
+}
+
+
+///
+/// Slide In Down Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in animation from above.
+///
+/// @name animate_slide_in_down
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_in_down(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_down($distance);
+}
+
+
+///
+/// Slide Out Left Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide out animation to the left.
+///
+/// @name animate_slide_out_left
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_slide_out_left(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_slide_out_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_slide_out_left($distance);
+}
+
+
+///
+/// Slide Out Right Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide out animation to the right.
+///
+/// @name animate_slide_out_right
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_slide_out_right(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_slide_out_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_slide_out_right($distance);
+}
+
+
+///
+/// Slide Out Up Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide out animation upward.
+///
+/// @name animate_slide_out_up
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_slide_out_up(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_slide_out_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_slide_out_up($distance);
+}
+
+
+///
+/// Slide Out Down Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide out animation downward.
+///
+/// @name animate_slide_out_down
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_slide_out_down(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_slide_out_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_slide_out_down($distance);
+}
+
+
+///
+/// Slide Fade In Up Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with fade from below.
+///
+/// @name animate_slide_fade_in_up
+/// @param {Length} $distance [20px] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_fade_in_up(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_fade_in_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_fade_in_up($distance);
+}
+
+
+///
+/// Slide Fade In Down Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with fade from above.
+///
+/// @name animate_slide_fade_in_down
+/// @param {Length} $distance [20px] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_fade_in_down(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_fade_in_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_fade_in_down($distance);
+}
+
+
+///
+/// Slide Fade In Left Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with fade from left.
+///
+/// @name animate_slide_fade_in_left
+/// @param {Length} $distance [20px] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_fade_in_left(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_fade_in_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_fade_in_left($distance);
+}
+
+
+///
+/// Slide Fade In Right Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with fade from right.
+///
+/// @name animate_slide_fade_in_right
+/// @param {Length} $distance [20px] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_slide_fade_in_right(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_fade_in_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_fade_in_right($distance);
+}
+
+
+///
+/// Slide Loop Horizontal Animation
+/// ---------------------------------------------------------------------------
+/// Creates a continuous horizontal sliding loop.
+///
+/// @name animate_slide_loop_horizontal
+/// @param {Length} $distance [100%] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_slide_loop_horizontal(
+    $distance: 100%,
+    $duration: $animate_base_duration_slow,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_slide_loop_horizontal,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_slide_loop_horizontal($distance);
+}
+
+
+///
+/// Slide Loop Vertical Animation
+/// ---------------------------------------------------------------------------
+/// Creates a continuous vertical sliding loop.
+///
+/// @name animate_slide_loop_vertical
+/// @param {Length} $distance [100%] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_slide_loop_vertical(
+    $distance: 100%,
+    $duration: $animate_base_duration_slow,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_slide_loop_vertical,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_slide_loop_vertical($distance);
+}
+
+
+///
+/// Slide In Bounce Left Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with bounce effect from left.
+///
+/// @name animate_slide_in_bounce_left
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_slide_in_bounce_left(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_slide_in_bounce_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_bounce_left($distance);
+}
+
+
+///
+/// Slide In Bounce Right Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with bounce effect from right.
+///
+/// @name animate_slide_in_bounce_right
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_slide_in_bounce_right(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_slide_in_bounce_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_bounce_right($distance);
+}
+
+
+///
+/// Slide In Bounce Up Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with bounce effect from below.
+///
+/// @name animate_slide_in_bounce_up
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_slide_in_bounce_up(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_slide_in_bounce_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_bounce_up($distance);
+}
+
+
+///
+/// Slide In Bounce Down Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slide in with bounce effect from above.
+///
+/// @name animate_slide_in_bounce_down
+/// @param {Length} $distance [100%] - Distance to slide
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_slide_in_bounce_down(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_slide_in_bounce_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_slide_in_bounce_down($distance);
+}