Example Description
This example demonstrates how to layer elements on top of each other to create an illusion of a custom button with animation.
How We Built It
Page Elements
In our site we added 2 groups of page elements with the Group 1 layered on top of Group 2:
Group 1: A text element and a pink vector image.
Group 2: Identical text element and vector image shape, but this vector image is white.
Code
In the $w.onReady() function we declare the two groups of page elements. We then create the animation timeline:
Change the opacity of Group 1 to 0, hiding it from the page. Group 2 which is underneath, is shown in its place.
Rotate Group 2 by 360 degrees.
Change the opacity of Group1 back to 1, showing it again on the page.
Last, we added an onClick() event handler to Group 1, to function as a button and trigger the animation when Group 1 is clicked.
Related Examples
Did this help?
|
Thanks for your feedback!
Ball Drop Animation
Create a ball drop animation where balls fall through a maze and dot the letter I’s in your words.
Advanced
Solar System Animation
Create a simplified solar system animation using the Wix Animations API.
Advanced
Vector Image Animation
Create an animation of a ball moving and then taking the place of the letter O’s in your words.
Beginner
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