{"id":30636,"date":"2023-01-16T03:42:03","date_gmt":"2023-01-15T22:12:03","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/"},"modified":"2023-01-16T03:42:03","modified_gmt":"2023-01-15T22:12:03","slug":"solved-multiple-animations-for-1-element-js-css-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/","title":{"rendered":"[Solved] Multiple animations for 1 element JS, CSS [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-46928294\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"46928294\" data-parentid=\"46904108\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<h2>The Issue<\/h2>\n<p>The issue is caused by multiple eventListener&#8217;s being attached to the same object. Specifically:<\/p>\n<ul>\n<li><code>function2<\/code> starts an animation on <code>object2<\/code> and attaches an <code>animationend<\/code> listener to <code>object2<\/code><\/li>\n<li><code>function5<\/code> starts an animation on <code>object2<\/code> and attaches an <code>animationend<\/code> listener to <code>object2<\/code> (the 2nd event listener on <code>object2<\/code>)<\/li>\n<li>when the animation in <code>function5()<\/code> completes the event listeners from <code>function2<\/code> and <code>function5<\/code> are both called<\/li>\n<li>the callback functions from the event listeners in <code>function2<\/code> and <code>function5<\/code> cause new <code>animationend<\/code> events to trigger, causing <code>function3<\/code> and <code>function6<\/code> to be called.<\/li>\n<li>this causes a multiple animation sequences to start, which then multiply<\/li>\n<\/ul>\n<p>I&#8217;ve added some <code>console.log<\/code>s to the demo below to help visualize this.<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>object1 = document.getElementById(\"object1\");\r\nobject2 = document.getElementById(\"object2\");\r\nobject3 = document.getElementById(\"object3\");\r\nobject4 = document.getElementById(\"object4\");\r\nobject5 = document.getElementById(\"object5\");\r\nobject6 = document.getElementById(\"object6\");\r\nobject7 = document.getElementById(\"object7\");\r\nobject8 = document.getElementById(\"object8\");\r\nobject9 = document.getElementById(\"object9\");\r\nobject10 = document.getElementById(\"object10\");\r\n\r\nfunction function1() {\r\n  console.log('animation 1 - start')\r\n  object5.style.animation = \"animation1 2s ease 0s 1 normal forwards running\";\r\n  object5.addEventListener(\"animationend\", function() {\r\n    console.log('animation 1 - end')\r\n    function2()\r\n  });\r\n}\r\n\r\nfunction function2() {\r\n  console.log('animation 2 - start')\r\n  object2.style.animation = \"animation2 2s ease 0s 1 normal forwards running\";\r\n  object2.addEventListener(\"animationend\", function() {\r\n    console.log('animation 2 - end')\r\n    function3()\r\n  });\r\n}\r\n\r\nfunction function3() {\r\n  console.log('animation 3 - start')\r\n  object5.style.animation = \"animation3 2s ease 0s 1 normal forwards running\";\r\n  object5.addEventListener(\"animationend\", function() {\r\n    console.log('animation 3 - end')\r\n    function4()\r\n  });\r\n}\r\n\r\nfunction function4() {\r\n  console.log('animation 4 - start')\r\n  object10.style.animation = \"animation4 2s ease 0s 1 normal forwards running\";\r\n  object10.addEventListener(\"animationend\", function() {\r\n    console.log('animation 4 - end')\r\n    function5()\r\n  });\r\n}\r\n\r\nfunction function5() {\r\n  console.log('animation 5 - start')\r\n  object2.style.animation = \"animation5 2s ease 0s 1 normal forwards running\";\r\n  object2.addEventListener(\"animationend\", function() {\r\n    console.log('animation 5 - end')\r\n    function6()\r\n  });\r\n}\r\n\r\nfunction function6() {\r\n  console.log('animation 6 - start')\r\n  object5.style.animation = \"animation6 2s ease 0s 1 normal forwards running\";\r\n  object5.addEventListener(\"animationend\", function() {\r\n    console.log('animation 6 - end')\r\n    function7()\r\n  });\r\n}\r\n\r\nfunction function7() {\r\n  console.log('animation 7 - start')\r\n  object8.style.animation = \"animation7 2s ease 0s 1 normal forwards running\";\r\n  object8.addEventListener(\"animationend\", function() {\r\n    console.log('animation 7 - end')\r\n    function8()\r\n  });\r\n}\r\n\r\nfunction function8() {\r\n  console.log('animation 8 - start')\r\n  object5.style.animation = \"animation8 2s ease 0s 1 normal forwards running\";\r\n  object5.addEventListener(\"animationend\", function() {\r\n    console.log('animation 8 - end')\r\n    function9()\r\n  });\r\n}\r\n\r\nfunction function9() {\r\n  object4.style.animation = \"animation9 2s ease 0s 1 normal forwards running\";\r\n\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#object1 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: blue;\r\n  float: left;\r\n}\r\n\r\n#object2 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: green;\r\n  float: left;\r\n  animation-iteration-count: 2;\r\n}\r\n\r\n#object3 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: red;\r\n  float: left;\r\n}\r\n\r\n#object4 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: purple;\r\n  float: left;\r\n}\r\n\r\n#object5 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: orange;\r\n  float: left;\r\n}\r\n\r\n#object6 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: brown;\r\n  float: left;\r\n}\r\n\r\n#object7 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: pink;\r\n  float: left;\r\n}\r\n\r\n#object8 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: tomato;\r\n  float: left;\r\n}\r\n\r\n#object9 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: indigo;\r\n  float: left;\r\n}\r\n\r\n#object10 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: mediumspringgreen;\r\n  float: left;\r\n}\r\n\r\n#vacuum {\r\n  height: 200px;\r\n}\r\n\r\n#vacuum2 {\r\n  height: 1000px;\r\n  width: 100px;\r\n  float: left;\r\n}\r\n\r\nbutton {\r\n  height: 50px;\r\n  width: 65px;\r\n  background-color: crimson;\r\n  color: white;\r\n  border-radius: 2px;\r\n  margin-left: 60px;\r\n}\r\n\r\n@keyframes animation1 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  33% {\r\n    transform: translateY(-70px) translateX(0px);\r\n  }\r\n  66% {\r\n    transform: translateY(-70px) translateX(-200px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(-150px);\r\n  }\r\n}\r\n\r\n@keyframes animation2 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n}\r\n\r\n@keyframes animation3 {\r\n  0% {\r\n    transform: translateY(-70px) translateX(-150px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(250px);\r\n  }\r\n}\r\n\r\n@keyframes animation4 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  33% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  66% {\r\n    transform: translateY(70px) translateX(-400px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(-400px);\r\n  }\r\n}\r\n\r\n@keyframes animation5 {\r\n  0% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(70px) translateX(400px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(400px);\r\n  }\r\n}\r\n\r\n@keyframes animation6 {\r\n  0% {\r\n    transform: translateY(-70px) translateX(250px);\r\n  }\r\n  50% {\r\n    transform: translateY(-70px) translateX(200px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(150px);\r\n  }\r\n}\r\n\r\n@keyframes animation7 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n}\r\n\r\n@keyframes animation8 {\r\n  0% {\r\n    transform: translateY(-70px) translateX(-200px);\r\n  }\r\n  50% {\r\n    transform: translateY(-70px) translateX(-150px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(-100px);\r\n  }\r\n}\r\n\r\n@keyframes animation9 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n}\r\n\r\n@keyframes animation10 {\r\n  0% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(70px) translateX(-250px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(-250px);\r\n  }\r\n}\r\n\r\n@keyframes animation11 {\r\n  0% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(70px) translateX(250px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(250px);\r\n  }\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;div id=\"vacuum\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"vacuum2\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object1\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object2\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object3\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object4\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object5\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object6\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object7\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object8\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object9\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object10\"&gt;&lt;\/div&gt;\r\n&lt;button onclick=\"function1()\"&gt;Click Mom :)&lt;\/button&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<h2>The Solution<\/h2>\n<p>The solution is to <code>removeEventListener<\/code>s from the objects to prevent the previous functions from being called when later <code>animationend<\/code> events occur. <\/p>\n<p>For example, to remove the <code>function2<\/code> event listener from <code>object5<\/code>:<\/p>\n<pre><code>function function2() {\n  object5.removeEventListener('animationend', function2);\n  object2.style.animation = \"animation2 2s ease 0s 1 normal forwards running\";\n  object2.addEventListener(\"animationend\", function3);\n}\n<\/code><\/pre>\n<p>Or, if you want to be more general, you can use the <code>event.target.removeEventListener(event.type, arguments.callee)<\/code> format, like:<\/p>\n<pre><code>function function2(event) {\n  event.target.removeEventListener(event.type, arguments.callee);\n  object2.style.animation = \"animation2 2s ease 0s 1 normal forwards running\";\n  object2.addEventListener(\"animationend\", function3);\n}\n<\/code><\/pre>\n<p>Here&#8217;s the working solution:<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>object1 = document.getElementById(\"object1\");\r\nobject2 = document.getElementById(\"object2\");\r\nobject3 = document.getElementById(\"object3\");\r\nobject4 = document.getElementById(\"object4\");\r\nobject5 = document.getElementById(\"object5\");\r\nobject6 = document.getElementById(\"object6\");\r\nobject7 = document.getElementById(\"object7\");\r\nobject8 = document.getElementById(\"object8\");\r\nobject9 = document.getElementById(\"object9\");\r\nobject10 = document.getElementById(\"object10\");\r\n\r\nfunction function1() {\r\n  object5.style.animation = \"animation1 2s ease 1 normal running 0s forwards\";\r\n  object5.addEventListener(\"animationend\", function2);\r\n}\r\n\r\nfunction function2(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object2.style.animation = \"animation2 2s ease 1 normal running 0s forwards\";\r\n  object2.addEventListener(\"animationend\", function3);\r\n}\r\n\r\nfunction function3(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object5.style.animation = \"animation3 2s ease 1 normal running 0s forwards\";\r\n  object5.addEventListener(\"animationend\", function4);\r\n}\r\n\r\nfunction function4(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object10.style.animation = \"animation4 2s ease 1 normal running 0s forwards\";\r\n  object10.addEventListener(\"animationend\", function5);\r\n}\r\n\r\nfunction function5(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object2.style.animation = \"animation5 2s ease 1 normal running 0s forwards\";\r\n  object2.addEventListener(\"animationend\", function6);\r\n}\r\n\r\nfunction function6(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object5.style.animation = \"animation6 2s ease 1 normal running 0s forwards\";\r\n  object5.addEventListener(\"animationend\", function7);\r\n}\r\n\r\nfunction function7(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object8.style.animation = \"animation7 2s ease 1 normal running 0s forwards\";\r\n  object8.addEventListener(\"animationend\", function8);\r\n}\r\n\r\nfunction function8(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object5.style.animation = \"animation8 2s ease 1 normal running 0s forwards\";\r\n  object5.addEventListener(\"animationend\", function9);\r\n}\r\n\r\nfunction function9(e) {\r\n  e.target.removeEventListener(e.type, arguments.callee);\r\n  object4.style.animation = \"animation9 2s ease 1 normal running 0s forwards\";\r\n\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#object1 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: blue;\r\n  float: left;\r\n}\r\n\r\n#object2 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: green;\r\n  float: left;\r\n  animation-iteration-count: 2;\r\n}\r\n\r\n#object3 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: red;\r\n  float: left;\r\n}\r\n\r\n#object4 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: purple;\r\n  float: left;\r\n}\r\n\r\n#object5 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: orange;\r\n  float: left;\r\n}\r\n\r\n#object6 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: brown;\r\n  float: left;\r\n}\r\n\r\n#object7 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: pink;\r\n  float: left;\r\n}\r\n\r\n#object8 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: tomato;\r\n  float: left;\r\n}\r\n\r\n#object9 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: indigo;\r\n  float: left;\r\n}\r\n\r\n#object10 {\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 4px;\r\n  background: mediumspringgreen;\r\n  float: left;\r\n}\r\n\r\n#vacuum {\r\n  height: 200px;\r\n}\r\n\r\n#vacuum2 {\r\n  height: 1000px;\r\n  width: 100px;\r\n  float: left;\r\n}\r\n\r\nbutton {\r\n  height: 50px;\r\n  width: 65px;\r\n  background-color: crimson;\r\n  color: white;\r\n  border-radius: 2px;\r\n  margin-left: 60px;\r\n}\r\n\r\n@keyframes animation1 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  33% {\r\n    transform: translateY(-70px) translateX(0px);\r\n  }\r\n  66% {\r\n    transform: translateY(-70px) translateX(-200px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(-150px);\r\n  }\r\n}\r\n\r\n@keyframes animation2 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n}\r\n\r\n@keyframes animation3 {\r\n  0% {\r\n    transform: translateY(-70px) translateX(-150px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(250px);\r\n  }\r\n}\r\n\r\n@keyframes animation4 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  33% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  66% {\r\n    transform: translateY(70px) translateX(-400px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(-400px);\r\n  }\r\n}\r\n\r\n@keyframes animation5 {\r\n  0% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(70px) translateX(400px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(400px);\r\n  }\r\n}\r\n\r\n@keyframes animation6 {\r\n  0% {\r\n    transform: translateY(-70px) translateX(250px);\r\n  }\r\n  50% {\r\n    transform: translateY(-70px) translateX(200px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(150px);\r\n  }\r\n}\r\n\r\n@keyframes animation7 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n}\r\n\r\n@keyframes animation8 {\r\n  0% {\r\n    transform: translateY(-70px) translateX(-200px);\r\n  }\r\n  50% {\r\n    transform: translateY(-70px) translateX(-150px);\r\n  }\r\n  100% {\r\n    transform: translateY(-70px) translateX(-100px);\r\n  }\r\n}\r\n\r\n@keyframes animation9 {\r\n  0% {\r\n    transform: translateY(0px) translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n}\r\n\r\n@keyframes animation10 {\r\n  0% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(70px) translateX(-250px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(-250px);\r\n  }\r\n}\r\n\r\n@keyframes animation11 {\r\n  0% {\r\n    transform: translateY(70px) translateX(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(70px) translateX(250px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px) translateX(250px);\r\n  }\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;div id=\"vacuum\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"vacuum2\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object1\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object2\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object3\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object4\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object5\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object6\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object7\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object8\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object9\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"object10\"&gt;&lt;\/div&gt;\r\n&lt;button onclick=\"function1()\"&gt;Click Mom :)&lt;\/button&gt;<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">0<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Multiple animations for 1 element JS, CSS [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] The Issue The issue is caused by multiple eventListener&#8217;s being attached to the same object. Specifically: function2 starts an animation on object2 and attaches an animationend listener to object2 function5 starts an animation on object2 and attaches an animationend listener to object2 (the 2nd event listener on object2) when the animation in function5() completes &#8230; <a title=\"[Solved] Multiple animations for 1 element JS, CSS [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\" aria-label=\"More on [Solved] Multiple animations for 1 element JS, CSS [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1346,464,333],"class_list":["post-30636","post","type-post","status-publish","format-standard","hentry","category-solved","tag-animation","tag-css","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Multiple animations for 1 element JS, CSS [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Multiple animations for 1 element JS, CSS [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The Issue The issue is caused by multiple eventListener&#8217;s being attached to the same object. Specifically: function2 starts an animation on object2 and attaches an animationend listener to object2 function5 starts an animation on object2 and attaches an animationend listener to object2 (the 2nd event listener on object2) when the animation in function5() completes ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-15T22:12:03+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Multiple animations for 1 element JS, CSS [closed]\",\"datePublished\":\"2023-01-15T22:12:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\"},\"wordCount\":163,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"animation\",\"css\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\",\"name\":\"[Solved] Multiple animations for 1 element JS, CSS [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-15T22:12:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Multiple animations for 1 element JS, CSS [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Multiple animations for 1 element JS, CSS [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Multiple animations for 1 element JS, CSS [closed] - JassWeb","og_description":"[ad_1] The Issue The issue is caused by multiple eventListener&#8217;s being attached to the same object. Specifically: function2 starts an animation on object2 and attaches an animationend listener to object2 function5 starts an animation on object2 and attaches an animationend listener to object2 (the 2nd event listener on object2) when the animation in function5() completes ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/","og_site_name":"JassWeb","article_published_time":"2023-01-15T22:12:03+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Multiple animations for 1 element JS, CSS [closed]","datePublished":"2023-01-15T22:12:03+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/"},"wordCount":163,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["animation","css","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/","name":"[Solved] Multiple animations for 1 element JS, CSS [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-15T22:12:03+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-multiple-animations-for-1-element-js-css-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Multiple animations for 1 element JS, CSS [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=30636"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30636\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=30636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=30636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=30636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}