Wix.com Animations

Wix.com Animations
Wix.com is a cloud based website builder that has become quite successful. When you think of websites created with a drag and drop editor, you don't usually think of animation without plugins. Well, the Wix Editor has some built-in animation features.

All of the animation that we are going to explore are optional but very easy to use. However, Wix does mention that these animations don't run on tablets and other mobile devices. Wix does this to improve the response time of the websites on these devices.

With that out of the way, let's take a look at some of these animations. Each of these animations are added to any object on the webpage, such as text or a graphic. For example, we can add a simple animation to the title on the webpage.

  1. First, select the title object.

  2. From the pop up menu, click on the Animate icon.

    You will get a new pop up window with many animations from which to choose. Just place your cursor over any of the thumbnails, to see a preview of the animation directly in the editor.

    • Bounce-in
    • Glide-in
    • Fade-in
    • Float-in
    • Expand-in
    • Spin-in
    • Fly-in
    • Turn-in
    • Arc-in
    • Puff-in
    • Fold-in
    • Flip-in
    • Reveal
    • Slide-in

  3. Once you have chosen your animation, you can click the Customize button at the bottom of the window. In the new window, you have several settings, depending on your choice of animation.

    You can set the animation to play in several directions on the page.

    • From Top
    • From Center
    • From Bottom
    • From Right
    • From Left

    Duration (in seconds)
    You can use the slider control to increase or decrease the duration. Increasing the duration will slow the animation and decreasing the duration will make the animation run faster.

    Delay (in seconds)
    There may be times when you don't want the animation to play immediately as the page loads. One example of this is when you have several animations that play in a sequence. In this case, you can use the slider control to add a delay before the animation plays on the page. By setting a different delay for each animation, they will appear to play in sequence.

    Only Animate First Time
    By clicking this button, you set the animation to only play when the page loads for the first time. Most of the time, you will want to use this option.

You can also add an animation to a group of objects. Once you have grouped these objects, just add the animation as if the group was a singular object.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.