JezK
Edit File: entrance-effects.js.map
{"version":3,"file":"entrance-effects.js","mappings":"mBAKA,MAAMA,EAAyBA,KAG3B,MAAMC,EAAmBC,SAASC,iBAAiB,wBAEnD,IAAKF,EAAiBG,OAClB,OAIJ,MAAMC,EAAW,IAAIC,sBAAsBC,IACvCA,EAAQC,SAASC,IACb,GAAIA,EAAMC,eAAgB,CACtB,MAAMC,EAAUF,EAAMG,OAGhBC,EAAgBF,EAAQG,aAAa,sBACrCC,EAAQJ,EAAQG,aAAa,4BAC7BE,EAAUC,SAASF,GAGzBG,YAAW,KACPP,EAAQQ,UAAUC,IAAI,iBAAiBP,IAAgB,GAExDG,GAGHX,EAASgB,UAAUV,EACvB,IACF,GACH,CAECW,UAAW,GAEXC,WAAY,sBAIhBtB,EAAiBO,SAASG,IACtBN,EAASmB,QAAQb,EAAQ,GAC3B,EAIsB,YAAxBT,SAASuB,WACTvB,SAASwB,iBAAiB,mBAAoB1B,GAE9CA,IAIJ,MAAM2B,EAAyB,IAAIC,YAAY,oBAAqB,CAChEC,OAAQ,CACJC,KAAMA,KACF9B,GAAwB,KAMpC+B,OAAOJ,uBAAyBA,C","sources":["webpack://athemes-blocks/./assets/js/src/animation/entrance-effects.js"],"sourcesContent":["'use strict';\r\n\r\n/**\r\n * Initialize entrance animations using Intersection Observer\r\n */\r\nconst initEntranceAnimations = () => {\r\n\r\n // Get all elements with animation delay attribute\r\n const animatedElements = document.querySelectorAll('[data-atb-animation]');\r\n\r\n if (!animatedElements.length) {\r\n return;\r\n }\r\n\r\n // Create Intersection Observer\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry) => {\r\n if (entry.isIntersecting) {\r\n const element = entry.target;\r\n \r\n // Get animation delay from data attribute\r\n const animationName = element.getAttribute('data-atb-animation');\r\n const delay = element.getAttribute('data-atb-animation-delay');\r\n const delayMs = parseInt(delay);\r\n\r\n // Add animated class after the specified delay\r\n setTimeout(() => {\r\n element.classList.add(`atb-animation-${animationName}`);\r\n // element.classList.add('animated');\r\n }, delayMs);\r\n\r\n // Unobserve the element after animation starts\r\n observer.unobserve(element);\r\n }\r\n });\r\n }, {\r\n // Start animation when element is 20% visible\r\n threshold: 0.2,\r\n // Add some margin to start animation slightly before element is fully in view\r\n rootMargin: '0px 0px -50px 0px'\r\n });\r\n\r\n // Observe all animated elements\r\n animatedElements.forEach((element) => {\r\n observer.observe(element);\r\n });\r\n};\r\n\r\n// Initialize animations when DOM is loaded\r\nif (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initEntranceAnimations);\r\n} else {\r\n initEntranceAnimations();\r\n}\r\n\r\n// Create a custom event for triggering animations on new elements.\r\nconst triggerAnimationsEvent = new CustomEvent('triggerAnimations', {\r\n detail: {\r\n init: () => {\r\n initEntranceAnimations();\r\n }\r\n }\r\n});\r\n\r\n// usage: window.triggerAnimationsEvent.detail.init();\r\nwindow.triggerAnimationsEvent = triggerAnimationsEvent;\r\n\r\n"],"names":["initEntranceAnimations","animatedElements","document","querySelectorAll","length","observer","IntersectionObserver","entries","forEach","entry","isIntersecting","element","target","animationName","getAttribute","delay","delayMs","parseInt","setTimeout","classList","add","unobserve","threshold","rootMargin","observe","readyState","addEventListener","triggerAnimationsEvent","CustomEvent","detail","init","window"],"sourceRoot":""}