Well-developed and appropriately-placed animations can make a web page very attractive but remember, too many can be distracting, so don’t overdo it.

Thanks to WebAnimator, it’s now easy and quick to create the right animations for web sites and online stores: because they use HTML5, CSS and JavaScript, and not Flash, they are lighter and, above all, compatible with all the latest browsers and mobile devices, including iPhones and iPads.

The HTML5 animations that you create with WebAnimator can be integrated into sites created with WebSite X5 with ease. If you want to add them as page content, you can use the HTML object (see our FAQ “How to insert a WebAnimator HTML5 animation in WebSite X5” [https://helpcenter.websitex5.com/post/102409 ]), or the WebAnimator Animation optional object (see our FAQ “How to insert a WebAnimator HTML5 animation in WebSite X5 using the WebAnimator Animation object” [https://helpcenter.websitex5.com/post/108793 ]).

Another possibility is to use the animations created with WebAnimator to customize the header or footer of the website’s template. Follow the procedure below to do this:

1. Create the animation with WebAnimator and save it with an appropriate name (for example WA_Animation).

2. Export the animation from WebAnimator to an empty folder (for example C:\WA_Project).

3. Start WebSite X5, open the project you want to work on and go to the Custom Template window in Step 1.

4. Click on the Insert HTML code button and add the following lines of HTML code:

If you have saved your animation with a name that is different to our example above, remember to replace the “WA_Animation” name with yours.

The HTML object must have the same height as the animation in WebAnimator. These settings can be changed in the project properties in WebAnimator.

5. Now go to Step 4 – Advanced Settings and click on Statistics, SEO and Code. Open the Expert section and click on Add to import all the files that are in the C:\WA_Project\WA_Animation_resources folder, so that they will all be attached. Check that the server path is WA_Animation_resources. Only for the "jquery-1.7.min.js" file, select Link the file (.js and .css files only). This makes sure that all the necessary files are attached so that the animation works properly.

Now you can confirm everything and click on the Preview button to check that your animation works correctly.

Happy animating!

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

For information on this subject, see also:

• How to insert a WebAnimator HTML5 animation in WebSite X5 [https://helpcenter.websitex5.com/post/102904 ]
• How to insert a WebAnimator HTML5 animation in WebSite X5 using the WebAnimator Animation object [https://helpcenter.websitex5.com/post/108793 ]