{"id":2966,"date":"2023-07-24T21:55:22","date_gmt":"2023-07-24T21:55:22","guid":{"rendered":"https:\/\/nkz.studio\/?p=2966"},"modified":"2024-10-31T23:15:18","modified_gmt":"2024-10-31T21:15:18","slug":"lottie-animace-hamburger-menu-se-v-elementoru-reverzne-vrati","status":"publish","type":"post","link":"https:\/\/nkz.studio\/en\/blog\/lottie-animace-hamburger-menu-se-v-elementoru-reverzne-vrati\/","title":{"rendered":"Lottie's hamburger menu animation is reversed in Elementor."},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

How to make the hamburger menu lottie animation in Elementor change to a cross when clicked and back to hamburger when clicked? <\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

For one of my clients, I was troubleshooting a way to make sure that when the hamburger menu lottie animation was clicked (first a pop-up popped up with the menu), a smooth animation would follow that converted the icon to a cross. After another click, it would then change back to the hamburger icon again. I've researched all over the internet but haven't found a suitable solution. Eventually, however, ChatGPT helped me out by modifying the code. Here is his revised version of the code that you can use.\u00a0<\/p>

Enjoy it!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Demonstration<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Before inserting, name your lottie with the CSS class \"trigger-on-click<\/em>\".<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Code to insert into the HTML Element<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t<script>\n;(w => {\n  w.addEventListener('elementor\/frontend\/init', () => {\n    elementorFrontend.hooks.addAction('frontend\/element_ready\/lottie.default', $scope => {\n      if ($scope.hasClass('trigger-on-click')) {\n        setTimeout(() => {\n          initListener();\n        }, 300);\n      }\n\n      const initListener = () => {\n        const lottie = $scope.find('.e-lottie__animation').data('lottie');\n        const parent = $scope.parent();\n        let clickCount = 0;\n\n        lottie.setDirection(1);\n        lottie.stop();\n        w.lottie = lottie;\n\n        parent.click(() => {\n          clickCount++;\n          console.info('TOGGLE LOTTIE');\n          if (clickCount % 2 === 0) {\n            lottie.setDirection(-1);\n            lottie.setSpeed(2);\n          } else {\n            lottie.setDirection(1);\n            lottie.setSpeed(2);\n          }\n          lottie.play();\n        });\n      };\n    });\n  });\n})(window);\n\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Jak ud\u011blat v Elementoru, aby se lottie animace hamburger menu po kliknut\u00ed p\u0159em\u011bnila na k\u0159\u00ed\u017eek a po kliknut\u00ed zp\u011bt na hamburger? U\u00a0jednoho z\u00a0m\u00fdch klient\u016f jsem \u0159e\u0161il zp\u016fsob, jak zajistit, aby po\u00a0kliknut\u00ed na\u00a0lottie animaci hamburger menu (nejprve se\u00a0objevil vyskakovac\u00ed pop-up s\u00a0nab\u00eddkou menu), n\u00e1sledovala plynul\u00e1 animace, kter\u00e1 p\u0159evede ikonu na\u00a0k\u0159\u00ed\u017eek. Po\u00a0dal\u0161\u00edm kliknut\u00ed by se\u00a0pak op\u011bt zm\u011bnila zp\u011bt [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"iawp_total_views":110,"footnotes":""},"categories":[13],"tags":[16],"class_list":["post-2966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-weby-tipy-triky"],"_links":{"self":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts\/2966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/comments?post=2966"}],"version-history":[{"count":13,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts\/2966\/revisions"}],"predecessor-version":[{"id":5784,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts\/2966\/revisions\/5784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/media?parent=2966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/categories?post=2966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/tags?post=2966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}