blog/src/components/Widgets/GsapAnimation.astro

<script>
import { gsap } from 'gsap'

function setupPostPageAnimation() {
  // Post Content + Tags + Comments
  const postContent = document.getElementById('gsap-post-page-content')
  const postContentChildren = postContent ? Array.from(postContent.children) : []
  const tagsElement = document.getElementById('gsap-post-page-tags')
  const walineElement = document.getElementById('waline')
  const allElements = [...postContentChildren, tagsElement, walineElement].filter(Boolean)

  // TOC + Date + Back Button + TOC Icon
  const tocList = document.getElementById('toc-list')
  const tocListChildren = tocList ? Array.from(tocList.children) : []
  const dateElement = document.getElementById('gsap-post-page-date')
  const backButton = document.getElementById('back-button')
  const tocIcon = document.getElementById('toc-icon')
  const tocContainer = document.getElementById('toc-container')

  // Screen Size Check
  const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
  const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches

  if (isLargeScreen) {
    // Post Content + Tags + Comments
    // First 15 elements
    gsap.from(allElements.slice(0, 15), {
      opacity: 0,
      y: '3rem',
      duration: 0.5,
      delay: 0.2,
      ease: 'power2.out',
      stagger: 0.05,
    })
    // Rest elements as the 16th element
    if (allElements.length > 15) {
      gsap.from(allElements.slice(15), {
        opacity: 0,
        y: '3rem',
        duration: 0.5,
        delay: 0.2 + 0.05 * 15,
        ease: 'power2.out',
      })
    }

    // Post Date
    if (dateElement) {
      gsap.from(dateElement, {
        opacity: 0,
        y: '1.5rem',
        duration: 0.5,
        delay: 0.2,
        ease: 'power2.out',
      })
    }

    // TOC Icon
    if (tocIcon) {
      gsap.from(tocIcon, {
        opacity: 0,
        y: '0.5rem',
        duration: 0.5,
        delay: 0.2,
        ease: 'power2.out',
      })
    }

    // Toc List
    if (tocListChildren.length > 0) {
      gsap.from(tocListChildren, {
        opacity: 0,
        y: '1.5rem',
        duration: 0.5,
        delay: 0.2,
        ease: 'power2.out',
        stagger: 0.025,
      })
    }

    // Back Button
    if (backButton) {
      gsap.from(backButton, {
        opacity: 0,
        x: '0.5rem',
        duration: 0.5,
        delay: 0.2,
        ease: 'power2.out',
      })
    }
  }
  else {
    // Post Content + Tags + Comments
    // First 7 elements
    gsap.from(allElements.slice(0, 7), {
      opacity: 0,
      y: '3rem',
      duration: 0.5,
      delay: 0.2,
      ease: 'power2.out',
      stagger: 0.05,
    })
    // Rest elements as the 8 element
    // if (allElements.length > 7) {
    //   gsap.from(allElements.slice(7), {
    //     opacity: 0,
    //     y: '3rem',
    //     duration: 0.5,
    //     delay: 0.2 + 0.05 * 5,
    //     ease: 'power2.out',
    //   })
    // }
  }

  // Mobile Animation (for screens smaller than 1536px)
  if (isSmallScreen && tocContainer) {
    gsap.from(tocContainer, {
      opacity: 0,
      y: '3rem',
      duration: 0.5,
      delay: 0.15,
      ease: 'power2.out',
    })
  }
}

setupPostPageAnimation()
document.addEventListener('astro:after-swap', setupPostPageAnimation)
</script>