Example Description
In this example we created a simplified solar system animation. Users can click on different buttons to turn certain animations on or off from the solar system. Note that there are some animations that the user can’t turn on or off. The 4 buttons and the animations they trigger are listed below:
Position: Animation of the earth circling around the sun.
Scale: Animation of the earth scaling up and down in size.
Rotation: Animation of the earth and sun rotating in place.
Opacity: Animation of the stars blinking.
How We Built It
Page Elements
In our site we added the following page elements:
3 vector elements to build 3 sets of stars.
2 images for the moon and a copy of the moon.
1 image for the earth.
1 image for the sun.
1 vector image for the orbit.
4 buttons to trigger the different solar system animations.
Code
In the $w.onReady() function we declare all the elements we want to animate, and their measurements. We also make sure to configure the element measurements for mobile devices. We then create the individual animation timelines for each of the animations:
moon_tl: Rotate the moon around the earth. Since we can’t change the order of elements with code, we created two copies of the moon: one located behind the earth, and the other in front of it. We then switch between hiding and showing each one every half turn. To keep the order of elements from changing, we need to turn off an accessibility feature in the Editor by going to Settings -> Accessibility -> Advanced Settings -> and unchecking the “Automatic DOM order” checkbox.
system_tl: We group the earth and two moon images together to create a ‘System’ and rotate the System around the sun. We split the rotation into 4 animation segments and create the illusion of a skewed ellipse by changing the duration, easing, and length of each element.
system_scale_tl: Add a scaling effect on the System.
system_rotation_tl: Add a rotation effect on the earth and sun.
starts_tl: We create a system to blink the stars by assigning the 3 star elements to different opacities and durations. We also use the easeOutBounce easing property for a more dramatic effect.
We also built a helper timeline to handle all our timelines. We then set the state of the 4 animations, and connect them to the relevant timelines. Then we run over all the state timelines and restart or pause them depending on their state.
In the $w.onReady() function we created the constants above and assigned the needed animations to them. We also created a constant object to save the state of the 4 button animations and connect them to the relevant timeline. This is based on a timeline that hides the System, runs changes at the end of the animation, and then shows the System again.
Last, we created onClick() event handlers for the different buttons. Each event handler sets a new state and replays the restart timeline.
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
Hourglass Animation
Flip an hourglass automatically or on a button click 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
Vector Image Animation
Create an animation of a ball moving and then taking the place of the letter O’s in your words.
Beginner