| 1 |
"use strict"; |
| 2 |
(($) => { |
| 3 |
$(window).on("elementor/frontend/init", () => { |
| 4 |
elementorFrontend.hooks.addAction( |
| 5 |
"frontend/element_ready/king-addons-lottie-animations.default", |
| 6 |
($scope) => { |
| 7 |
elementorFrontend.elementsHandler.addHandler( |
| 8 |
elementorModules.frontend.handlers.Base.extend({ |
| 9 |
onInit() { |
| 10 |
// Grab the Lottie wrapper and parse its settings |
| 11 |
const $lottie = this.$element.find(".king-addons-lottie-animations"); |
| 12 |
const settings = JSON.parse($lottie.attr("data-settings") || "{}"); |
| 13 |
|
| 14 |
// Create the Lottie animation |
| 15 |
// noinspection JSUnresolvedReference |
| 16 |
const animation = lottie.loadAnimation({ |
| 17 |
container: $lottie[0], |
| 18 |
path: $lottie.attr("data-json-url"), |
| 19 |
renderer: settings.lottie_renderer, |
| 20 |
loop: settings.loop === "yes", |
| 21 |
autoplay: settings.autoplay === "yes", |
| 22 |
}); |
| 23 |
|
| 24 |
// Set speed and direction if necessary |
| 25 |
animation.setSpeed(settings.speed || 1); |
| 26 |
if (settings.reverse) animation.setDirection(-1); |
| 27 |
|
| 28 |
// Listen for Lottie to be fully loaded |
| 29 |
animation.addEventListener("DOMLoaded", () => { |
| 30 |
// If trigger is not hover or none, initialize scroll behavior |
| 31 |
if (!["hover", "none"].includes(settings.trigger)) { |
| 32 |
updateOnScroll(); |
| 33 |
$(window).on("scroll", updateOnScroll); |
| 34 |
} |
| 35 |
|
| 36 |
// Handle hover trigger |
| 37 |
if (settings.trigger === "hover") { |
| 38 |
animation.pause(); |
| 39 |
$lottie.hover( |
| 40 |
() => animation.play(), |
| 41 |
() => animation.pause() |
| 42 |
); |
| 43 |
} |
| 44 |
}); |
| 45 |
|
| 46 |
// Function to handle viewport or scroll triggers |
| 47 |
const updateOnScroll = () => { |
| 48 |
animation.pause(); |
| 49 |
if (typeof $lottie[0].getBoundingClientRect === "function") { |
| 50 |
const rect = $lottie[0].getBoundingClientRect(); |
| 51 |
const viewportHeight = document.documentElement.clientHeight; |
| 52 |
const scrollTopPercent = (rect.top / viewportHeight) * 100; |
| 53 |
const scrollBottomPercent = (rect.bottom / viewportHeight) * 100; |
| 54 |
// noinspection JSUnresolvedReference |
| 55 |
const inStart = scrollBottomPercent > settings.scroll_start; |
| 56 |
// noinspection JSUnresolvedReference |
| 57 |
const inEnd = scrollTopPercent < settings.scroll_end; |
| 58 |
|
| 59 |
// Viewport trigger |
| 60 |
if (settings.trigger === "viewport") { |
| 61 |
inStart && inEnd ? animation.play() : animation.pause(); |
| 62 |
} |
| 63 |
|
| 64 |
// Scroll trigger |
| 65 |
else if (settings.trigger === "scroll" && inStart && inEnd) { |
| 66 |
const scrollPercent = |
| 67 |
(100 * $(window).scrollTop()) / |
| 68 |
($(document).height() - $(window).height()); |
| 69 |
animation.goToAndStop((Math.round(scrollPercent) / 100) * 4000); |
| 70 |
} |
| 71 |
} |
| 72 |
}; |
| 73 |
}, |
| 74 |
}), |
| 75 |
{$element: $scope} |
| 76 |
); |
| 77 |
} |
| 78 |
); |
| 79 |
}); |
| 80 |
})(jQuery); |
