GSAP animationS:

I wrote the following script to add custom GSAP animations to my site:

1document.addEventListener("DOMContentLoaded", function () {
2  // Hero image fade in
3  gsap.from(".hero-projects", { opacity: 0.6, scale: 0.6, duration: 1 });
4
5  //Tag buttons and scroll arrow fade in sequentially
6  gsap.from(".tag-button", { delay: 0.5, opacity: 0, stagger: 0.2 });
7
8  gsap.from(".arrow-icon", { delay: 2, opacity: 0, duration: 1 });
9
10
11  // Set initial icon positions
12  setTimeout(function () {
13    gsap.set(".light-mode-icon", {
14      y: document.documentElement.classList.contains("dark-mode") ? "100%" : 0,
15    });
16    gsap.set(".dark-mode-icon", {
17      y: document.documentElement.classList.contains("dark-mode") ? 0 : "100%",
18    });
19  }, 10); // 10 millisecond delay
20
21  // Mode switch animation
22  const toggleButtons = document.querySelectorAll("[tr-color-toggle]"); // Select all elements with the attribute
23  if (toggleButtons) {
24    toggleButtons.forEach((toggleButton) => {
25      toggleButton.addEventListener("click", function () {
26        const isCurrentlyDark =
27          document.documentElement.classList.contains("dark-mode");
28
29        if (isCurrentlyDark) {
30          // Animate to light mode icons
31          gsap.to(".light-mode-icon", {
32            delay: 0.5,
33            duration: 0.5,
34            opacity: 1,
35            y: 0,
36          });
37          gsap.to(".dark-mode-icon", { duration: 0.25, opacity: 0, y: "100%" });
38        } else {
39          // Animate to dark mode icons
40          gsap.to(".light-mode-icon", {
41            duration: 0.25,
42            opacity: 0,
43            y: "100%",
44          });
45          gsap.to(".dark-mode-icon", {
46            delay: 0.5,
47            duration: 0.5,
48            opacity: 1,
49            y: 0,
50          });
51        }
52      });
53    });
54  }
55});
56