Text Microinteractions

Page Elements

In our site we added the following page elements:

• 8 text elements to build the sentence (5 of which we will use to create our microinteractions).

• 2 images.

Code

In the $w.onReady() function we declare all the elements we want to animate. We then create the individual animation timelines for each of the 3 animations:

1. Shiver ‘microinteractions’: When the user hovers over the text element “microinteractions”, we create a shiver effect by quickly moving “microinteractions” in all directions and adding a slight rotation.

2. Slide ‘arrow’: When the user hovers over the text element “text”, we create a bump effect by sliding the arrow horizontally back and forth pushing the text element, “to” backwards, and the text element “text” forward. For extra effect, we use the easeInSine and easeOutSine easing parameters of the wix-animations API. Note that we configure this animation differently for mobile devices.

3. Show images: When the user hovers over the text element “images”, we create a fade effect by gradually showing 2 image elements. We do this by changing the opacity of the image elements and by using the easeOutQuad easing parameter of the wix-animations API.

The last step is to add onMouseIn() and onMouseOut() event handlers to the 3 text elements. When hovering over the 3 text elements, their animations will play. When hovering off the 3 text elements, their animations will either replay, pause, or reverse depending on the animation.