Have a Registration ID?
{
entries.forEach((entry) => {
let animation = entry.target.dataset.animation;
if (entry.isIntersecting) {
entry.target.classList.add(animation);
}
});
},
{ rootMargin: "0px", threshold: 0.2 }
);
//
for (let i = 0; i < the_animation.length; i++) {
const elements = the_animation[i];
observer.observe(elements);
}
/* --- Tabs selector --- */
const DOM = {
tabsNav: document.querySelector(".tabs__nav"),
tabsNavItems: document.querySelectorAll(".tabs__nav-item"),
panels: document.querySelectorAll(".tabs__panel"),
};
const setActiveItem = (elem) => {
DOM.tabsNavItems.forEach((el, i) => {
el.classList.remove("js-active");
});
elem.classList.add("js-active");
};
const findActiveItem = () => {
let activeIndex = 0;
for (let i = 0; i < DOM.tabsNavItems.length; i++) {
if (DOM.tabsNavItems[i].classList.contains("js-active")) {
activeIndex = i;
break;
}
}
return activeIndex;
};
const findActiveItemParams = (activeItemIndex) => {
const activeTab = DOM.tabsNavItems[activeItemIndex];
const activeItemWidth = activeTab.offsetWidth - 1;
const activeItemOffset_left = activeTab.offsetLeft;
return [activeItemWidth, activeItemOffset_left];
};
const appendDecorationNav = () => {
//creating decoration element
let decorationElem = document.createElement("div");
decorationElem.classList.add("tabs__nav-decoration");
decorationElem.classList.add("js-decoration");
decorationElem.classList.add("fade-in-right");
DOM.tabsNav.append(decorationElem);
return decorationElem;
};
const styleDecorElem = (elem, decorWidth, decorOffset) => {
elem.style.width = `${decorWidth}px`;
elem.style.transform = `translateX(${decorOffset}px)`;
};
const findActivePanel = (index) => {
return DOM.panels[index];
};
const setActivePanel = (index) => {
DOM.panels.forEach((el) => {
el.classList.remove("js-active");
el.classList.remove("fade-in-right");
});
DOM.panels[
index
].parentElement.style.height = `${DOM.panels[index].offsetHeight}px`;
DOM.panels[index].classList.add("js-active");
DOM.panels[index].classList.add("fade-in-right");
};
window.addEventListener("load", () => {
const activeItemIndex = findActiveItem();
const [decorWidth, decorOffset] = findActiveItemParams(activeItemIndex);
const decorElem = appendDecorationNav();
styleDecorElem(decorElem, decorWidth, decorOffset);
findActivePanel(activeItemIndex);
setActivePanel(activeItemIndex);
});
DOM.tabsNav.addEventListener("click", (e) => {
const navElemClass = "tabs__nav-item";
if (e.target.classList.contains(navElemClass)) {
const clickedTab = e.target;
const activeItemIndex = Array.from(DOM.tabsNavItems).indexOf(
clickedTab
);
//set active nav item
setActiveItem(clickedTab);
//find active nav item
const activeItem = findActiveItem();
//find active nav item params
const [decorWidth, decorOffset] = findActiveItemParams(activeItem);
//setting styles to the decoration elem
const decorElem = document.querySelector(".js-decoration");
styleDecorElem(decorElem, decorWidth, decorOffset);
//find active panel
findActivePanel(activeItemIndex);
//set active panel
setActivePanel(activeItemIndex);
}
});
/* --- Mobile Testimonial Carousel --- */
const carousel = document.querySelector(".carousel-container");
const carouselItems = document.querySelectorAll(".carousel-item");
const carouselBtnPrev = document.querySelector(".carousel-btn-prev");
const carouselBtnNext = document.querySelector(".carousel-btn-next");
let currentCarouselIndex = 0;
const updateIndex = (index, direction) => {
carouselItems.forEach((item, index) => {
if (index === currentCarouselIndex) {
item.classList.add("carousel-active");
item.classList.add("animation");
item.classList.add(`fade-in-${direction}`);
item.style.display = "block";
} else {
item.classList.remove("carousel-active");
item.classList.remove(`fade-in-${direction}`);
item.style.display = "none";
}
});
return;
};
carouselBtnPrev.addEventListener("click", () => {
currentCarouselIndex === 0
? ((currentCarouselIndex = 0), "left")
: updateIndex(currentCarouselIndex--, "left");
});
carouselBtnNext.addEventListener("click", () => {
currentCarouselIndex === carouselItems.length - 1
? ((currentCarouselIndex = carouselItems.length - 1), "right")
: updateIndex(currentCarouselIndex++, "right");
});
updateIndex(0, "right");
/* --- Countup animation --- */
const animationDuration = 1600;
const frameDuration = 1000 / 60;
const totalFrames = Math.round(animationDuration / frameDuration);
const easeOutQuad = (t) => t * (2 - t);
const animateCountUp = (el) => {
let frame = 0;
const countTo = parseInt(el.dataset.target__value, 10);
const counter = setInterval(() => {
frame++;
const progress = easeOutQuad(frame / totalFrames);
const currentCount = Math.round(countTo * progress);
if (parseInt(el.innerHTML, 10) !== currentCount) {
el.innerHTML = currentCount;
}
if (frame === totalFrames) {
clearInterval(counter);
}
}, frameDuration);
};
const startCountup = () => {
const countupEls = document.querySelectorAll(".countup");
countupEls.forEach(animateCountUp);
};
const countWaypoint = document.querySelector("#counterWaypoint");
const countObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setTimeout(() => {
startCountup();
countObserver.unobserve(countWaypoint);
}, 300);
}
});
},
{ rootMargin: "0px", threshold: 0 }
);
countObserver.observe(countWaypoint);