Texto animado y microinteracciones con Wix Velo

En este ejemplo, creé microinteracciones con tres elementos de texto usando la API de animaciones de Wix. Cuando hacés clic en cada palabra, aparece una animación diferente.

Ver ejemplo

¿Cómo crear una animación similar en Wix?

Elementos de la página

En nuestro sitio, agregué los siguientes elementos a la página:

1. Elementos de texto para armar la oración(cinco de ellos los voy a usar para crear microinteracciones)

2. Dos imágenes

Código

Dentro de la función $w.onReady(), declaramos todos los elementos que queremos animar. Después, creamos una línea de tiempo de animación independiente para cada uno de los tres elementos.

1) Efecto de sacudida:cuando la persona pasa el cursor sobre el elemento de texto “microinteractions”, creamos un efecto de sacudida moviéndolo rápidamente en distintas direcciones y agregando una leve rotación.

2) Deslizamiento de la flecha:cuando la persona pasa el cursor sobre el elemento “text”, creamos un efecto de relieve moviendo la flecha horizontalmente de un lado a otro, empujando el elemento de texto “with” hacia atrás y el elemento “text” hacia adelante. Como detalle extra, usamos los parámetros de aceleración easeInSine y easeOutSine de la API de animaciones de Wix.

Tené en cuenta que esta animación está configurada de otra manera para dispositivos móviles.

3) Mostrar imágenes: cuando la persona pasa el cursor sobre el elemento de texto “images”, creamos un efecto de aparición gradual que revela dos elementos de imagen. Lo hacemos cambiando la opacidad de los elementos de imagen y usando el parámetro de aceleración easeOutQuad de la API de animaciones de Wix.

El paso final es agregar los controladores de eventos onMouseIn() y onMouseOut() a los tres elementos de texto. Cuando la persona pasa el cursor sobre estos elementos, se activan sus animaciones. Cuando el cursor se aleja, las animaciones se repiten, se pausan o se reproducen en reversa, según la animación específica.

Copiá el código en la página de tu sitio web

import { timeline } from 'wix-animations'import { formFactor } from 'wix-window'// ID: 5C4819EC0ED2650B78BBB95DAC1D7FBE// Configure animation for mobile devices const isMobile = formFactor === 'Mobile'$w.onReady(function () {    // Declare all elements in the animation:    const micro = $w('#microText')    const images = $w('#imagesText')    const image1 = $w('#firstImage')    const image2 = $w('#secondImage')    const to = $w('#toText')    const text = $w('#textText')    const arrow = $w('#arrowText')    // Create the individual animation timelines for each of the 3 animations:    // Shiver 'micro':    const shiver = timeline({ repeat: -1 })        .add(micro, { duration: 50, x: 2, y: 1 })        .add(micro, { duration: 50, x: -2, y: -1 })        .add(micro, { duration: 50, x: 1, y: 2 })        .add(micro, { duration: 50, x: -1, y: -2 })        .add(micro, { duration: 100, rotate: 1 }, 0)        .add(micro, { duration: 100, rotate: -1 }, 100)    // Slide 'arrow':    const slide = timeline({ repeat: -1 })        .add(arrow, { duration: 400, x: isMobile ? -19 : -48, easing: 'easeOutSine' })        .add(to, { duration: 200, x: isMobile ? -8 : -12, easing: 'easeOutSine' }, '-=32')        .add(to, { duration: 200, x: 0, easing: 'easeInSine' })        .add(arrow, { duration: 400, x: 0, easing: 'easeInSine' }, '-=370')        .add(arrow, { duration: 400, x: isMobile ? 19 : 48, easing: 'easeOutSine' })        .add(text, { duration: 200, x: isMobile ? 8 : 12, easing: 'easeOutSine' }, '-=32')        .add(text, { duration: 200, x: 0, easing: 'easeInSine' })        .add(arrow, { duration: 400, x: 0, easing: 'easeInSine' }, '-=370')    // Show images:    // Start by putting the images in a separate hidden timeline so that we can reverse the animation to opacity: 0.     // Otherwise we will jump to opacity: 1 at the end of the reverse    timeline().add([image1, image2], { duration: 0, opacity: 0 }, 0).play()    const show = timeline()        .add(image1, { duration: 0, x: 80, y: -40 })        .add(image2, { duration: 0, x: -80, y: 40 })        .add([image1, image2], { duration: 1000, opacity: 1 })        .add([image1, image2], { duration: 1000, x: 0, y: 0, easing: 'easeOutQuad' }, 0)    // Play ‘shiver micro’ animation on hover and reset on out:    micro.onMouseIn(() => shiver.play())    micro.onMouseOut(() => shiver.replay().pause())    // Play ‘slide arrow’ animation on hover and pause on out:    text.onMouseIn(() => slide.play())    text.onMouseOut(() => slide.pause())    // Play ‘show images’ animation on hover and reverse on out:    images.onMouseIn(() => show.play())    images.onMouseOut(() => show.reverse())});

Abrí el ejemplo en el editor >