move.gl 0.0.1 → 0.0.2

package/scss/mixins/animations/--hover.scss

@@ -1,107 +0,0 @@
-
-
-// ============================================================================
-// icon.gl | Animations
-// ============================================================================
-
-@use "../dev" as *;
-@use "../variables" as *;
-@use "base" as *;
-
-
-// @mixin hover-animation($transition-duration: 0.3s) {
-//     transition: all $transition-duration ease;
-//     &:hover {
-//         transform: scale(1.1);
-//     }
-// }
-
-// .hover-grow {
-//     @include hover-animation();
-// }
-
-// Hover
-// ----------------------------------------------------------------------------
-
-@mixin animate_hover($scale: 1.05, $duration: 0.3s, $timing-function: ease-in-out) {
-    transition: transform $duration $timing-function;
-    &:hover {
-        transform: scale($scale);
-    }
-}
-
-.animate_hover {
-    @include animate_hover();
-}
-
-
-// Hover Bounce
-// ----------------------------------------------------------------------------
-
-@mixin animate_hover_bounce($distance: 10px, $duration: 0.3s) {
-    transition: transform $duration ease-in-out;
-    &:hover {
-        animation-name: animate_bounce;
-        animation-duration: $duration;
-        animation-fill-mode: forwards;
-        @keyframes animate_bounce {
-            0% { transform: translateY(0); }
-            100% { transform: translateY(-$distance); }
-        }
-    }
-}
-
-.animate_hover_bounce {
-    @include animate_hover_bounce();
-}
-
-
-
-
-// Hover Scale
-// ----------------------------------------------------------------------------
-
-@mixin animate_hover_scale($scale: 1.1, $duration: 0.3s) {
-    transition: transform $duration ease-in-out;
-    &:hover {
-        transform: scale($scale);
-    }
-}
-
-.animate_hover_scale {
-    @include animate_hover_scale();
-}
-
-// Hover Rotate
-// ----------------------------------------------------------------------------
-
-@mixin animate_hover_rotate($angle: 15deg, $duration: 0.5s) {
-    transition: transform $duration ease-in-out;
-    &:hover {
-        transform: rotate($angle);
-    }
-}
-
-.animate_hover_rotate {
-    @include animate_hover_rotate();
-}
-
-
-
-
-// Hover Drop Animation:
-// ----------------------------------------------------------------------------
-
-@mixin animate_hover_drop($distance: 5px, $duration: 0.3s) {
-    transition: transform $duration ease-in-out;
-    &:hover {
-        transform: translateY($distance);
-    }
-}
-
-.animate_hover_drop {
-    @include animate_hover_drop();
-}
-
-
-

package/scss/mixins/animations/_base.scss

