Update

aritmija_devTemplate/v1/assets/js/main.js

@@ -0,0 +1,307 @@
+(function ($) {
+"use strict";
+
+$(document).ready(function () {
+
+  $(".menu-trigger").click(function(){
+    $(".slide-menu").addClass("active");
+  });
+  $(".menu-close").click(function(){
+    $(".slide-menu").removeClass("active");
+  });
+
+
+
+  
+
+    // Infinite Brand Slider
+    const track = document.querySelector(".slider-track");
+
+    // 🔁 Duplicate content for seamless loop
+    track.innerHTML += track.innerHTML;
+
+    const totalWidth = track.scrollWidth / 2;
+
+    gsap.to(track, {
+      x: -totalWidth,
+      duration: 20, // speed (lower = faster)
+      ease: "none",
+      repeat: -1
+    });
+    // Infinite Brand Slider
+
+
+
+    // mobile version slider
+    $('.inspiration-overlay-slider').owlCarousel({
+      loop:true,
+      margin:10,
+      nav:false,
+      items: 1,
+      stagePadding: 45,
+      autoplay:true,
+      autoplayTimeout:5000,
+      autoplayHoverPause:true,
+      dots: true
+
+  })
+    // mobile version slider
+    $('.showcase-gellary').owlCarousel({
+      loop:true,
+      margin:15,
+      nav:false,
+      items: 1,
+      stagePadding:50,
+      autoplay:true,
+      autoplayTimeout:2000,
+      autoplayHoverPause:true,
+      loop: true,
+      dots: false
+
+  })
+  
+
+
+
+});
+
+// Window load
+$(window).on("load", function () {
+
+});
+
+})(jQuery);
+
+
+
+
+// Portfolio Filter Trigger
+const filterButtons = document.querySelectorAll(".portfolio-filter button");
+const cards = document.querySelectorAll(".project-card");
+
+filterButtons.forEach(button => {
+  button.addEventListener("click", () => {
+
+    // Active button
+    filterButtons.forEach(btn => btn.classList.remove("active"));
+    button.classList.add("active");
+
+    const filter = button.getAttribute("data-filter");
+
+    cards.forEach(card => {
+      if (filter === "all") {
+        card.classList.remove("hide");
+      } else {
+        if (card.classList.contains(filter)) {
+          card.classList.remove("hide");
+        } else {
+          card.classList.add("hide");
+        }
+      }
+    });
+
+  });
+});
+// Portfolio Filter Trigger
+
+
+
+
+
+// Team Slider in About Page
+const track = document.querySelector(".team-track");
+
+// duplicate for infinite loop
+track.innerHTML += track.innerHTML;
+
+let totalWidth = track.scrollWidth / 2;
+
+// create tween
+let tween = gsap.to(track, {
+  x: -totalWidth,
+  duration: 15,
+  ease: "none",
+  repeat: -1
+});
+
+// detect scroll direction
+let lastScroll = window.scrollY;
+
+window.addEventListener("scroll", () => {
+  let currentScroll = window.scrollY;
+
+  if (currentScroll > lastScroll) {
+    // scrolling DOWN → move LEFT
+    tween.timeScale(1);
+  } else {
+    // scrolling UP → move RIGHT
+    tween.timeScale(-1);
+  }
+
+  lastScroll = currentScroll;
+});
+
+// Team Slider in About Page
+
+
+
+// Flip Card Effect
+let currentCard = null;
+
+function handleFlip(card) {
+  // if clicking same card → toggle
+  if (currentCard === card) {
+    card.classList.remove("active");
+    currentCard = null;
+    return;
+  }
+
+  // close previous
+  if (currentCard) {
+    currentCard.classList.remove("active");
+  }
+
+  // open new
+  card.classList.add("active");
+  currentCard = card;
+}
+// Flip Card Effect
+
+
+
+
+// Branding Gallary Effect
+const items = document.querySelectorAll(".branding-list h2");
+const hoverImage = document.querySelector(".hover-image");
+const hoverImgTag = hoverImage.querySelector("img");
+
+items.forEach(item => {
+  item.addEventListener("mouseenter", () => {
+    const imgSrc = item.getAttribute("data-img");
+    hoverImgTag.src = imgSrc;
+    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";
+  });
+});
+// Branding Gallary Effect
+
+
+
+
+// Falling Button Animation Start
+document.addEventListener("DOMContentLoaded", function () {
+  gsap.registerPlugin(ScrollTrigger);
+
+  const buttons = document.querySelectorAll(".faling-btn a");
+
+  // initial state (up + hidden)
+  gsap.set(buttons, {
+    y: -150,
+    opacity: 0,
+    rotate: () => gsap.utils.random(-30, 30)
+  });
+
+  // animation on scroll
+  gsap.to(buttons, {
+    scrollTrigger: {
+      trigger: ".branding-area",
+      start: "top 75%",
+      toggleActions: "play none none none"
+    },
+    y: () => gsap.utils.random(20, 80),   // bottom drop
+    x: () => gsap.utils.random(50, 180),  // move to right side
+    opacity: 1,
+    rotate: () => gsap.utils.random(-10, 10),
+    duration: 1.2,
+    ease: "bounce.out",
+    stagger: {
+      each: 0.2,
+      from: "random" // random falling order 🔥
+    }
+  });
+});
+// Falling Button Animation End
+
+
+// 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
+
+
+
+
+
+
+
+// Brand Logos Fade In Up  Effect End
+gsap.registerPlugin(ScrollTrigger);
+
+gsap.to(".awards-wrap", {
+  opacity: 1,
+  y: 0,
+  duration: 1,
+  ease: "power3.out",
+  scrollTrigger: {
+    trigger: ".awards-wrap",
+    start: "top 80%",   // triggers when container is in view
+    toggleActions: "play none none none"
+  }
+});
+
+
+
+// Showcase image Gellary
+gsap.registerPlugin(ScrollTrigger);
+
+const showcases = gsap.utils.toArray(".showcase-item");
+
+// initial hidden state
+gsap.set(showcases, {
+  opacity: 0,
+  y: 20
+});
+
+// animate when section enters
+gsap.to(showcases, {
+  opacity: 1,
+  y: 0,
+  stagger: 0.12,
+  ease: "power1.out",
+  
+  scrollTrigger: {
+    trigger: ".slider-wrap",
+    start: "top 75%",
+    end: "bottom 25%",
+    
+    // 🔥 only play once when entering, no reverse
+    toggleActions: "play none none none"
+    
+    // markers: true // optional debug
+  }
+});
+// Showcase image Gellary