Example Description
In this example, we used the animation-helpers Velo package to easily create popular animations for the elements on our site.
The example includes 4 pages, each one demonstrating a different kind of animation helper function:
Spin animations
Float animations
Zoom animations
Stagger animations
For more information about this Velo Package, please see the Readme in the package folder located in the Code Files section of your site.
How We Built It
We installed the Velo package on our site.
Spin Page
On this page we show 2 kinds of spin animations:
Simple spin: Selects all vector images on the page and spins them.
Interactive spin: Includes an onMouseIn event handler on the roulette element to play the animation when the site visitor hovers over the roulette, and an onMouseOut event handler to pause the animation when the visitor moves away from the roulette.
Float Page
On this page we show 3 kinds of float animations:
Horizontal float: Selects all vector images on the page and floats them horizontally.
Interactive float: Includes an onMouseIn event handler on the text element to play the float animation when the site visitor hovers over the text, and an onMouseOut event handler to pause the animation when the visitor moves away from the text.
Random float: Floats all balls vertically. Then for each ball the function chooses a random distance and duration and floats the ball horizontally according to these random amounts. This creates the random movement effect.
Zoom Page
On this page we show 3 kinds of zoom animations:
Simple zoom: Zooms into the glasses image. We used the setInterval function in order to zoom in again every few seconds.
Zoom by ratio: Selects all Vector Image elements on the page and zooms into them until they’ve expanded by 50% of their ratio. We used the setInterval function in order to zoom in again every few seconds.
Interactive zoom: Includes an onMouseIn event handler on the text element to play the zoom animation when the site visitor hovers over the text, and an onMouseOut event handler to pause the animation when the visitor moves away from the text.
Stagger Page
On this page we show 3 kinds of stagger animations:
Staggered text: Takes a fixed string, splits it into characters and adds each character separately to the text element on the page to create a typing effect. Since adding a blank character to a text element does not show a change, we added logic to check if the previous character is blank. If it is, we add the blank character along with the first character in the next word.
Staggered spin: Selects all the wheel elements and spins them one by one.
Staggered zoom: Selects all the pyramids and zooms into them one by one.
Related Examples
Did this help?
|
Thanks for your feedback!
Image and Text Animation
Use wix-animations API to animate images and text.
Intermediate
Animations Viewer
Use show/hide effects to change the animation applied to an image.
Intermediate