Animated Text and Microinteractions with Wix Velo

In this example, I created microinteractions with three text elements using the Wix Animations API. When you click on each word, a different animation appears.

View Example

How to Create a Similar Animation on Wix?

Page Elements

On our site, I added the following page elements:

1. Text elements to build the sentence (five of which I’ll use to create microinteractions)

2. Two images

Code

Inside the $w.onReady() function, we declare all the elements we want to animate. Then we create a separate animation timeline for each of the three elements.

1)Shake effect: when the user hovers over the “microinteractions” text element, we create a shaking effect by quickly moving “microinteractions” in different directions and adding a slight rotation.

2) Arrow slide: when the user hovers over the “text” element, we create an embossed effect by moving the arrow horizontally back and forth, pushing the “with” text element backward and the “text” element forward. For an extra touch, we use the easeInSine and easeOutSine easing parameters from the Wix Animations API.

Please note that we configure this animation differently for mobile devices.

3) Show images: when the user hovers over the “images” text element, we create a fade-in effect that gradually reveals two image elements. We do this by changing the opacity of the image elements and using the easeOutQuad easing parameter from the Wix Animations API.

The final step is to add onMouseIn() and onMouseOut() event handlers to the three text elements. When the user hovers over these text elements, their animations are triggered. When the cursor moves away, the animations will either repeat, pause, or reverse, depending on the specific animation.

Copy the Code to Your Website Page

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())});

Open the Example in the Editor >