reverse initial direction of text animation

1 files changed, 5 insertions, 4 deletions

diff --git a/html/index.html b/html/index.html
index 413fac3..6bb87ff 100644
--- a/html/index.html
+++ b/html/index.html
@@ -134,18 +134,19 @@
     const animateLTR = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
     animateLTR.setAttributeNS(null, 'id', 'animateLTR');
     animateLTR.setAttributeNS(null, 'attributeName', 'startOffset');
-    animateLTR.setAttributeNS(null, 'begin', '0s; animateRTL.end');
+    animateLTR.setAttributeNS(null, 'begin', 'animateRTL.end');
     animateLTR.setAttributeNS(null, 'fill', 'freeze');
 
     const animateRTL = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
     animateRTL.setAttributeNS(null, 'id', 'animateRTL');
     animateRTL.setAttributeNS(null, 'attributeName', 'startOffset');
-    animateRTL.setAttributeNS(null, 'begin', 'animateLTR.end');
+    animateRTL.setAttributeNS(null, 'begin', '0s; animateLTR.end');
     animateRTL.setAttributeNS(null, 'fill', 'freeze');
+
     /* envelope icon by Amelia from https://thenounproject.com/icon/envelope-1526185/ under CC-BY-3.0 */
     updateSVG("M82,20.3H18a13,13,0,0,0-13,13V66.7a13,13,0,0,0,13,13H82a13,13,0,0,0,13-13V33.3A13,13,0,0,0,82,20.3Zm-2.2,8L52.1,45.5a4,4,0,0,1-4.2,0L20.2,28.3ZM87,66.7a5,5,0,0,1-5,5H18a5,5,0,0,1-5-5V33.3h0L43.7,52.3a11.9,11.9,0,0,0,12.6,0L87,33.2h0Z");
-    textPath.appendChild(animateLTR);
     textPath.appendChild(animateRTL);
+    textPath.appendChild(animateLTR);
     
     var input = document.getElementById('the_text');
     input.addEventListener("input",
@@ -160,8 +161,8 @@
         (window.getComputedStyle(textPath, null).getPropertyValue('font-size').slice(0,-2))
         * (100/(window.screen.width))
       );
-      textPath.appendChild(animateLTR);
       textPath.appendChild(animateRTL);
+      textPath.appendChild(animateLTR);
     };
 
     var svg_input = document.getElementById('the_svg');