pihkaal-me/app/stores/intro.ts

import gsap from "gsap";

export const useIntroStore = defineStore("intro", {
  state: () => ({
    intro: {
      textOpacity: 0,
      logoFrameIndex: 0,
    },

    outro: {
      textOpacity: 1,
      backgroundOpacity: 0,
    },

    isIntro: true,
    isOutro: false,
  }),

  actions: {
    animateIntro() {
      this.isIntro = true;

      const { assets } = useAssets();
      const totalFrames = Object.keys(assets.images.intro.logoAnimated).length;
      const logoDuration = totalFrames / 25;

      gsap
        .timeline()
        .to(
          this.intro,
          {
            textOpacity: 1,
            duration: 0.1,
            ease: "none",
          },
          4.1,
        )
        .to(
          this.intro,
          {
            logoFrameIndex: totalFrames - 1,
            duration: logoDuration,
            ease: "steps(" + (totalFrames - 1) + ")",
          },
          4.1,
        )
        .call(
          () => {
            this.isIntro = false;
          },
          [],
          4.1,
        );
    },

    animateOutro() {
      this.isOutro = true;

      gsap
        .timeline()
        .to(this.outro, {
          textOpacity: 0,
          duration: 0.25,
          ease: "none",
        })
        .to(this.outro, {
          backgroundOpacity: 1,
          duration: 0.5,
          delay: 0.5,
          ease: "none",
        })
        .call(() => {
          const app = useAppStore();
          const achievements = useAchievementsStore();
          app.booted = true;
          achievements.unlock("boot");
        });
    },
  },
});