Hello Animations

Add animations to elements.

Introduction Last updated: 03 Feb 2025

Open Example Preview

About

In this example, we apply an animation to move containers when a site visitor hovers their mouse over them.

APIs

• wix-animations-frontend

How we built it

We added the following to our site:

Page Elements

• 4 containers:
  • 3 that each contain a different greeting and are different colors. The animations will be applied to these containers.
  • 1 that is transparent and takes the same space as the other 3 combined to attach event listeners to.

Frontend Code

Home

The code in this file enables animations on the color container elements.

In this file, we:

1. Create a timeline.
2. Add animations on the color containers.
3. Play the animation when the mouse enters the space taken up by the containers.
4. Reverse the animation when the mouse leaves the space taken up by the containers.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.