Ani-Motion | Docs

Como empezar a usarlo

Para empezar a utilizar los Ani-Mixin, simplemente incluye la librería en tu proyecto y luego importa el archivos sass a tu proyecyo:

@import '../utils/Ani-Mixins/ani-mixins';

SlideY and SlideX

Estos mixins CSS simplifican la aplicación de animaciones de entrada deslizante vertical y horizontal en tus proyectos web. Simplemente, ajusta los valores de duración, retardo, dirección y distancia para lograr resultados visualmente atractivos.

@include slideY($duration, $delay, $mode, $time-line, $distance);

Ejemplos

//Archivo del repositorio

@import 'Ani-Motion/Ani-Mixins/ani-mixins';

.element{
font-size:2em;
font-family:'Roboto';
@include slideY(1s, 0s, ease,both, 50px);
}

.element{
font-size:2em;
font-family:'Roboto';
@include slideX(1s, 0s, ease,both, 50px);
}

Probar animaciones

FadeOff

El efecto de desvanecimiento "FadeOff" agrega un toque de elegancia a tus elementos al desvanecerlos de forma suave y gradual.

@include fadeOff($duration, $delay, $mode, $time-line);

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include fadeOff(1s, 0s, ease, forward);
}

Probar animaciones

Rotate360

El efecto de rotación "Rotate360" aporta un dinamismo llamativo a tus elementos, creando una rotación completa de 360 grados con un toque de movimiento y estilo.

@include Rotate360($duration, $delay, $mode, $time-line);

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include rotate360(1s, 0s, ease, forward);
}

Probar animaciones

Spiral

El efecto "Spiral" agrega un toque de dinamismo y curiosidad a tus elementos al crear una animación que simula el movimiento en espiral.

@include spiral($duration, $delay, $mode, $time-line);

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include spiral(1s, 0s, ease, forward);
}

Probar animaciones

Float

Para emplear el efecto "Float" a través del mixin, simplemente agrega la línea de código a continuación en tu hoja de estilos Sass. Ajusta los valores de duración, retardo, modo de temporización, línea de tiempo y distancia según tus preferencias. Este efecto creará una animación que da la ilusión de que el elemento está flotando suavemente en el aire, añadiendo una sensación de gracia y ligereza a tu diseño web.

@include float($duration, $delay, $mode, $time-line, $distance);

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include float(1s, 0s, ease, forward, 30px);
}

Probar animaciones

Scale

Para aplicar el efecto de escala utilizando el mixin "scale", simplemente incluye la línea de código a continuación en tu hoja de estilos Sass. Ajusta los valores de duración, retardo, modo de temporización y la línea de tiempo.

@include scale($duration, $delay, $mode, $time-line);

Este efecto producirá una suave animación de escala en el elemento seleccionado, creando un efecto visual atractivo que destaca y resalta elementos clave en tu diseño web.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include scale(1s, 0s, ease, forward);
}

Probar animaciones

ScaleRevere

Para implementar el efecto "ScaleRevere" mediante el mixin, basta con insertar la línea de código a continuación en tu hoja de estilos Sass. Ajusta los valores de duración, retardo, modo de temporización y la línea de tiempo.

@include scaleRevere($duration, $delay, $mode, $time-line);

Este efecto transforma el tamaño de un elemento de forma inversa, generando un efecto visual cautivador.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include scaleRevere(1s, 0s, ease, forward);
}

Probar animaciones

ReboundTop

Para aplicar el efecto "ReboundTop" utilizando el mixin, simplemente agrega la línea de código a continuación en tu hoja de estilos Sass. Ajusta los valores de duración, retardo, modo de temporización, línea de tiempo y distancia de rebote de acuerdo a tus preferencias.

@include reboundTop($duration, $delay, $mode, $time-line, $distance);

Este efecto generará una animación que simula un rebote del elemento desde la parte superior, añadiendo un toque de movimiento dinámico y llamativo a tu diseño web.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include reboundTop(1s, 0s, ease, forward, 100px);
}

Probar animaciones

Vibrate

Para implementar el efecto "Vibrate" mediante el mixin, simplemente añade la línea de código a continuación en tu hoja de estilos Sass. Ajusta los valores de duración, retardo, modo de temporización y línea de tiempo según tus preferencias.

@include vibrate($duration, $delay, $mode, $time-line);

Este efecto generará una animación de vibración en el elemento seleccionado, creando una apariencia dinámica y energética en tu diseño web.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include vibrate(1s, 0s, ease, forward);
}

Probar animaciones

Repose

Para aplicar el efecto "Repose" utilizando el mixin, simplemente agrega la línea de código a continuación en tu hoja de estilos Sass. Ajusta los valores de duración, retardo, modo de temporización, línea de tiempo y escala según tus preferencias.

@include repose($duration, $delay, $mode, $time-line, $scale);

Este efecto generará una animación que simula un rebote del elemento desde la parte superior, añadiendo un toque de movimiento dinámico y llamativo a tu diseño web.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include repose(1s, 0s, ease, forward, 1.2);
}

Probar animaciones

Roll

El efecto "Roll" añade un giro sutil y elegante a tus elementos, generando una animación de rotación que agrega dinamismo a tu diseño web. Al usar el mixin @include roll($duration, $delay, $mode, $time-line, $distance);, puedes ajustar los valores de duración, retardo, modo de temporización, línea de tiempo y distancia para adaptar el efecto a tus necesidades.

@include roll($duration, $delay, $mode, $time-line, $distance);

Este efecto agrega un giro suave y llamativo a tus elementos al combinar desplazamiento horizontal y rotación.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include roll(1s, 0s, ease, forward, 100px);
}

Probar animaciones

RollLeft and RollRight

Los efectos "RollLeft" y "RollRight" aportan una animación de giro y desplazamiento horizontal a tus elementos, creando un efecto visual cautivador. Al utilizar los mixins de a continuación, los elementos se desplazarán desde los lados izquierdo y derecho respectivamente, mientras giran 360 grados.

@include rollRight($duration, $delay, $mode, $time-line);

@include rollLeft($duration, $delay, $mode, $time-line);

Puedes personalizar los valores de duración, retardo, modo de temporización y línea de tiempo para adaptar estos efectos según tus necesidades.

Ejemplo

.element{
font-size:2em;
font-family:'Roboto';
@include rollRight(2s, 0s, ease, forward);
}

.element{
font-size:2em;
font-family:'Roboto';
@include rollLeft(2s, 0s, ease, forward);
}

Probar animaciones