U jednoho z mých klientů jsem řešil způsob, jak zajistit, aby po kliknutí na lottie animaci hamburger menu (nejprve se objevil vyskakovací pop-up s nabídkou menu), následovala plynulá animace, která převede ikonu na křížek. Po dalším kliknutí by se pak opět změnila zpět na hamburger ikonu. Prozkoumal jsem celý internet, ale nenašel jsem vhodné řešení. Nakonec mi však pomohl ChatGPT, který mi upravil kód. Zde je jeho přepracovaná verze kódu, kterou můžete použít.
Užijte si ji!
Před vložením pojmenujte svoji lottie CSS třídou „trigger-on-click„.
<script>
;(w => {
w.addEventListener('elementor/frontend/init', () => {
elementorFrontend.hooks.addAction('frontend/element_ready/lottie.default', $scope => {
if ($scope.hasClass('trigger-on-click')) {
setTimeout(() => {
initListener();
}, 300);
}
const initListener = () => {
const lottie = $scope.find('.e-lottie__animation').data('lottie');
const parent = $scope.parent();
let clickCount = 0;
lottie.setDirection(1);
lottie.stop();
w.lottie = lottie;
parent.click(() => {
clickCount++;
console.info('TOGGLE LOTTIE');
if (clickCount % 2 === 0) {
lottie.setDirection(-1);
lottie.setSpeed(2);
} else {
lottie.setDirection(1);
lottie.setSpeed(2);
}
lottie.play();
});
};
});
});
})(window);
</script>