@total_onion/onion-library 1.0.0

package/components/block-animated-sections/animated-sections.js

@@ -0,0 +1,1642 @@
+import {getGsap, getSwiperAssetsV2} from '@pernod-ricard-global-cms/jsutils';
+import('swiper/css/bundle');
+
+export default function animatedsectionsJs(options = {}) {
+	try {
+		const {block} = options;
+		Promise.all([getGsap(), getSwiperAssetsV2()]).then((results) => {
+			// Modules and Libraries
+			const gsap = results[0][0];
+			const {
+				Swiper,
+				Navigation,
+				Pagination,
+				Lazy,
+				Autoplay,
+				EffectFade,
+				EffectCreative
+			} = results[1][0];
+
+			//Flags
+			const MOBILE_BREAKPOINT = 768; //px
+
+			// Dom Declarations
+			let foregroundElements;
+			let backgroundElements;
+			let timelineElements;
+
+			if (window.innerWidth <= MOBILE_BREAKPOINT) {
+				foregroundElements = Array.from(
+					block.querySelectorAll(
+						'.animated-sections__foreground-element--mobile'
+					)
+				);
+				backgroundElements = Array.from(
+					block.querySelectorAll(
+						'.animated-sections__background-element--mobile'
+					)
+				);
+				timelineElements = block.querySelectorAll(
+					'.animated-sections__timeline--tablet-mobile'
+				);
+			} else {
+				foregroundElements = Array.from(
+					block.querySelectorAll(
+						'.animated-sections__foreground-element--desktop'
+					)
+				);
+				backgroundElements = Array.from(
+					block.querySelectorAll(
+						'.animated-sections__background-element--desktop'
+					)
+				);
+				timelineElements = block.querySelectorAll(
+					'.animated-sections__timeline--desktop'
+				);
+			}
+
+			const allElements = [...backgroundElements, ...foregroundElements];
+
+			// DOM Constants
+			const siteHeader = document.getElementsByTagName('header')[0];
+			const elementCanvas = block.querySelector(
+				'.animated-sections__canvas-inner'
+			);
+			const contentElements = block.querySelectorAll(
+				'.animated-sections__content-element'
+			);
+			const contentButtons = document.querySelectorAll(
+				'[data-content-button]'
+			);
+			const backButton = block.querySelector(
+				'.animated-sections__ui-element-back-button'
+			);
+			const nextButton = block.querySelector(
+				'.animated-sections__ui-element-down-arrow'
+			);
+			const swiperWrapper = document.querySelector(
+				'.animated-sections__swiper-content-wrapper'
+			);
+			const swiperOverlay = document.querySelector(
+				'.animated-sections__swiper-content-overlay'
+			);
+			const timelineNavWrapper = document.querySelector(
+				'.animated-sections__ui-element-timeline-nav-wrapper'
+			);
+			const dots = document.querySelectorAll(
+				'.animated-sections__ui-element-timeline-dot'
+			);
+			const menuItems = document.querySelectorAll(
+				'.animated-sections__ui-element-timeline-name'
+			);
+			const scrollBar = block.querySelector(
+				'.animated-sections__progress-bar'
+			);
+			// const uiElementsContainer = block.querySelector(
+			// 	'.animated-sections__ui-elements'
+			// );
+
+			// Constants
+			const figmaDesktopHeight = parseFloat(block.dataset.desktopHeight);
+			const figmaDesktopWidth = parseFloat(block.dataset.desktopWidth);
+			const figmaMobileHeight = parseFloat(block.dataset.mobileHeight);
+			const figmaMobileWidth = parseFloat(block.dataset.mobileWidth);
+
+			const figmaTransformOrigin = block.dataset.transformOrigin;
+
+			const swiperEnabled = block.dataset.swiperEnabled;
+
+			// Variable Declarations
+			let timelines = [];
+			let allNavTimelines = [];
+			let lastTime = null;
+			let scrollAmount = 0;
+			let lastScrollTop = 0;
+			let forwardPlaybackHistory = [];
+
+			let touchStartY = 0;
+			let touchEndY = 0;
+			let scrollVelocity = 0;
+			let isDecelerating = false;
+			let lastTouchY = 0;
+			let isTouching = false;
+
+			const state = {
+				currentTimelineIndex: 0,
+				canSwipe: true,
+				timelinesVisited: false,
+				lastSwipeFalseTime: 0
+			};
+
+			const SwiperManager = {
+				swiper: null,
+				init: function () {
+					this.swiper = new Swiper('.swiper-container', {
+						modules: [
+							Navigation,
+							Pagination,
+							Lazy,
+							Autoplay,
+							EffectFade,
+							EffectCreative
+						],
+						pagination: {
+							el: '.animated-sections .swiper-pagination',
+							clickable: true
+						},
+						allowTouchMove: false,
+						effect: 'creative',
+						speed: 1000,
+						creativeEffect: {
+							prev: {
+								opacity: 0
+							},
+							next: {
+								opacity: 0
+							}
+						},
+						on: {
+							init: function () {
+								const swiperSlides = this.slides;
+								swiperSlides.forEach((slide) => {
+									const overlayColor = slide.dataset.color;
+									swiperOverlay.className = '';
+									swiperOverlay.classList.add(
+										'animated-sections__swiper-content-overlay'
+									);
+									swiperOverlay.classList.add(
+										'animated-sections__swiper-content-overlay--' +
+											overlayColor
+									);
+								});
+							}
+						}
+					});
+				},
+				initSwiperPaginationListener: function () {
+					this.swiper.pagination.el.addEventListener('click', (e) => {
+						if (!getState('canSwipe')) {
+							return;
+						}
+						if (
+							e.target.classList.contains(
+								'swiper-pagination-bullet'
+							)
+						) {
+							const index = [
+								...this.swiper.pagination.el.childNodes
+							].indexOf(e.target);
+							const targetStepIndex =
+								parseInt(
+									this.swiper.slides[index].dataset.slideId
+								) - 1;
+							const currentStepIndex = getState(
+								'currentTimelineIndex'
+							);
+							const stepDifference =
+								targetStepIndex - currentStepIndex;
+
+							if (
+								Math.abs(stepDifference) > 1 ||
+								Math.abs(stepDifference) < -1
+							) {
+								TimelineManager.fadeToBlack(() => {
+									TimelineManager.navigateToTimeline(
+										targetStepIndex
+									);
+								});
+							} else if (Math.abs(stepDifference) == 0) {
+								return;
+							} else {
+								TimelineManager.changeTimeline(stepDifference);
+							}
+						}
+					});
+				}
+			};
+			const TimelineManager = {
+				createTimelinesAndNavigation: function () {
+					timelineElements.forEach((step, index) => {
+						const animation = step.dataset.animation;
+						const animationObj = JSON.parse(animation);
+						const tweens = this.createTweens(animationObj);
+						const timeline = new TimelineLite({paused: true});
+
+						timeline.add(tweens);
+						timelines[index] = timeline;
+					});
+				},
+				createTweens: function (animationObj) {
+					const {
+						widthRatio,
+						heightRatio,
+						scaleFactorWidth,
+						scaleFactorHeight
+					} = this.getFigmaDimensions();
+
+					return allElements
+						.map((elm) => {
+							const obj = animationObj.find(
+								(o) => o.name === elm.dataset.assetName
+							);
+							if (obj) {
+								if (figmaTransformOrigin == '__top-left') {
+									return TweenLite.to(elm, {
+										x: obj.x,
+										y: obj.y,
+										scaleX: obj.width / elm.width,
+										scaleY: obj.height / elm.height,
+										opacity: obj.opacity,
+										duration: obj.duration,
+										backfaceVisibility: {
+											visible: false
+										}
+									});
+								} else if (figmaTransformOrigin == '__center') {
+									return TweenLite.to(elm, {
+										x:
+											obj.x *
+											widthRatio *
+											scaleFactorWidth,
+										y:
+											obj.y *
+											heightRatio *
+											scaleFactorHeight,
+										scale: Math.min(
+											obj.width,
+											obj.height,
+											scaleFactorWidth,
+											scaleFactorHeight
+										),
+										opacity: obj.opacity,
+										duration: obj.duration,
+										backfaceVisibility: {
+											visible: false
+										}
+									});
+								}
+
+								return TweenLite.to(elm, {
+									x: newX,
+									y: newY,
+									scaleX: obj.width / elm.width,
+									scaleY: obj.height / elm.height,
+									opacity: obj.opacity,
+									duration: obj.duration,
+									// display: displayValue,
+									backfaceVisibility: {
+										visible: false
+									}
+								});
+							}
+
+							return null;
+						})
+						.filter((tween) => tween !== null);
+				},
+				animationFrame: function (now) {
+					if (!lastTime) {
+						lastTime = now;
+					}
+					const deltaTime = now - lastTime;
+					if (deltaTime >= 16) {
+						timelines[getState('currentTimelineIndex')].time(
+							timelines[getState('currentTimelineIndex')].time() +
+								deltaTime / 1000
+						);
+						lastTime = now;
+					}
+					requestAnimationFrame(animationFrame);
+				},
+				changeTimeline: function (timelineIndex) {
+					if (!getState('canSwipe')) {
+						return;
+					}
+					setState('canSwipe', false);
+
+					const currentTimelineIndex = getState(
+						'currentTimelineIndex'
+					);
+					const nextTimelineIndex =
+						currentTimelineIndex + timelineIndex;
+					const isMovingBackwards = timelineIndex < 0;
+					const currentTimeline = timelines[currentTimelineIndex];
+
+					const tweensElements = currentTimeline.getChildren();
+
+					let tweenElementType;
+
+					tweensElements.forEach((tween) => {
+						tween._targets.forEach((target) => {
+							if (target.tagName == 'IMG') {
+								tweenElementType = 'IMAGE';
+							} else if (target.tagName == 'VIDEO') {
+								tweenElementType = 'VIDEO';
+							}
+						});
+					});
+
+					const nextTimeline = timelines[nextTimelineIndex];
+					if (
+						nextTimelineIndex >= 0 &&
+						nextTimelineIndex < timelineElements.length
+					) {
+						if (isMovingBackwards) {
+							if (window.innerWidth <= MOBILE_BREAKPOINT) {
+								currentTimeline.pause();
+								setTimeout(() => {
+									currentTimeline.reverse();
+								}, 1000);
+
+								setState(
+									'currentTimelineIndex',
+									parseInt(nextTimelineIndex)
+								);
+
+								setTimeout(() => {
+									this.updateToNextTimeline();
+								}, 100);
+								VideoUtils.playReverseVideo(
+									parseInt(nextTimelineIndex),
+									() => {
+										allElements.forEach(
+											(elm) =>
+												(elm.style.display = 'block')
+										);
+										nextTimeline.play();
+									}
+								);
+							} else {
+								if (tweenElementType == 'VIDEO') {
+									currentTimeline.pause();
+									setTimeout(() => {
+										currentTimeline.reverse();
+									}, 1000);
+
+									setState(
+										'currentTimelineIndex',
+										parseInt(nextTimelineIndex)
+									);
+									setTimeout(() => {
+										this.updateToNextTimeline();
+									}, 100);
+									VideoUtils.playReverseVideo(
+										parseInt(nextTimelineIndex),
+										() => {
+											allElements.forEach(
+												(elm) =>
+													(elm.style.display =
+														'block')
+											);
+											nextTimeline.play();
+										}
+									);
+								} else if (tweenElementType == 'IMAGE') {
+									currentTimeline.pause();
+									currentTimeline.reverse();
+									setState(
+										'currentTimelineIndex',
+										parseInt(nextTimelineIndex)
+									);
+									this.updateToNextTimeline();
+									nextTimeline.play();
+								}
+							}
+						} else {
+							if (tweenElementType == 'VIDEO') {
+								setState(
+									'currentTimelineIndex',
+									parseInt(nextTimelineIndex)
+								);
+
+								VideoUtils.handleVideoForward(false, () => {
+									setTimeout(() => {
+										this.updateToNextTimeline();
+									}, 100);
+
+									currentTimeline.pause();
+									nextTimeline.play(0);
+								});
+							} else if (tweenElementType == 'IMAGE') {
+								setState(
+									'currentTimelineIndex',
+									parseInt(nextTimelineIndex)
+								);
+								this.updateToNextTimeline();
+								currentTimeline.pause();
+								nextTimeline.play(0);
+							}
+						}
+					}
+
+					//Temporary Scroll Out Approach
+					if (nextTimelineIndex === timelines.length - 1) {
+						if (block.dataset.enableScrollOut == 1) {
+							setTimeout(() => {
+								setState('timelinesVisited', true);
+								TouchScrollEventManager.removeScrollLockScreen();
+								smoothScrollToTarget(block.nextElementSibling);
+							}, block.dataset.scrollOutDelay * 1000);
+						}
+					}
+
+					setTimeout(() => {
+						if (nextTimelineIndex === timelineElements.length - 1) {
+							return;
+						}
+						setState('canSwipe', true);
+					}, 3000);
+				},
+				fadeToBlack: function (callback) {
+					let overlay = block.querySelector(
+						'.animated-sections__transition-overlay'
+					);
+					overlay.classList.add('active');
+					setTimeout(() => {
+						callback();
+						setTimeout(() => {
+							overlay.classList.remove('active');
+						}, 1000);
+					}, 500);
+				},
+				rebuildTweens: function () {
+					this.createTimelinesAndNavigation();
+					this.navigateToTimeline(getState('currentTimelineIndex'));
+				},
+				getFigmaDimensions: function () {
+					let figmaWidth,
+						figmaHeight,
+						widthRatio,
+						heightRatio,
+						scaleFactorWidth,
+						scaleFactorHeight;
+
+					let actualCanvasWidth = elementCanvas.offsetWidth;
+					let actualCanvasHeight = elementCanvas.offsetHeight;
+
+					if (window.innerWidth <= MOBILE_BREAKPOINT) {
+						figmaWidth = figmaMobileWidth;
+						figmaHeight = figmaMobileHeight;
+					} else {
+						figmaWidth = figmaDesktopWidth;
+						figmaHeight = figmaDesktopHeight;
+					}
+
+					widthRatio = actualCanvasWidth / figmaWidth;
+					heightRatio = actualCanvasHeight / figmaHeight;
+
+					scaleFactorWidth = actualCanvasWidth / figmaWidth;
+					scaleFactorHeight = actualCanvasHeight / figmaHeight;
+
+					return {
+						figmaWidth,
+						figmaHeight,
+						widthRatio,
+						heightRatio,
+						scaleFactorWidth,
+						scaleFactorHeight
+					};
+				},
+				navigateToTimeline: function (index) {
+					if (index >= 0 && index < timelineElements.length) {
+						timelines.forEach((timeline) => timeline.pause());
+						const increment =
+							index - getState('currentTimelineIndex');
+						this.changeTimeline(increment);
+					} else {
+						this.changeTimeline(index);
+					}
+				},
+				updateToNextTimeline: function () {
+					ContentManager.contentFrame();
+
+					if (swiperEnabled == 'true') {
+						this.handleSwiper(getState('currentTimelineIndex'));
+						ContentManager.swiperFrame();
+					}
+
+					createBackButton(getState('currentTimelineIndex'));
+					// updateUrl('currentTimelineIndex');
+					this.timelineNavUpdateNavigation(
+						getState('currentTimelineIndex')
+					);
+				},
+				timelineNavUpdateNavigation: function (timelineIndex) {
+					dots.forEach((dot, index) => {
+						dot.classList.toggle('active', index === timelineIndex);
+
+						if (
+							dot.classList.contains(
+								'hide_from_timeline_navigation'
+							)
+						) {
+							dot.remove();
+						} else {
+							dot.style.display = 'block';
+						}
+					});
+
+					menuItems.forEach((name, index) => {
+						if (!name) {
+							console.error(
+								"Error: Found undefined 'menuItem' at index",
+								index
+							);
+						} else {
+							name.classList.toggle(
+								'selected',
+								index === timelineIndex
+							);
+							name.style.display =
+								index === timelineIndex ||
+								index === timelineIndex - 1 ||
+								(index === timelineIndex + 1 &&
+									timelineIndex !== menuItems.length - 1)
+									? 'flex'
+									: 'none';
+						}
+					});
+
+					if (timelineNavWrapper && dots[timelineIndex]) {
+						timelineNavWrapper.style.opacity = dots[
+							timelineIndex
+						].classList.contains('hide_from_timeline_navigation')
+							? 0
+							: 'var(--timeline-nav-opacity)';
+					}
+				},
+				handleSwiper: function () {
+					const swiperSlides = SwiperManager.swiper.slides;
+					swiperSlides.forEach((slide) => {
+						if (
+							parseInt(slide.dataset.slideId) ===
+							getState('currentTimelineIndex')
+						) {
+							SwiperManager.swiper.slideTo(slide.currentIndex);
+							const overlayColor = slide.dataset.color;
+							swiperOverlay.className = '';
+							swiperOverlay.classList.add(
+								'animated-sections__swiper-content-overlay'
+							);
+							swiperOverlay.classList.add(
+								'animated-sections__swiper-content-overlay--' +
+									overlayColor
+							);
+						}
+					});
+				}
+			};
+			const VideoUtils = {
+				calculateSeconds: function (timeString, defaultSeconds = 0) {
+					if (timeString) {
+						let timeParts = timeString.split(':');
+						return (
+							parseInt(timeParts[0]) * 60 + parseInt(timeParts[1])
+						);
+					}
+					return defaultSeconds;
+				},
+				pauseAllVideos: function () {
+					allElements.forEach((elm) => {
+						if (elm.tagName === 'VIDEO') {
+							elm.pause();
+						}
+					});
+				},
+				saveVideoData: function () {
+					const videoElementData = [];
+
+					timelineElements.forEach((step, index) => {
+						const stepData = {
+							stepIndex: index,
+							videoElements: []
+						};
+
+						allElements.forEach((elm) => {
+							const animation = step.dataset.animation;
+							const animationObj = JSON.parse(animation);
+							const obj = animationObj.find(
+								(o) => o.name === elm.dataset.assetName
+							);
+
+							if (obj) {
+								let animationName = obj.name;
+								let animationUrl = elm.src;
+
+								let isLoaded = elm.dataset.isLoaded === 'true';
+
+								stepData.videoElements.push({
+									name: animationName,
+									autoplay: obj.autoplay,
+									url: animationUrl,
+									startpos: obj.startpos,
+									loop: obj.loop,
+									endpos: obj.endpos,
+									reversevideo: obj.reversevideo,
+									activevideo: obj.enable_video_slide,
+									isLoaded: isLoaded
+								});
+							}
+						});
+
+						videoElementData.push(stepData);
+					});
+
+					return videoElementData;
+				},
+				addVideoSource: function (videoElement, sourceUrl, type) {
+					let source = document.createElement('source');
+					source.src = sourceUrl;
+					source.type = type;
+					videoElement.appendChild(source);
+				},
+				handleVideoForward: function (fromReverse = false, callback) {
+					this.pauseAllVideos();
+					let nestedVideoData = this.saveVideoData();
+					let currentStepData =
+						nestedVideoData[getState('currentTimelineIndex')];
+
+					if (currentStepData && currentStepData.videoElements) {
+						allElements.forEach(async (element) => {
+							let foundElement =
+								currentStepData.videoElements.find(
+									(data) =>
+										element.dataset.assetName === data.name
+								);
+
+							if (foundElement) {
+								let videoElement;
+								if (foundElement.autoplay) {
+									videoElement = allElements.find(
+										(el) =>
+											el.dataset.assetName ===
+											foundElement.name
+									);
+
+									if (videoElement) {
+										videoElement.loop = foundElement.loop;
+										videoElement.muted = true;
+										videoElement._currentAnimation =
+											foundElement.name;
+
+										if (
+											videoElement.currentSrc !==
+											foundElement.url
+										) {
+											videoElement.load();
+										}
+
+										videoElement.onloadeddata = () => {
+											if (foundElement.autoplay) {
+												if (
+													videoElement.readyState >= 2
+												) {
+													setTimeout(() => {
+														videoElement.play();
+													}, 250);
+												}
+											}
+
+											if (
+												typeof callback === 'function'
+											) {
+												callback();
+											}
+										};
+
+										videoElement.ontimeupdate = () => {
+											let secondsEnd =
+												this.calculateSeconds(
+													foundElement.endpos,
+													videoElement.duration
+												);
+											if (
+												videoElement.currentTime >=
+												secondsEnd
+											) {
+												if (foundElement.loop) {
+													videoElement.currentTime =
+														this.calculateSeconds(
+															foundElement.startpos
+														);
+												} else {
+													videoElement.pause();
+												}
+											}
+										};
+
+										if (fromReverse) {
+											this.setVideoToEnd(videoElement);
+										}
+									}
+								}
+							}
+						});
+					}
+				},
+				playReverseVideo: function (timelineIndex, callback) {
+					let nestedVideoData = this.saveVideoData();
+					let relevantStepData = nestedVideoData[timelineIndex + 1];
+
+					let activeVideoElement =
+						relevantStepData.videoElements.find(
+							(ve) => ve.autoplay
+						);
+
+					if (activeVideoElement) {
+						let originalVideoElement;
+						if (window.innerWidth >= MOBILE_BREAKPOINT) {
+							originalVideoElement = document.querySelector(
+								`.animated-sections__foreground-element--desktop[data-asset-name="${activeVideoElement.name}"]`
+							);
+						} else {
+							originalVideoElement = document.querySelector(
+								`.animated-sections__foreground-element--mobile[data-asset-name="${activeVideoElement.name}"]`
+							);
+						}
+						let reverseVideoElement = document.querySelector(
+							`[data-asset-name="${activeVideoElement.name}_reverse"]`
+						);
+
+						if (reverseVideoElement && originalVideoElement) {
+							let computedStyle =
+								window.getComputedStyle(originalVideoElement);
+							for (let key of computedStyle) {
+								reverseVideoElement.style[key] =
+									computedStyle[key];
+							}
+
+							reverseVideoElement.style.opacity = '1';
+							reverseVideoElement.style.visibility = 'visible';
+							reverseVideoElement.muted = true;
+							reverseVideoElement.autoplay = true;
+							reverseVideoElement.load();
+							reverseVideoElement.onloadedmetadata = () => {
+								reverseVideoElement.currentTime = 0;
+								reverseVideoElement.play();
+								allElements.forEach(
+									(elm) => (elm.style.display = 'none')
+								);
+								this.handleVideoForward(true);
+							};
+
+							reverseVideoElement.onended = () => {
+								reverseVideoElement.style.visibility = 'hidden';
+								originalVideoElement.currentTime = 0;
+
+								if (typeof callback === 'function') {
+									callback();
+								}
+							};
+						} else {
+							if (typeof callback === 'function') {
+								callback();
+							}
+						}
+					}
+				},
+				setVideoToEnd: function (videoElement) {
+					return new Promise((resolve, reject) => {
+						if (!videoElement)
+							return reject('Video element not provided');
+
+						const setEndPosition = () => {
+							if (videoElement.seekable.length === 0) {
+								setTimeout(setEndPosition, 100);
+							} else {
+								videoElement.currentTime = Math.max(
+									0,
+									videoElement.duration - 0.1
+								);
+								resolve();
+							}
+						};
+
+						setEndPosition();
+					});
+				},
+				preloadAllVideoSources: function () {
+					let nestedVideoData = this.saveVideoData();
+					let timelineIndex = getState('currentTimelineIndex');
+
+					if (nestedVideoData[timelineIndex]) {
+						let stepData = nestedVideoData[timelineIndex];
+
+						if (stepData && stepData.videoElements) {
+							stepData.videoElements.forEach((videoData) => {
+								let videoElement;
+								if (window.innerWidth >= MOBILE_BREAKPOINT) {
+									videoElement = document.querySelector(
+										`.animated-sections__foreground-element--desktop[data-asset-name="${videoData.name}"]`
+									);
+								} else {
+									videoElement = document.querySelector(
+										`.animated-sections__foreground-element--mobile[data-asset-name="${videoData.name}"]`
+									);
+								}
+
+								if (videoElement) {
+									if (
+										videoElement &&
+										videoElement.dataset.originalSource
+									) {
+										if (isSafari()) {
+											let safariSource =
+												videoElement.dataset
+													.safariSource;
+											if (safariSource) {
+												this.addVideoSource(
+													videoElement,
+													safariSource,
+													'video/mp4; codecs="hvc1"'
+												);
+											}
+										} else {
+											let sourceType =
+												videoElement.dataset.originalSource.endsWith(
+													'.webm'
+												)
+													? 'video/webm'
+													: 'video/mp4';
+											this.addVideoSource(
+												videoElement,
+												videoElement.dataset
+													.originalSource,
+												sourceType
+											);
+										}
+									}
+
+									if (
+										videoElement &&
+										videoElement.dataset.reverseSource
+									) {
+										let reverseElement =
+											document.createElement('video');
+										reverseElement.muted = true;
+										reverseElement.dataset.assetName =
+											videoData.name + '_reverse';
+										reverseElement.preload = 'auto';
+										reverseElement.style.opacity = '0';
+										reverseElement.playsInline = true;
+										reverseElement.setAttribute(
+											'muted',
+											''
+										);
+										reverseElement.setAttribute(
+											'autoplay',
+											'autoplay'
+										);
+
+										if (isSafari()) {
+											let safariSource =
+												videoElement.dataset
+													.reverseSourceSafari;
+											if (safariSource) {
+												this.addVideoSource(
+													reverseElement,
+													safariSource,
+													'video/mp4; codecs="hvc1"'
+												);
+											}
+										} else {
+											let sourceType =
+												videoElement.dataset.reverseSource.endsWith(
+													'.webm'
+												)
+													? 'video/webm'
+													: 'video/mp4';
+											this.addVideoSource(
+												reverseElement,
+												videoElement.dataset
+													.reverseSource,
+												sourceType
+											);
+										}
+
+										if (elementCanvas) {
+											elementCanvas.appendChild(
+												reverseElement
+											);
+										}
+									}
+								}
+							});
+						}
+					}
+				}
+			};
+			const TimelineNavigation = {
+				init: function () {
+					const hideFromNavData = JSON.parse(
+						block.dataset.hideFromNavSlides
+					);
+					this.timelineIdsToHide = hideFromNavData;
+
+					this.toggleItemVisibility(this.timelineIdsToHide);
+					this.toggleFirstThreeItems();
+					this.timelineNavClickListener();
+					this.updateAllNavTimelines();
+				},
+				toggleItemVisibility: function (timelineIdsToHide) {
+					dots.forEach((dot, index) => {
+						const stringIndex = (index + 1).toString();
+						if (timelineIdsToHide.includes(stringIndex)) {
+							dot.classList.add('hide_from_timeline_navigation');
+						}
+					});
+					menuItems.forEach((item, index) => {
+						const stringIndex = (index + 1).toString();
+						if (timelineIdsToHide.includes(stringIndex)) {
+							item.classList.add('hide_from_timeline_navigation');
+						}
+					});
+				},
+				toggleFirstThreeItems: function () {
+					const firstThreeItems = [...menuItems].slice(0, 3);
+					firstThreeItems.forEach(
+						(name) => (name.style.display = 'flex')
+					);
+				},
+				timelineNavClickListener: function () {
+					const items = [...dots, ...menuItems];
+					items.forEach((item, index) => {
+						item.addEventListener('click', () =>
+							this.timelineNavHandleClick(item, index, items)
+						);
+					});
+				},
+				timelineNavHandleClick: function (item) {
+					if (!getState('canSwipe')) {
+						return;
+					}
+					const targetStepIndex =
+						parseInt(item.getAttribute('data-step')) - 1;
+					const currentStepIndex = getState('currentTimelineIndex');
+					const stepDifference = targetStepIndex - currentStepIndex;
+
+					if (
+						Math.abs(stepDifference) > 1 ||
+						Math.abs(stepDifference) < -1
+					) {
+						TimelineManager.fadeToBlack(() => {
+							TimelineManager.navigateToTimeline(targetStepIndex);
+						});
+					} else if (Math.abs(stepDifference) == 0) {
+						return;
+					} else {
+						TimelineManager.changeTimeline(stepDifference);
+					}
+				},
+				updateAllNavTimelines: function () {
+					allNavTimelines = Array.from(menuItems)
+						.filter(
+							(item) =>
+								!item.classList.contains(
+									'hide_from_timeline_navigation'
+								)
+						)
+						.map(
+							(item) =>
+								parseInt(item.getAttribute('data-step')) - 1
+						);
+				}
+			};
+			const ContentManager = {
+				contentFrame: function () {
+					const currentTimelineIndex = getState(
+						'currentTimelineIndex'
+					);
+					contentElements.forEach((elm) => {
+						const contentDelay = elm.dataset.slideDelay;
+						const parts = contentDelay.split(':');
+						const seconds =
+							parseInt(parts[0], 10) * 60 +
+							parseInt(parts[1], 10);
+						const delay = seconds * 200;
+
+						const contentActiveSlidesValue = elm.dataset.slideId;
+						const contentActiveSlidesArray = JSON.parse(
+							contentActiveSlidesValue
+						);
+						const parsedContentSlidesArray =
+							contentActiveSlidesArray.map((value) =>
+								parseInt(value)
+							);
+						const isActive = parsedContentSlidesArray.includes(
+							currentTimelineIndex + 1
+						);
+
+						setTimeout(() => {
+							elm.classList.toggle('active', isActive);
+						}, delay);
+					});
+				},
+				swiperFrame: function () {
+					const currentTimelineIndex = getState(
+						'currentTimelineIndex'
+					);
+					const swiperSlides = SwiperManager.swiper.slides;
+
+					swiperSlides.forEach((slide) => {
+						if (slide.dataset.slideId == currentTimelineIndex + 1) {
+							SwiperManager.swiper.slideTo(
+								slide.dataset.swiperSlideId - 1
+							);
+						}
+					});
+
+					const swiperActiveSlidesValue =
+						swiperWrapper.dataset.swiperActiveSlides;
+
+					const swiperDelay = swiperWrapper.dataset.swiperDelay;
+					const swiperParts = swiperDelay.split(':');
+					const swiperSeconds =
+						parseInt(swiperParts[0], 10) * 60 +
+						parseInt(swiperParts[1], 10);
+					const swiperDelayTimeout = swiperSeconds * 2500;
+
+					const swiperActiveSlidesArray = JSON.parse(
+						swiperActiveSlidesValue
+					);
+					const parsedSwiperActiveSlidesArray =
+						swiperActiveSlidesArray.map((value) => parseInt(value));
+					const isActive = parsedSwiperActiveSlidesArray.includes(
+						currentTimelineIndex + 1
+					);
+
+					if (isActive) {
+						setTimeout(() => {
+							swiperWrapper.classList.add('active');
+						}, swiperDelayTimeout);
+					} else {
+						swiperWrapper.classList.remove('active');
+					}
+				}
+			};
+			const ScrollTypeSwitch = {
+				init: function (block) {
+					const isFullScreen =
+						parseFloat(block.dataset.fullscreen) === 1;
+
+					if (isFullScreen) {
+						document.body.classList.add(
+							'animated-sections-fullscreen'
+						);
+						startBlock();
+						TouchScrollEventManager.addScrollLockScreen();
+					} else {
+						document.body.classList.remove(
+							'animated-sections-fullscreen'
+						);
+						startBlock();
+					}
+				}
+			};
+			const TouchScrollEventManager = {
+				decelerateScroll: function () {
+					this.scrollVelocity *= 0.9;
+
+					if (Math.abs(this.scrollVelocity) < 1) {
+						this.isDecelerating = false;
+						return;
+					}
+
+					window.scrollBy(0, this.scrollVelocity);
+
+					requestAnimationFrame(this.decelerateScroll.bind(this));
+				},
+				isElementAtTop: function (element) {
+					const headerHeight = siteHeader.offsetHeight;
+					const bounding = element.getBoundingClientRect();
+					return bounding.top <= headerHeight; // Adjusted to account for header height
+				},
+				isElementAtBottom: function (element) {
+					const bounding = element.getBoundingClientRect();
+					return bounding.bottom >= window.innerHeight;
+				},
+				addScrollLockScreen: function () {
+					if (window.innerWidth <= MOBILE_BREAKPOINT) {
+						isTouching = false;
+						window.removeEventListener(
+							'touchstart',
+							handleTouchStart
+						);
+						window.removeEventListener(
+							'touchmove',
+							handleTouchMove
+						);
+						window.removeEventListener('touchend', handleTouchEnd);
+						window.removeEventListener('wheel', handleWheelEvent);
+
+						TimelineManager.navigateToTimeline(
+							getState('currentTimelineIndex')
+						);
+					} else {
+						window.removeEventListener('wheel', handleWheelEvent);
+					}
+
+					document.body.classList.add(
+						'animated-sections-scroll-lock'
+					);
+					// siteHeader.classList.add('animated-sections-header-lock');
+					smoothScrollToTarget(block);
+
+					setTimeout(() => {
+						if (window.innerWidth <= MOBILE_BREAKPOINT) {
+							block.addEventListener(
+								'touchstart',
+								handleTimelineTouchStart
+							);
+							block.addEventListener(
+								'touchmove',
+								handleTimelineTouchMove
+							);
+							block.addEventListener(
+								'touchend',
+								handleTimelineTouchEnd
+							);
+							block.addEventListener(
+								'wheel',
+								handleTimelineScrollControl
+							);
+						} else {
+							block.addEventListener(
+								'wheel',
+								handleTimelineScrollControl
+							);
+						}
+					}, 100);
+				},
+				removeScrollLockScreen: function () {
+					document.body.classList.remove(
+						'animated-sections-scroll-lock'
+					);
+					// siteHeader.classList.remove('animated-sections-header-lock');
+
+					setState('canSwipe', false);
+
+					if (window.innerWidth <= MOBILE_BREAKPOINT) {
+						block.removeEventListener(
+							'touchstart',
+							handleTimelineTouchStart
+						);
+						block.removeEventListener(
+							'touchmove',
+							handleTimelineTouchMove
+						);
+						block.removeEventListener(
+							'touchend',
+							handleTimelineTouchEnd
+						);
+						block.removeEventListener(
+							'wheel',
+							handleTimelineScrollControl
+						);
+					} else {
+						block.removeEventListener(
+							'wheel',
+							handleTimelineScrollControl
+						);
+					}
+
+					setTimeout(() => {
+						if (window.innerWidth <= MOBILE_BREAKPOINT) {
+							window.addEventListener(
+								'touchstart',
+								handleTouchStart
+							);
+							window.addEventListener(
+								'touchmove',
+								handleTouchMove
+							);
+							window.addEventListener('touchend', handleTouchEnd);
+							window.addEventListener('wheel', handleWheelEvent);
+						} else {
+							window.addEventListener('wheel', handleWheelEvent);
+						}
+					}, 2000);
+				}
+			};
+			const addEventListeners = {
+				init: function () {
+					backButton.addEventListener('click', handleBackButtonClick);
+					nextButton.addEventListener('click', handleNextButtonClick);
+					if (window.innerWidth <= MOBILE_BREAKPOINT) {
+						window.addEventListener(
+							'touchstart',
+							handleTouchStart,
+							{passive: true}
+						);
+						window.addEventListener('touchmove', handleTouchMove, {
+							passive: true
+						});
+						window.addEventListener('touchend', handleTouchEnd, {
+							passive: true
+						});
+						window.addEventListener('wheel', handleWheelEvent);
+					} else {
+						window.addEventListener(
+							'resize',
+							debounce(handleResize, 100)
+						);
+						window.addEventListener('wheel', handleWheelEvent);
+					}
+
+					if (contentButtons) {
+						contentButtons.forEach((button) => {
+							button.addEventListener(
+								'click',
+								handleContentButtonClick
+							);
+						});
+					}
+				}
+			};
+
+			// Initialize
+			function init() {
+				setState('canSwipe', false);
+				setState('currentTimelineIndex', 0);
+				setState('timelinesVisited', false);
+				setState('lastSwipeFalseTime', 0);
+
+				addEventListeners.init();
+				VideoUtils.preloadAllVideoSources();
+
+				TimelineManager.createTimelinesAndNavigation();
+				console.log('init');
+				TimelineNavigation.init();
+				ScrollTypeSwitch.init(block);
+
+				if (swiperEnabled == 'true') {
+					SwiperManager.init();
+					SwiperManager.initSwiperPaginationListener();
+				}
+			}
+
+			// Utility Functions
+			function getState(key) {
+				return state[key];
+			}
+			function setState(key, value) {
+				console.log(key);
+				if (key === 'canSwipe') {
+					if (value === false) {
+						state[key] = value;
+						updateScrollWrapperClass(value);
+						state.lastSwipeFalseTime = Date.now();
+					} else if (value === true) {
+						const timeSinceLastFalse =
+							Date.now() - state.lastSwipeFalseTime;
+						if (timeSinceLastFalse >= 2000) {
+							state[key] = value;
+							updateScrollWrapperClass(value);
+						}
+					}
+				} else {
+					state[key] = value;
+				}
+			}
+			function debounce(func, wait) {
+				let timeout;
+				return function executedFunction(...args) {
+					const later = () => {
+						clearTimeout(timeout);
+						func(...args);
+					};
+					clearTimeout(timeout);
+					timeout = setTimeout(later, wait);
+				};
+			}
+			function smoothScrollToTarget(target) {
+				let targetPosition = target.offsetTop;
+				const startPosition = window.pageYOffset;
+				const distance = targetPosition - startPosition;
+				let startTime = null;
+
+				const scrollSpeed = Math.abs(scrollVelocity);
+				const dynamicDurationFactor = 250;
+				const duration = Math.max(
+					300,
+					Math.min(
+						1000,
+						(distance / (scrollSpeed + 1)) * dynamicDurationFactor
+					)
+				);
+
+				function animation(currentTime) {
+					if (startTime === null) startTime = currentTime;
+					const timeElapsed = currentTime - startTime;
+					let run = easeOutCubic(
+						timeElapsed,
+						startPosition,
+						distance,
+						duration
+					);
+
+					if (
+						(distance > 0 && run > targetPosition) ||
+						(distance < 0 && run < targetPosition)
+					) {
+						run = targetPosition;
+					}
+
+					window.scrollTo(0, run);
+					if (timeElapsed < duration && run !== targetPosition) {
+						requestAnimationFrame(animation);
+					}
+				}
+
+				function easeOutCubic(t, b, c, d) {
+					t /= d;
+					t--;
+					return c * (t * t * t + 1) + b;
+				}
+
+				requestAnimationFrame(animation);
+			}
+			function isSafari() {
+				return (
+					/^((?!chrome|android).)*safari/i.test(
+						navigator.userAgent
+					) ||
+					(/iPad|iPhone|iPod/.test(navigator.userAgent) &&
+						!window.MSStream)
+				);
+			}
+			function handleWheelEvent(event) {
+				let currentScrollTop =
+					window.pageYOffset || document.documentElement.scrollTop;
+				let wheelScrollDelta = event.deltaY;
+				checkBlockPosition(wheelScrollDelta, currentScrollTop);
+			}
+			function handleTimelineScrollControl() {
+				if (!getState('canSwipe')) {
+					return;
+				}
+
+				scrollAmount += event.deltaY;
+
+				const currentTimelineIndex = getState('currentTimelineIndex');
+				const totalTimelines = timelineElements.length;
+
+				if (scrollAmount >= 100) {
+					// Move forward
+					if (currentTimelineIndex === totalTimelines - 1) {
+						TouchScrollEventManager.removeScrollLockScreen();
+						setState('timelinesVisited', true);
+					} else {
+						TimelineManager.changeTimeline(1);
+						scrollAmount = 5;
+					}
+				} else if (scrollAmount <= -100) {
+					// Move backward
+					if (currentTimelineIndex === 0) {
+						TouchScrollEventManager.removeScrollLockScreen();
+						setState('timelinesVisited', false);
+					} else {
+						TimelineManager.changeTimeline(-1);
+						scrollAmount = -5;
+					}
+				}
+
+				if (scrollAmount > 0) {
+					scrollBar.style.top = '0%';
+					scrollBar.style.bottom = '';
+				} else {
+					scrollBar.style.top = '';
+					scrollBar.style.bottom = '0%';
+				}
+
+				const scrollPercentage = (Math.abs(scrollAmount) / 100) * 100;
+
+				scrollBar.style.height = `${scrollPercentage}%`;
+			}
+			function handleTouchStart(event) {
+				if (event.touches.length === 1) {
+					lastTouchY = event.touches[0].clientY;
+					isTouching = true;
+				}
+			}
+			function handleTouchMove(event) {
+				if (isTouching) {
+					let currentScrollTop =
+						window.pageYOffset ||
+						document.documentElement.scrollTop;
+					let touchScrollDelta =
+						event.touches[0].clientY - lastTouchY;
+					if (
+						checkBlockPosition(touchScrollDelta, currentScrollTop)
+					) {
+						if (event.cancelable) {
+							event.preventDefault();
+							event.stopPropagation(); // Stop event from propagating
+						}
+						isTouching = false;
+						return;
+					}
+					lastTouchY = event.touches[0].clientY;
+				}
+			}
+
+			function handleTouchEnd() {
+				isTouching = false;
+				// Start listening to scroll events
+				window.addEventListener('scroll', handleScroll, {
+					passive: true
+				});
+			}
+
+			function handleScroll() {
+				let currentScrollTop =
+					window.pageYOffset || document.documentElement.scrollTop;
+				if (checkBlockPosition(0, currentScrollTop)) {
+					// Take action if the block position is exceeded
+					// For example, scroll back to a safe position
+					window.removeEventListener('scroll', handleScroll); // Remove the event listener if needed
+				}
+			}
+
+			function handleTimelineTouchStart(e) {
+				if (!getState('canSwipe')) {
+					return;
+				}
+				e.preventDefault();
+				e.stopPropagation();
+				touchStartY = e.touches[0].screenY;
+			}
+			function handleTimelineTouchMove(e) {
+				// if (!getState('canSwipe')) {
+				// 	return;
+				// }
+				// e.preventDefault();
+				// e.stopPropagation();
+			}
+			function handleTimelineTouchEnd(e) {
+				if (!getState('canSwipe')) {
+					return;
+				}
+				touchEndY = e.changedTouches[0].screenY;
+
+				e.preventDefault();
+				e.stopPropagation();
+				const currentTimelineIndex = getState('currentTimelineIndex');
+				const totalTimelines = timelineElements.length;
+
+				if (touchEndY < touchStartY) {
+					if (currentTimelineIndex === totalTimelines - 1) {
+						TouchScrollEventManager.removeScrollLockScreen();
+						setState('timelinesVisited', true);
+					} else {
+						TimelineManager.changeTimeline(1);
+					}
+				} else if (touchEndY > touchStartY) {
+					if (currentTimelineIndex === 0) {
+						TouchScrollEventManager.removeScrollLockScreen();
+						setState('timelinesVisited', false);
+					} else {
+						TimelineManager.changeTimeline(-1);
+					}
+				}
+
+				const scrollPercentage = Math.abs(touchEndY) * 100;
+				scrollBar.style.height = `${scrollPercentage}%`;
+				if (touchEndY > 0) {
+					scrollBar.style.left = '0%';
+					scrollBar.style.right = '';
+				} else {
+					scrollBar.style.left = '';
+					scrollBar.style.right = '0%';
+				}
+			}
+
+			//UI Functions
+			function createBackButton() {
+				const slidesJson = JSON.parse(
+					block.dataset.slidesToHaveBackButton
+				);
+				const slides_to_have_back_button = slidesJson;
+
+				let showBackButton = false;
+				slides_to_have_back_button.forEach((slide) => {
+					const stepId = slide;
+					if (
+						stepId &&
+						parseInt(stepId) ===
+							getState('currentTimelineIndex') + 1
+					) {
+						showBackButton = true;
+					}
+				});
+				if (showBackButton) {
+					backButton.style.visibility = 'visible';
+					backButton.style.opacity = '1';
+				} else {
+					backButton.style.opacity = '0';
+					backButton.style.visibility = 'hidden';
+				}
+			}
+			function updateScrollWrapperClass(canSwipe) {
+				const scrollWrapper = block.querySelector(
+					'.animated-sections__progress-inner'
+				);
+				if (scrollWrapper) {
+					if (canSwipe) {
+						scrollWrapper.classList.remove('loading');
+						if (SwiperManager.swiper) {
+							SwiperManager.swiper.pagination.el.classList.remove(
+								'loading'
+							);
+						}
+					} else {
+						scrollWrapper.classList.add('loading');
+						if (SwiperManager.swiper) {
+							SwiperManager.swiper.pagination.el.classList.add(
+								'loading'
+							);
+						}
+					}
+				}
+			}
+
+			//Event Listener Functions
+			function handleResize() {
+				TimelineManager.rebuildTweens();
+				if (getState('canSwipe')) {
+					smoothScrollToTarget(block);
+				}
+			}
+			function handleBackButtonClick() {
+				if (getState('canSwipe')) {
+					TimelineManager.navigateToTimeline(
+						backButton.dataset.backButton
+					);
+				}
+			}
+			function handleNextButtonClick() {
+				if (getState('canSwipe')) {
+					TimelineManager.changeTimeline(1);
+				}
+			}
+			function handleContentButtonClick() {
+				if (getState('canSwipe')) {
+					TimelineManager.navigateToTimeline(
+						this.dataset.contentButton
+					);
+				}
+			}
+
+			function startBlock() {
+				setState('canSwipe', true);
+				TimelineManager.navigateToTimeline(
+					getState('currentTimelineIndex')
+				);
+				// splashScreen.classList.remove('active');
+				// uiElementsContainer.classList.remove('disabled');
+			}
+
+			//Dev Zone
+			function checkBlockPosition(scrollDelta, currentScrollTop) {
+				TouchScrollEventManager.scrollVelocity = scrollDelta;
+				if (currentScrollTop > lastScrollTop) {
+					if (!getState('timelinesVisited')) {
+						if (TouchScrollEventManager.isElementAtTop(block)) {
+							TouchScrollEventManager.addScrollLockScreen(true);
+
+							if (!isDecelerating && scrollVelocity !== 0) {
+								isDecelerating = true;
+								TouchScrollEventManager.decelerateScroll();
+							}
+							if (!getState('canSwipe')) {
+								setTimeout(() => {
+									setState('canSwipe', true);
+								}, 1000);
+							}
+							return true;
+						}
+					}
+				} else {
+					if (getState('timelinesVisited')) {
+						if (TouchScrollEventManager.isElementAtBottom(block)) {
+							TouchScrollEventManager.addScrollLockScreen();
+
+							setTimeout(() => {
+								setState('canSwipe', true);
+							}, 1000);
+							return true;
+						}
+					}
+				}
+				lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
+				return false;
+			}
+
+			// Make the magic happen
+			init();
+			// fadeIn(block);
+		});
+	} catch (error) {
+		console.error(error);
+	}
+}