top of page
Image and Text Animation

Image and Text Animation

Use wix-animations API to animate images and text.

Intermediate.png

Intermediate

15K

Published:

March 9, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

This example demonstrates how to use the timeline animations API to animate images and text components when hovering over them.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

​1. We added 4 editor elements to the page: three images and a text element.

2. We defined a hover area on the page.

3. We defined an onMouseIn event handler on the hover area that uses the timeline   

    animations API to animate movement of the 3 images & text component.       

4. We defined an onMouseOut event handler on the hover area that uses the timeline 

    animations API to animate a reset of the components to the original position.      

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Hide and Show an Image

Hide and Show an Image

Show and hide an image according to the clicked button.

Intermediate.png

Beginner

Animation Helpers

Animation Helpers

Add popular animations to your site using the animation-helpers Velo package

Intermediate.png

Beginner

Zoom-In Effect

Zoom-In Effect

Add a hover animation to repeater items

Intermediate.png

Beginner

Preloader for File Upload

Preloader for File Upload

Display a preloader while a file is uploading

Intermediate.png

Beginner

Anchor 2
bottom of page