343 lines
9.8 KiB
JavaScript
343 lines
9.8 KiB
JavaScript
(function ($) {
|
|
"use strict";
|
|
|
|
$(document).ready(function () {
|
|
|
|
// ===== Menu Toggle =====
|
|
$(".menu-trigger").click(() => $(".slide-menu").addClass("active"));
|
|
$(".menu-close").click(() => $(".slide-menu").removeClass("active"));
|
|
|
|
// ===== Sticky Header =====
|
|
$(window).on("scroll", () => {
|
|
const scroll = $(window).scrollTop();
|
|
$(".header").toggleClass("sticky", scroll >= 100);
|
|
});
|
|
|
|
// ===== Infinite Brand Slider =====
|
|
const brandTrack = document.querySelector(".slider-track");
|
|
if (brandTrack) {
|
|
brandTrack.innerHTML += brandTrack.innerHTML;
|
|
const totalBrandWidth = brandTrack.scrollWidth / 2;
|
|
|
|
gsap.to(brandTrack, {
|
|
x: -totalBrandWidth,
|
|
duration: 20,
|
|
ease: "none",
|
|
repeat: -1
|
|
});
|
|
}
|
|
|
|
// ===== Owl Carousel Sliders =====
|
|
$(".inspiration-overlay-slider").owlCarousel({
|
|
loop: true,
|
|
margin: 10,
|
|
nav: false,
|
|
items: 1,
|
|
stagePadding: 45,
|
|
autoplay: true,
|
|
autoplayTimeout: 5000,
|
|
autoplayHoverPause: true,
|
|
dots: true
|
|
});
|
|
|
|
$(".showcase-gellary").owlCarousel({
|
|
loop: true,
|
|
margin: 15,
|
|
nav: false,
|
|
items: 1,
|
|
stagePadding: 50,
|
|
autoplay: true,
|
|
autoplayTimeout: 2000,
|
|
autoplayHoverPause: true,
|
|
dots: false
|
|
});
|
|
|
|
});
|
|
|
|
// ===== Portfolio Filter (Multi-Select) =====
|
|
const filterButtons = document.querySelectorAll(".portfolio-filter button");
|
|
const projectCards = document.querySelectorAll(".project-card");
|
|
let activeFilters = new Set();
|
|
|
|
filterButtons.forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
const filter = btn.dataset.filter;
|
|
|
|
if (filter === "all") {
|
|
activeFilters.clear();
|
|
filterButtons.forEach(b => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
projectCards.forEach(c => c.classList.remove("hide"));
|
|
return;
|
|
}
|
|
|
|
activeFilters.has(filter) ? activeFilters.delete(filter) : activeFilters.add(filter);
|
|
btn.classList.toggle("active");
|
|
|
|
document.querySelector(".portfolio-filter button[data-filter='all']").classList.remove("active");
|
|
|
|
projectCards.forEach(card => {
|
|
const matches = [...activeFilters].some(f => card.classList.contains(f));
|
|
card.classList.toggle("hide", activeFilters.size > 0 && !matches);
|
|
});
|
|
});
|
|
});
|
|
// ===== Portfolio Filter (Multi-Select) =====
|
|
|
|
|
|
|
|
|
|
|
|
// Beyond the Brief Card Infinite Slider Start
|
|
gsap.registerPlugin(Draggable);
|
|
|
|
const teamTrack = document.querySelector(".team-track");
|
|
|
|
if (teamTrack) {
|
|
// 1. Duplicate content for seamless loop
|
|
teamTrack.innerHTML += teamTrack.innerHTML;
|
|
const totalTeamWidth = teamTrack.scrollWidth / 2;
|
|
|
|
// 2. Create the base animation
|
|
const teamTween = gsap.to(teamTrack, {
|
|
x: -totalTeamWidth,
|
|
duration: 25,
|
|
ease: "none",
|
|
repeat: -1
|
|
});
|
|
|
|
// 3. Track scroll direction for timeScale
|
|
let lastScrollY = window.scrollY;
|
|
window.addEventListener("scroll", () => {
|
|
const currentY = window.scrollY;
|
|
// Smoothly transition the direction change
|
|
gsap.to(teamTween, { timeScale: currentY > lastScrollY ? 1 : -1, overwrite: true });
|
|
lastScrollY = currentY;
|
|
});
|
|
|
|
// 4. Add Drag Functionality
|
|
// We use a dummy element (proxy) to capture drag logic
|
|
const proxy = document.createElement("div");
|
|
|
|
Draggable.create(proxy, {
|
|
type: "x",
|
|
trigger: teamTrack, // Dragging the track triggers the logic
|
|
onPress() {
|
|
this.startProgress = teamTween.progress();
|
|
},
|
|
onDrag: function() {
|
|
// Calculate how far we've dragged relative to the width
|
|
const change = (this.startX - this.x) / totalTeamWidth;
|
|
let newProgress = this.startProgress + change;
|
|
|
|
// Wrap the progress so it stays between 0 and 1
|
|
teamTween.progress(gsap.utils.wrap(0, 1, newProgress));
|
|
},
|
|
onRelease: function() {
|
|
// Optional: Resume the animation if you want it to keep moving
|
|
// teamTween.play();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Beyond the Brief Card Infinite Slider Start
|
|
|
|
|
|
|
|
// ===== Flip Card =====
|
|
let currentCard = null;
|
|
function handleFlip(card) {
|
|
if (currentCard === card) return card.classList.remove("active"), currentCard = null;
|
|
|
|
if (currentCard) currentCard.classList.remove("active");
|
|
card.classList.add("active");
|
|
currentCard = card;
|
|
}
|
|
|
|
// ===== Branding Gallery Hover Effect =====
|
|
document.querySelectorAll(".branding-list h2").forEach(item => {
|
|
const hoverImage = document.querySelector(".hover-image");
|
|
const hoverImgTag = hoverImage.querySelector("img");
|
|
|
|
item.addEventListener("mouseenter", () => {
|
|
hoverImgTag.src = item.dataset.img;
|
|
hoverImage.style.opacity = 1;
|
|
});
|
|
item.addEventListener("mouseleave", () => hoverImage.style.opacity = 0);
|
|
item.addEventListener("mousemove", e => {
|
|
hoverImage.style.left = e.clientX + "px";
|
|
hoverImage.style.top = e.clientY + "px";
|
|
});
|
|
});
|
|
|
|
// ===== Text Vertical Slide =====
|
|
window.addEventListener("load", () => {
|
|
document.querySelectorAll(".shkVrtx91A").forEach(container => {
|
|
const items = container.querySelectorAll(".shk-vrtx-item-91A");
|
|
if (!items.length) return;
|
|
|
|
container.appendChild(items[0].cloneNode(true));
|
|
const itemHeight = items[0].offsetHeight;
|
|
const tl = gsap.timeline({ repeat: -1 });
|
|
|
|
items.forEach((_, i) => {
|
|
tl.to(container, { y: -itemHeight * (i + 1), duration: 0.5, ease: "power2.inOut" })
|
|
.to({}, { duration: 1.2 }); // pause
|
|
});
|
|
});
|
|
});
|
|
|
|
// ===== Scroll-triggered GSAP Animations =====
|
|
gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);
|
|
|
|
// Awards fade in
|
|
gsap.to(".awards-wrap", {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 1,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: ".awards-wrap",
|
|
start: "top 80%",
|
|
toggleActions: "play none none none"
|
|
}
|
|
});
|
|
|
|
// Showcase Items
|
|
gsap.utils.toArray(".showcase-item").forEach(item => {
|
|
gsap.set(item, { opacity: 0, y: 20 });
|
|
gsap.to(item, {
|
|
opacity: 1,
|
|
y: 0,
|
|
stagger: 0.12,
|
|
ease: "power1.out",
|
|
scrollTrigger: {
|
|
trigger: ".slider-wrap",
|
|
start: "top 75%",
|
|
end: "bottom 25%",
|
|
toggleActions: "play none none none"
|
|
}
|
|
});
|
|
});
|
|
|
|
// Footer Shake Animation
|
|
const down = 'M0-0.3C0-0.3,464,156,1139,156S2278-0.3,2278-0.3V683H0V-0.3z';
|
|
const center = 'M0-0.3C0-0.3,464,0,1139,0s1139-0.3,1139-0.3V683H0V-0.3z';
|
|
|
|
ScrollTrigger.create({
|
|
trigger: '.footer',
|
|
start: 'top bottom',
|
|
toggleActions: 'play pause resume reverse',
|
|
onEnter: self => {
|
|
const variation = self.getVelocity() / 10000;
|
|
gsap.fromTo('#bouncy-path', { morphSVG: down }, {
|
|
duration: 2,
|
|
morphSVG: center,
|
|
ease: `elastic.out(${1 + variation}, ${1 - variation})`,
|
|
overwrite: 'true'
|
|
});
|
|
}
|
|
});
|
|
|
|
// ===== Interactive Movement Effects =====
|
|
function addPointerEffect(elements, options) {
|
|
elements.forEach(el => {
|
|
const rotX = gsap.quickTo(el, "rotationX", options);
|
|
const rotY = gsap.quickTo(el, "rotationY", options);
|
|
const moveX = gsap.quickTo(el, "x", options);
|
|
const moveY = gsap.quickTo(el, "y", options);
|
|
const scale = gsap.quickTo(el, "scale", options);
|
|
|
|
el.addEventListener("pointermove", e => {
|
|
const rect = el.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width;
|
|
const y = (e.clientY - rect.top) / rect.height;
|
|
|
|
rotX(gsap.utils.interpolate(options.rotXMin, options.rotXMax, y));
|
|
rotY(gsap.utils.interpolate(options.rotYMin, options.rotYMax, x));
|
|
moveX(gsap.utils.interpolate(options.moveXMin, options.moveXMax, x));
|
|
moveY(gsap.utils.interpolate(options.moveYMin, options.moveYMax, y));
|
|
scale(options.scaleValue);
|
|
});
|
|
|
|
el.addEventListener("pointerleave", () => {
|
|
rotX(0); rotY(0); moveX(0); moveY(0); scale(1);
|
|
});
|
|
});
|
|
}
|
|
|
|
addPointerEffect(document.querySelectorAll(".showcase-item"), {
|
|
duration: 0.6, ease: "power4.out",
|
|
rotXMin: 25, rotXMax: -25, rotYMin: -25, rotYMax: 25,
|
|
moveXMin: -40, moveXMax: 40, moveYMin: -40, moveYMax: 40,
|
|
scaleValue: 1.08
|
|
});
|
|
|
|
addPointerEffect(document.querySelectorAll(".awards-wrap img"), {
|
|
duration: 0.3, ease: "power3.out",
|
|
rotXMin: 35, rotXMax: -35, rotYMin: -35, rotYMax: 35,
|
|
moveXMin: -25, moveXMax: 25, moveYMin: -25, moveYMax: 25,
|
|
scaleValue: 1.12
|
|
});
|
|
|
|
addPointerEffect(document.querySelectorAll(".team-card"), {
|
|
duration: 0.2, ease: "power3.out",
|
|
rotXMin: 25, rotXMax: -25, rotYMin: -25, rotYMax: 25,
|
|
moveXMin: 0, moveXMax: 0, moveYMin: 0, moveYMax: 0,
|
|
scaleValue: 1.1
|
|
});
|
|
|
|
// ===== Falling Buttons Animation =====
|
|
document.querySelectorAll(".ct-falling-btn-wrap a").forEach(btn => {
|
|
const randomX = gsap.utils.random(-50, 50);
|
|
const randomRot = gsap.utils.random(-25, 25);
|
|
const randomDelay = gsap.utils.random(0, 0.5);
|
|
|
|
gsap.fromTo(btn,
|
|
{ y: -200, x: 0, rotation: 0, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
x: randomX,
|
|
rotation: randomRot,
|
|
opacity: 1,
|
|
duration: 1.2,
|
|
ease: "power3.out",
|
|
delay: randomDelay,
|
|
scrollTrigger: {
|
|
trigger: ".branding-area",
|
|
start: "top 85%",
|
|
toggleActions: "play none none none"
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
})(jQuery);
|
|
|
|
|
|
|
|
|
|
// Text Vertical Slide Effect Start
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const container = document.getElementById("ctVertical");
|
|
const items = container.children;
|
|
|
|
container.appendChild(items[0].cloneNode(true));
|
|
|
|
const itemHeight = items[0].offsetHeight;
|
|
const tl = gsap.timeline({ repeat: -1 });
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
tl.to(container, {
|
|
y: -itemHeight * i,
|
|
duration: 0.6,
|
|
ease: "power2.inOut"
|
|
})
|
|
.to({}, { duration: 1.5 }); // ⏸ pause time
|
|
}
|
|
});
|
|
// Text Vertical Slide Effect End
|
|
|
|
|
|
|