// This file was generated by Slater.app - tonik-gsap.js


// Split text into spans
const anElements = ['an1', 'an2', 'an3', 'an4', 'an5', 'an6', 'an7'];

const existingSelectors = anElements
  .filter(an => document.querySelector(`[data-gsap="${an}"]`))
  .map(an => `[data-gsap="${an}"]`)
  .join(', ');

if (existingSelectors) {
  let typeSplit = new SplitType(existingSelectors, {
    types: "words, chars",
    tagName: "span"
  });
}
// Link timelines to scroll position
function createScrollTrigger(triggerElement, timeline) {
  // Play tl when scrolled into view (60% from top of screen)
  ScrollTrigger.create({
    trigger: triggerElement,
    start: "top 60%",
    onEnter: () => timeline.play()
  });
}

let an1 = document.querySelector('[data-gsap="an1"]');
if (an1) {
  gsap.set("[data-gsap='an1']", { opacity: 1 });

  gsap.utils.toArray("[data-gsap='an1']").forEach((element, index) => {
    let tl = gsap.timeline({ paused: true });
    tl.from(element.querySelectorAll(".word"), {
      opacity: 0,
      yPercent: 100,
      duration: 0.5,
      ease: "back.out(2)",
      stagger: { amount: 0.5 }
    });
    createScrollTrigger(element, tl);
  });
}

let an2 = document.querySelector('[data-gsap="an2"]');
if (an2) {
  gsap.set("[data-gsap='an2']", { opacity: 1 });

  $("[data-gsap='an2']").each(function (index) {
    let tl = gsap.timeline({ paused: true });
    tl.set($(this).find(".word"), { transformPerspective: 1000 });
    tl.from($(this).find(".word"), {
      rotationX: -90,
      duration: 0.6,
      ease: "power2.out",
      stagger: { amount: 0.6 }
    });
    createScrollTrigger($(this), tl);
  });
}

let an3 = document.querySelector('[data-gsap="an3"]');
if (an3) {
  gsap.set("[data-gsap='an3']", { opacity: 1 });

  $("[data-gsap='an3']").each(function (index) {
    let tl = gsap.timeline({ paused: true });
    tl.from($(this).find(".word"), {
      opacity: 0,
      duration: 0.5,
      ease: "power1.out",
      stagger: { amount: 0.6, from: "random" }
    });
    createScrollTrigger($(this), tl);
  });
}

let an4 = document.querySelector('[data-gsap="an4"]');
if (an4) {
  gsap.set("[data-gsap='an4']", { opacity: 1 });
  $("[data-gsap='an4']").each(function (index) {
    let tl = gsap.timeline({ paused: true });
    tl.from($(this).find(".char"), {
      opacity: 0,
      duration: 0.2,
      ease: "power1.out",
      stagger: { amount: 0.8 }
    });
    createScrollTrigger($(this), tl);
  });
}

let an5 = document.querySelector('[data-gsap="an5"]');
if (an5) {
  gsap.set("[data-gsap='an5']", { opacity: 1 });
  $("[data-gsap='an5']").each(function (index) {
    let tl = gsap.timeline({ paused: true });
    tl.from($(this).find(".char"), {
      yPercent: 100,
      duration: 0.2,
      ease: "power1.out",
      stagger: { amount: 0.6 }
    });
    createScrollTrigger($(this), tl);
  });
}

let an6 = document.querySelector('[data-gsap="an6"]');
if (an6) {
  gsap.set("[data-gsap='an6']", { opacity: 1 });

  $("[data-gsap='an6']").each(function (index) {
    let tl = gsap.timeline({ paused: true });
    tl.from($(this).find(".word"), {
      opacity: 0,
      x: "1em",
      duration: 0.6,
      ease: "power2.out",
      stagger: { amount: 0.2 }
    });
    createScrollTrigger($(this), tl);
  });
}

let an7 = document.querySelector('[data-gsap="an7"]');
if (an7) {
  gsap.set("[data-gsap='an7']", { opacity: 1 });
  $("[data-gsap='an7']").each(function (index) {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "top 90%",
        end: "top center",
        scrub: true
      }
    });
    tl.from($(this).find(".word"), {
      opacity: 0.2,
      duration: 0.2,
      ease: "power1.out",
      stagger: { each: 0.4 }
    });
  });
}


