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

Open the Example in the Editor >