Example Description
In this example, we demonstrate how to create a simple animation.
How We Built It
Page Elements
On the HOME page, we added 3 circular containers, each containing a text element.
Page Code
On the HOME page, we added code to import the `timeline()` function from the wix-animations API. We use the function to create an animation that moves and scales two elements on the page. Then we create 2 event handlers to play the animation forwards and in reverse in response to the site visitor’s mouse movements.
Related Examples
Did this help?
|
Thanks for your feedback!
![Image placeholder.png](https://static.wixstatic.com/media/12d367_ff41dab623a945488f73a6eef836b8f7~mv2.png/v1/fill/w_78,h_52,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Image%20placeholder.png)
Add to Cart Gallery
Let customers to add products to their cart
![Intermediate.png](https://static.wixstatic.com/media/12d367_3e4cb40eaf29447896e3ccdc94a766e5~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_auto/Intermediate.png)
INTERMEDIATE
![Image placeholder.png](https://static.wixstatic.com/media/12d367_603d15881fe44eb2a3bde67ccda12a21~mv2.png/v1/fill/w_78,h_52,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Image%20placeholder.png)
Hide and Show Elements
Hide and show elements in response to user interactions
![Begginer.png](https://static.wixstatic.com/media/12d367_5a8d7e4db0be475da232a90877b3425d~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_auto/Begginer.png)
BEGGINER
![Image placeholder.png](https://static.wixstatic.com/media/12d367_603d15881fe44eb2a3bde67ccda12a21~mv2.png/v1/fill/w_78,h_52,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Image%20placeholder.png)
Hide and Show Elements
Hide and show elements in response to user interactions
![Begginer.png](https://static.wixstatic.com/media/12d367_5a8d7e4db0be475da232a90877b3425d~mv2.png/v1/fill/w_10,h_9,al_c,q_85,blur_3,enc_auto/Begginer.png)
BEGGINER