anime.js Template Creation
When Connected to the Web
This approach assumes you will be using your Xara design when connected to the Internet:
•
In Web Properties > Website > HTML Code (head), add the following <script> Tag:
o
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-
z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
•
File > Save Template.
Web Free - using a Local Copy of anime.js
This approach will run anime.js animations even when you are not connected to the Internet:
•
Download anime.min.js and save it to a local folder. You then will need to Link to it.
•
Off-page, add some text, say "anime".
•
Link to file > Browse to the downloaded anime.min.js file.
•
In Web Properties > Website > HTML Code (head), add the following <script> Tag instead:
o
<script src="index_htm_files/anime.min.js"></script>
o
What you have done is put anime.min.js into a Support Folder so that your file can acess it as an local, external asset.
•
File > Save Template:
o
You need to re-link "anime" for each new file that you create.
This Animation
In Web Properties > Page > HTML code (body), put:
<script>
var stagger ={
targets: '.acorn',
translateX: anime.stagger(128),
duration: 2400,
delay: 600,
loop: true,
direction: 'alternate',
easing: 'easeInOutElastic',
};
anime(stagger);
</script>