← All changes | includes/widgets/Lottie_Animations/script.js +80 -0 51.1.2 → 51.1.86 View file →

		@@ -1,0 +1,80 @@
	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);