There is no doubt that animations are fascinating: they attract attention and, if they are well done, they make web pages more interesting.

With software like WebAnimator, everyone can create great animations: no programming is required. WebAnimator uses timelines and keyframes and includes special effects and pre-set live animations. And it has lots of other features that guarantee splendid results. But the most interesting thing about WebAnimator is that it uses HTML5, CSS and JavaScript to create the animations: there is no Flash, and this means the end-result is lighter and, above all, compatible with all the latest browsers and mobile devices, including iPhones and iPads.

If you haven’t already done so, we suggest you download the trial version of WebAnimator: you’ll have 14 days to try it out. You’ll find the download link on WebAnimator’s official website, http://www.webanimator.com

Once you’ve created an animation with WebAnimator, how can you add it to a page in the website you’ve created with WebSite X5?

The procedure is actually quite simple, and it’s explained in detail in our FAQ, “How to insert a WebAnimator HTML5 animation in WebSite X5” [ https://helpcenter.websitex5.com/post/102409 ], but now, thanks to the new optional object that is included in WebSite X5 release 11.0.2.13, it’s even easier and quicker.

Preparing the animation in WebAnimator

Start WebAnimator and create the animation that you want to insert in your web site. Save your work with a suitable name (for example WA_Animation), then click on Export in HTML5, which you can see in the menu bar, and then choose the folder to export the animation to. Click on Ok to start exporting it.

WebAnimator creates an HTML file that contains the animation (for example WA_Animation.html) and a separate folder (for example WA_Animation_resources) that contains pictures, script, etc. It saves both of these in the destination folder you selected.

Adding the animation to WebSite X5

Before you continue, make sure you are working with the latest version of WebSite X5. Remember that, if an update is available, a notice to this effect is displayed on the program’s Start Page. Alternatively, you can always find the latest updates in the “My downloads” page of your profiles in Answers.

When you’re certain you have the latest version, open your project, go to Step 3 and open the page you want to add the WebAnimator animation to.

Click on the  button to open the Object Management window: select the WebAnimator Animation object that is under Widgets. Click on the Free/Install button and type in the password that you use for logging into Answers. Now the object is installed: if you go back to the Page Creation window, you’ll see its name added to the list of available objects under Widgets.

Now select the WebAnimator Animation object and drag it to a cell in the page layout table, then double-click to open the settings page.

Click on the Add button and select the files in the animation resources folder that you exported with WebAnimator (WA_Animation_resources in our example) and then give the dimensions of the animation. Now, all you have to do is click Ok and have a look at the offline preview to check the result.

The WebAnimator Animation object is one of the latest optional objects we have developed, and we will be developing others as well, so remember to keep an eye on the list and install any new ones that could be useful for your work. Happy animating!

-------------------------------------------------------------------

For information on this subject, see also:

• How to insert a WebAnimator HTML5 animation in WebSite X5 [https://helpcenter.websitex5.com/post/102409 ]
• How to insert a WebAnimator HTML5 animation in the header/footer of a web page created with WebSite X5 [https://helpcenter.websitex5.com/post/108794 ]