@@ -1,337 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Base 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 *;
-
-
-// ============================================================================
-// Mixins
-// ============================================================================
-
-
-///
-/// Base Animation Mixin
-/// This mixin provides a base structure for defining animations, allowing
-/// customization of the name, duration, timing function, iteration count,
-/// delay, and direction.
-/// 
-/// @name animate_base
-/// @param {String} $name [none] - The name of the animation.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-/// @param {Number|String} $delay [$animate_base_delay] - The delay before the animation starts.
-/// @param {String} $direction [$animate_base_direction] - The direction in which the animation is played.
-///
-@mixin animate_base(
-    $name: none,
-    $duration: $animate_base_duration,
-    $timing_function: $animate_base_timing_function,
-    $iteration_count: $animate_base_iteration_count,
-    $delay: $animate_base_delay,
-    $direction: $animate_base_direction,
-) {
-    // animation: $name $duration $timing_function $iteration_count $delay $direction;
-    animation-name: $name;
-    animation-duration: $duration;
-    animation-timing-function: $timing_function;
-    animation-iteration-count: $iteration_count;
-    animation-delay: $delay;
-    animation-direction: $direction;
-}
-
-// General Animation Classes
-// ----------------------------------------------------------------------------
-
-// // Base classes for animations
-// [class^="#{$icongl_prefix}animate_"],
-// [class*=" #{$icongl_prefix}animate_"] {
-//     // Base animation properties
-//     display: inline-block;
-//     backface-visibility: hidden;
-//     perspective: 1000px; // Improve 3D animations
-// }
-
-// Reduced Motion Preference
-// ----------------------------------------------------------------------------
-
-// if agent or operating system prefers reduced motion, disable animations
-// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
-// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
-
-///
-/// Reduced Motion
-/// This media query applies styles that reduce motion for users who have
-/// enabled the "prefers-reduced-motion" setting. Animations and transitions
-/// are effectively disabled to improve accessibility.
-/// @media (prefers-reduced-motion: reduce)
-///
-@media (prefers-reduced-motion: reduce) {
-
-    // Apply to specific animated classes
-    .animate_beat,
-    .animate_bounce,
-    .animate_fade,
-    .animate_beat_fade,
-    .animate_flip,
-    .animate_pulse,
-    .animate_shake,
-    .animate_spin,
-    .animate_spin-pulse {
-        animation-delay: -1ms;
-        animation-duration: 1ms;
-        animation-iteration-count: 1;
-        transition-delay: 0s;
-        transition-duration: 0s;
-    }
-
-    // Global animation disabling
-    .animation {
-        animation: none;
-        transition: none;
-    }
-}
-
-
-@media (prefers-reduced-motion: reduce) {
-    // Target all elements with a class starting with 'animate_'
-    [class*="animate_"] {
-        // Reset basic animation and transition properties
-        animation: none;
-        transition: none;
-    }
-
-    // Alternatively, if animations are tied to a specific attribute
-    [data-animation] {
-        // Apply the same reset
-        animation: none;
-        transition: none;
-    }
-
-    // Additional option for targeting any animated element
-    // This targets any element with animation or transition properties set
-   /// {
-        animation: none !important;
-        transition: none !important;
-    }
-}
-
-
-
-
-
-
-
-// .animated {
-//     -webkit-animation-duration: 3s;
-//     animation-duration: 3s;
-//     -webkit-animation-fill-mode: both;
-//     animation-fill-mode: both;
-//   }
-  
-//   .animated-middle {
-//     -webkit-animation-duration: 1.2s;
-//     animation-duration: 1.2s;
-//     -webkit-animation-fill-mode: both;
-//     animation-fill-mode: both;
-//   }
-  
-//   .animated-quick {
-//     -webkit-animation-duration: 0.6s;
-//     animation-duration: 0.6s;
-//     -webkit-animation-fill-mode: both;
-//     animation-fill-mode: both;
-//   }
-  
-//   .animated.infinite {
-//     -webkit-animation-iteration-count: infinite;
-//     animation-iteration-count: infinite;
-//   }
-  
-
-
-
-// Animations
-//
-
-
-
-
-///
-/// Hover Opacity Transition Mixin
-/// Provides a hover effect that changes the opacity of an element
-/// with a transition.
-/// @name transition_hover_opacity
-///
-@mixin transition_hover_opacity {
-    @include transition_duration_00;
-    opacity: 1.00; 
-    :hover {
-        @include transition_duration_00;
-        opacity: 0.50; 
-    } 
-}
-
-///
-/// Transition Mixin
-/// Provides a basic transition effect with a customizable duration.
-/// @name transition_duration
-/// @param {Number|String} $val - The duration for the transition.
-///
-@mixin transition_duration($val) {
-    transition:                     all $val ease-in-out;
-    -moz-transition:                all $val ease-in-out;
-    -ms-transition:                 all $val ease-in-out;
-    -o-transition:                  all $val ease-in-out;
-    -webkit-transition:             all $val ease-in-out;
-    transition-duration:            all $val ease-in-out;
-    -moz-transition-duration:       all $val ease-in-out;
-    -ms-transition-duration:        all $val ease-in-out;
-    -o-transition-duration:         all $val ease-in-out;
-    -webkit-transition-duration:    all $val ease-in-out;
-}
-
-
-///
-/// Quick Transition Mixin
-/// Provides a quick transition effect with a pre-defined duration.
-/// @name transition_duration_00
-///
-@mixin transition_duration_00 {
-    @include transition_duration($transition_duration_00);
-    // transition:                     all $transition_duration_00 ease-in-out;
-    // -moz-transition:                all $transition_duration_00 ease-in-out;
-    // -ms-transition:                 all $transition_duration_00 ease-in-out;
-    // -o-transition:                  all $transition_duration_00 ease-in-out;
-    // -webkit-transition:             all $transition_duration_00 ease-in-out;
-    // transition-duration:            all $transition_duration_00 ease-in-out;
-    // -moz-transition-duration:       all $transition_duration_00 ease-in-out;
-    // -ms-transition-duration:        all $transition_duration_00 ease-in-out;
-    // -o-transition-duration:         all $transition_duration_00 ease-in-out;
-    // -webkit-transition-duration:    all $transition_duration_00 ease-in-out;  
-}
-
-///
-/// Medium Transition Mixin
-/// Provides a medium-speed transition effect with a pre-defined duration.
-/// @name transition_duration_01
-///
-@mixin transition_duration_01 {
-    @include transition_duration($transition_duration_01);
-    // transition:                     all $transition_duration_01 ease-in-out;
-    // -moz-transition:                all $transition_duration_01 ease-in-out;
-    // -ms-transition:                 all $transition_duration_01 ease-in-out;
-    // -o-transition:                  all $transition_duration_01 ease-in-out;
-    // -webkit-transition:             all $transition_duration_01 ease-in-out;
-    // transition-duration:            all $transition_duration_01 ease-in-out;
-    // -moz-transition-duration:       all $transition_duration_01 ease-in-out;
-    // -ms-transition-duration:        all $transition_duration_01 ease-in-out;
-    // -o-transition-duration:         all $transition_duration_01 ease-in-out;
-    // -webkit-transition-duration:    all $transition_duration_01 ease-in-out;  
-}
-
-///
-/// Long Transition Mixin
-/// Provides a longer transition effect with a pre-defined duration.
-/// @name transition_duration_02
-///
-@mixin transition_duration_02 {
-    @include transition_duration($transition_duration_02);
-    // transition:                     all $transition_duration_02 ease-in-out;
-    // -moz-transition:                all $transition_duration_02 ease-in-out;
-    // -ms-transition:                 all $transition_duration_02 ease-in-out;
-    // -o-transition:                  all $transition_duration_02 ease-in-out;
-    // -webkit-transition:             all $transition_duration_02 ease-in-out;
-    // transition-duration:            all $transition_duration_02 ease-in-out;
-    // -moz-transition-duration:       all $transition_duration_02 ease-in-out;
-    // -ms-transition-duration:        all $transition_duration_02 ease-in-out;
-    // -o-transition-duration:         all $transition_duration_02 ease-in-out;
-    // -webkit-transition-duration:    all $transition_duration_02 ease-in-out;  
-}
-
-///
-/// Extra Long Transition Mixin
-/// Provides an extra-long transition effect with a pre-defined duration.
-/// @name transition_duration_03
-///
-@mixin transition_duration_03 {
-    @include transition_duration($transition_duration_03);
-    // transition:                     all $transition_duration_03 ease-in-out;
-    // -moz-transition:                all $transition_duration_03 ease-in-out;
-    // -ms-transition:                 all $transition_duration_03 ease-in-out;
-    // -o-transition:                  all $transition_duration_03 ease-in-out;
-    // -webkit-transition:             all $transition_duration_03 ease-in-out;
-    // transition-duration:            all $transition_duration_03 ease-in-out;
-    // -moz-transition-duration:       all $transition_duration_03 ease-in-out;
-    // -ms-transition-duration:        all $transition_duration_03 ease-in-out;
-    // -o-transition-duration:         all $transition_duration_03 ease-in-out;
-    // -webkit-transition-duration:    all $transition_duration_03 ease-in-out;  
-}
-
-///
-/// Maximum Duration Transition Mixin
-/// Provides a maximum duration transition effect with a pre-defined duration.
-/// @name transition_duration_04
-///
-@mixin transition_duration_04 {
-    @include transition_duration($transition_duration_04);
-    // transition:                     all $transition_duration_04 ease-in-out;
-    // -moz-transition:                all $transition_duration_04 ease-in-out;
-    // -ms-transition:                 all $transition_duration_04 ease-in-out;
-    // -o-transition:                  all $transition_duration_04 ease-in-out;
-    // -webkit-transition:             all $transition_duration_04 ease-in-out;
-    // transition-duration:            all $transition_duration_04 ease-in-out;
-    // -moz-transition-duration:       all $transition_duration_04 ease-in-out;
-    // -ms-transition-duration:        all $transition_duration_04 ease-in-out;
-    // -o-transition-duration:         all $transition_duration_04 ease-in-out;
-    // -webkit-transition-duration:    all $transition_duration_04 ease-in-out;
-}
-
-
-
-///
-/// Generates a keyframe animation for elements.
-/// 
-/// @name keyframe-animation
-/// @param {String} $name - The name of the animation.
-/// @param {Map} $keyframes - A map of keyframes, where the key is the percentage and the value is the CSS properties.
-/// @example scss - Usage
-///   @include keyframe-animation('slide-in', (0%: (transform: translateX(-100%)), 100%: (transform: translateX(0))));
-@mixin keyframe_animation(
-    $name,
-    $keyframes
-) {
-    @keyframes #{$name} {
-        @each $percentage, $properties in $keyframes {
-            #{$percentage} {
-                @each $property, $value in $properties {
-                    #{$property}: #{$value};
-                }
-            }
-        }
-    }
-}

