INTRODUCTION
This site contains153 animations that Acorn posted as it’s far more versatile than those limited within Xara.
I have added copy to clipboard buttons so you can copy the JavaScript to the clipboard.
Animations tend to enter the page i.e. IN whilst the others exit the page i.e OUT. This is why I’ve introduced the icons.
I hope this will help members visualise the multitude of animations available.
A very few I don’t believe are working correctly. If this is the case I’ve added this icon against them.
Egg
UPDATED 08/08/2024
HOME
TUTORIAL
Use these pages to find an animation you’d like to copy to your own webpage. After these page animations stop playing a copy button appears above them. Click the copy button you wish to use. Now in your own Xara web page : 1. Open Web Properties / Page / HTML code (head) 2. Paste in the copied code. It will be similar to: 3. <style>.animated:has(.rwa002) { animation: bounce; }</style> 4. Take note or copy the text within the round brackets, but you don’t need the leading ’.’ 5. Select the shape you wish to apply the animation to. 6. Right click and select Web Animation / Reveal Scroll / Set reveal animation / Fade in 7. Set delay and duration times to whatever’s required. Click Apply 8. Now with the shape still selected hit the Name icon. (Like a luggage tag) 9. Enter the following htmlclass="rwa002" or whatever the characters where in step 4 above. 10. Add & Close 11. Preview your page to check it’s working.
VIDEO TUTORIAL
