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. o

This Animation

In Web Properties > Page > HTML code (body), put: <script> var stagger ={ targets: '.egg', translateX: anime.stagger(64), duration: 2400, delay: 600, loop: true, direction: 'alternate', easing: 'easeInOutElastic', }; anime(stagger); </script>