package/scss/mixins/animations/_beat.scss

@@ -1,119 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Beat Animations Mixin Module
-/// ===========================================================================
-/// This module provides a set of SCSS mixins for creating various beat
-/// animations, including basic beat, beat with fade, and double beat effects.
-/// These mixins are designed to scale elements up and down in rhythmic
-/// patterns, enhancing the visual dynamics of your designs.
-/// 
-/// @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
-// ============================================================================
-
-///
-/// Beat Animation
-/// Creates a beat animation that scales an element up and down rhythmically.
-///
-/// @name animate_beat
-/// @param {Number} $scale [$animate-scale-beat] - The scale factor for the beat animation.
-/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation.
-/// @param {String} $timing_function [$animate-base-timing-function] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate-base-iteration-count] - The number of iterations the animation will run.
-///
-@mixin animate_beat(
-    $scale: $animate-scale-beat, 
-    $duration: $animate-base-duration,
-    $timing_function: $animate-base-timing-function, 
-    $iteration_count: $animate-base-iteration-count
-) {
-    @include animate_base(
-        animate_beat,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @include keyframes_animate_beat($scale);
-}
-
-///
-/// Beat Fade Animation
-/// Combines a beat animation with a fade effect, scaling the element while
-/// changing its opacity.
-///
-/// @name animate_beat_fade
-/// @param {Number} $opacity [$animate-opacity-fade] - The opacity level at the start and end of the animation.
-/// @param {Number} $scale [$animate-scale-beat-fade] - The scale factor for the beat animation.
-/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation.
-/// @param {String} $timing_function [$animate-base-timing-function-fade] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate-base-iteration-count] - The number of iterations the animation will run.
-///
-@mixin animate_beat_fade(
-    $opacity: $animate-opacity-fade, 
-    $scale: $animate-scale-beat-fade, 
-    $duration: $animate-base-duration,
-    $timing_function: $animate-base-timing-function-fade, 
-    $iteration_count: $animate-base-iteration-count
-) {
-    @include animate_base(
-        animate_beat_fade,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @include keyframes_animate_beat_fade($opacity, $scale);
-}
-
-///
-/// Double Beat Animation
-/// Creates a double beat animation where the element scales down, then up,
-/// then down again, simulating a heartbeat or pulsating effect.
-///
-/// @name animate_beat_double
-/// @param {Number} $scale-small [$animate-scale-beat-double-small] - The smaller scale factor for the double beat animation.
-/// @param {Number} $scale-large [$animate-scale-beat-double-large] - The larger scale factor for the double beat animation.
-/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation.
-/// @param {String} $timing_function [$animate-base-timing-function] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate-base-iteration-count] - The number of iterations the animation will run.
-///
-@mixin animate_beat_double(
-    $scale-small: $animate-scale-beat-double-small,
-    $scale-large: $animate-scale-beat-double-large,
-    $duration: $animate-base-duration,
-    $timing_function: $animate-base-timing-function,
-    $iteration_count: $animate-base-iteration-count
-) {
-    @include animate_base(
-        animate_beat_double,
-        $duration,
-        $timing_function,
-        $iteration_count
-    );
-    @include keyframes_animate_beat_double($scale-small, $scale-large);
-}