Example Description
In this example we created an animation of a ball moving and then taking the place of the letter O’s in our words. We use the actual location of the letter O’s in our words as the final animation destination of the balls. We use one animation that animates two vector image elements: a white ball and a pink ball.
How We Built It
Page Elements
In our site we added the following page elements:
A group containing 9 vector images, 2 of which are circles.
Code
In the $w.onReady() function we declare all the elements we need to animate. We then measure the distance between the two balls. We create one timeline animation constant called “tl” to animate both balls.
Related Examples
Did this help?
|
Thanks for your feedback!
Custom Button Animation
Create a custom button that rotates clockwise and changes color on click using the Wix Animations API.
Beginner
Solar System Animation
Create a simplified solar system animation using the Wix Animations API.
Advanced
Ball Drop Animation
Create a ball drop animation where balls fall through a maze and dot the letter I’s in your words.
Advanced
Text Microinteractions
Create different microinteractions on 3 text elements using the Wix Animations API.
Intermediate
Hourglass Animation
Flip an hourglass automatically or on a button click using the Wix Animations API.
Advanced