Ani-Motion | Docs

Como empezar a usarlo

Para empezar a utilizar Motion, simplemente incluye los archivos Sass y JavaScript en tu proyecto:

@use 'ani-motion936/Motions/JMotions.js';

o puedes incluirlo directamente en el HTML, aunque para algunos efectos de texto se usan los mixins de sass:

import { TextChange, AniIntersection, animation } from 'ani-motion936/Motions/JMotions.js'

Tu archivo donde exportaras las clases de Motions, asegurate que tenga el type="module"

Animation JS

Este efecto forma parte de la colección "Motions", agrega dinámicas animaciones a elementos web. La clase animation permite aplicar efectos al detectar eventos como clics.

Uso

1- Importar la Clase: Primero, asegúrate de haber importado la clase animation desde la librería en tu proyecto.

import { TextChange, AniIntersection, animation } from 'ani-motion936/Motions/JMotions.js'

2- Creación de una Instancia: Crea una instancia de la clase animation pasando un objeto de configuración como argumento. Este objeto debe contener al menos dos propiedades:

element: El elemento HTML al que deseas aplicar la animación.
animation: El nombre de la clase CSS que define la animación.

Ejemplo:

const animationInstance = new animation({
element: document.querySelector('.my-element'),
animation: 'slideY'
});

3- Aplicar Animación sin Evento: Si deseas aplicar la animación sin ningún evento específico, la clase de animación se añadirá inmediatamente al elemento proporcionado.

4- Aplicar Animación con Evento: Si deseas que la animación se aplique en respuesta a un evento (por ejemplo, un clic), especifica la propiedad event en el objeto de configuración. Puedes proporcionar un evento HTML válido, como 'click' o 'mouseenter'.

5- Definir Tiempo de Finalización (Opcional): Si deseas que la clase de animación se elimine después de un cierto período de tiempo, proporciona la propiedad time en milisegundos en el objeto de configuración. Esto es útil para animaciones temporizadas.

Ejemplo:

const animationInstance = new animation({
element: document.querySelector('.my-element'),
animation: 'fadeOff',
event: 'click',
time: 2000
});

no dispoble en examples

TextChange JS

Este efecto te permite cambiar dinámicamente el contenido de un elemento HTML con una serie de textos predefinidos. Aquí tienes una guía sobre cómo usar este efecto:

1- Importar la Clase: Asegúrate de haber importado la clase TextChange desde la librería en tu proyecto.

2- Creación de una Instancia: Crea una instancia de la clase TextChange pasando un objeto de configuración como argumento. Este objeto debe contener las siguientes propiedades:

element: El elemento HTML en el que deseas cambiar el texto.
texts: Un array que contiene los textos que deseas mostrar de manera cíclica.
animation: El nombre de la clase CSS que define la animación.
time: El intervalo de tiempo (en milisegundos) entre cambios de texto.

const TextChangeInstance = new TextChange({
element: document.querySelector('.my-text'),
animation: 'slideY',
texts: ['Texto 1', 'Texto 2', 'Texto 3'],
time: 3000
});

3- Cambio de Texto Automático: Una vez que se crea la instancia, el efecto TextChange cambiará automáticamente el contenido del elemento HTML a intervalos regulares, usando los textos proporcionados en el array texts.

4- Personalización de Animación: Puedes personalizar la animación aplicada al cambiar el texto al especificar la clase CSS en la propiedad animation.

Probar animaciones

aniIntersection JS

Este efecto de nuestra librería te permite aplicar animaciones a elementos HTML cuando entran en la vista del usuario (viewport) mientras se desplaza por la página. Aquí te mostramos cómo utilizar este efecto:

1- Importar la Clase: Asegúrate de haber importado la clase AniIntersection desde la librería en tu proyecto.

2- Creación de una Instancia: Crea una instancia de la clase AniIntersection pasando un objeto de configuración como argumento. Este objeto debe contener las siguientes propiedades:

element:

animation:

const intersectionInstance = new AniIntersection({
element: document.querySelector('.animated-element'),
animation: 'scale'
});

no dispoble en examples

AniObjects Objeto JS

El objeto aniObjects es una referencia útil para acceder fácilmente a los nombres de las animaciones disponibles en la librería. Cada clave en este objeto representa un nombre descriptivo de una animación específica, mientras que los valores correspondientes son las cadenas que identifican dichas animaciones.

Al utilizar aniObjects, puedes acceder rápidamente a los nombres de las animaciones en tu código y pasarlos como parámetros a las funciones y clases de la librería. Esto facilita la aplicación de efectos de animación a tus elementos HTML sin tener que recordar los nombres exactos de las animaciones.

import { aniObjects, animation } from 'ani-motion936/Motions/JMotions.js';

const animationInstance = new animation({
element: document.querySelector('.my-element' ),
animation: aniObjects.slideY
});

Usando aniObjects, puedes acceder y aplicar fácilmente los efectos de animación disponibles en tu librería.

TypeText

La clase TypeText te permite incorporar el efecto de escritura de máquina de escribir en tus elementos HTML. Este efecto es ideal para resaltar contenido de manera llamativa y gradual. Además, se pueden utilizar los mixins typewriter-container y typewriter-text para personalizar el aspecto visual del efecto. Aquí tienes cómo utilizarlo:

1- Importar la Clase TypeText: Asegúrate de importar la clase TypeText desde el archivo donde esté definida:

import { TypeText } from 'ani-motion936/Motions/JMotions.js';

2- Crear una Instancia de TypeText: Crea una instancia de la clase TypeText, pasando un objeto con las propiedades necesarias:

const typeWriter = new TypeText ({
element: document.queryselector('.my-text'),
text: 'hello world',
time: 50 // Opcional: ajusta el tiempo entre cada letra (en milisegundos)
});

3- Personalización Visual con Mixins: Para personalizar el aspecto visual del efecto de escritura, puedes utilizar los mixins typewriter-container y typewriter-text que proporcionas. Estos mixins te permiten ajustar la apariencia de los contenedores y el texto que muestra el efecto.

.my-text-container {
@include typewriter-container($color: red, $border: 2px solid red);
// ...
}
.my-text {
@include typewriter-text;
// ...
}

no dispoble en examples