Jabberwocky: Building a Gatsby Silly Site Competition Winner

Copycopy code to clipboard
.text-container-motion {
 perspective: 100vw;
 transform-style: preserve-3d;
 perspective-origin: 50% 45%; ← Optional
}

Copycopy code to clipboard
if (typeof window !== `undefined`) {
 gsap.registerPlugin(ScrollTrigger)
 gsap.registerPlugin(SplitText)
 gsap.defaults({ overwrite: "auto", duration: 0.3 })
}

Copycopy code to clipboard
const transitionTitleIn = () => {
   const headingSplit = new SplitText(".title-motion")
   // I use the gsap.set function to hide and randomly position the heading characters on the Y axis, between 160px and -160px.
   gsap.set(headingSplit.chars, { y: "random(160,-160,5)", opacity: 0 })
   // Then set the title’s opacity to 1, because it is set to 0 in the CSS to prevent any undesired flashing when it’s first painted.
   gsap.set(".title-motion", { opacity: 1 })
   // Now it’s time to bring the title into view!
   gsap.to(headingSplit.chars, {
     // I animate the Y position of each character back to 0 and the opacity to 1.
     y: 0,
     opacity: 1,
     delay: 0.6,
     // The stagger property with “random” gives it the silly and unpredictable effect.
     stagger: { from: "random", amount: 1.2 },
     duration: 2,
     onComplete: () => {
       const scrollDownElement = document.querySelector(".scroll-down")
       scrollDownElement && scrollDownElement.classList.add("scroll-down-show")
     },
   })
 }

Copycopy code to clipboard
// The poem is an array of paragraph arrays, each containing sentences. This makes it easy for the content to be mapped.
const POEM: string[][] = [
 [
   "'Twas brillig, and the slithy toves",
   "Did gyre and gimble in the wabe;",
   "All mimsy were the borogoves,",
   "And the mome raths outgrabe.",
 ],
 // ---
 [
   '"Beware the Jabberwock, my son!',
   "The jaws that bite, the claws that catch!",
   "Beware the Jubjub bird, and shun",
   'The frumious Bandersnatch!"',
 ],
 //...
]

Copycopy code to clipboard
{/* Animated */}
       {!disableMotion && (
         <section className="text-container-motion">
           {/* Title */}
           <div className="text title paragraph-motion">
             <h1 className="title-motion">Jabberwocky</h1>
             <h2 className="title-motion">
               from Through the Looking-Glass, and What Alice Found There
               (1871)
             </h2>
             <div className="scroll-down">
               <img src={downIcon} alt="down" />
             </div>
           </div>
           {/* Paragraphs - Poem Mapping */}
           {POEM.map((paragraph: string[], i: number) => (
             <p key={`paragraph-${i}`} className="text paragraph-motion">
               {paragraph.map((sentence, index) => (
                 <div key={`${sentence[0]}-${index}`}>{sentence}</div>
               ))}
             </p>
           ))}
         </section>
       )}

Copycopy code to clipboard
const setupWithAnimations = useCallback(() => {
   transitionTitleIn()
   // Clear any existing scroll triggers
   ScrollTrigger.getAll().forEach(trigger => trigger.kill())
   // Grabs all of the paragraphs by their class name.
   const paragraphs: HTMLDivElement[] = gsap.utils.toArray(".paragraph-motion")
   // Ensures the content will remain fixed (necessary when switching between static and animated poems)
   gsap.set("main", { height: "100vh", position: "fixed" })
   // Sets the body height based on the number of paragraphs
   // This enables scrolling even though the content is positioned fixed & absolute.
   gsap.set("body", { height: `${paragraphs.length * 100}vh` })
   // Creates a ScrollTrigger for each paragraph section
   paragraphs.forEach((div, i) => {
     ScrollTrigger.create({
       // Every 50vh the next trigger will start as the previous one ends.
       start: () => (i - 0.5) * innerHeight,
       end: () => (i + 0.5) * innerHeight,
       // When activated, call the function to handle transitions
       onToggle: () => setActiveParagraph(div),
     })
   })
   setupBackground(true)
 }, [])

Copycopy code to clipboard
const currentParagraph = useRef<HTMLDivElement>()
 
 const setActiveParagraph = useCallback((newParagraph: HTMLDivElement) => {
 
   const transitionIn = (paragraph: HTMLDivElement) => {
     // Sets the paragraph back on the z axis
     gsap.set(paragraph, {
       z: -1000,
       autoAlpha: 0, //Hidden in CSS for initial mount
     })
     // Gets the sentences and splits them.
     const sentences: HTMLParagraphElement[] = gsap.utils.toArray(
       paragraph.querySelectorAll("p")
     )
     const sentenceSplits: SplitText[] = sentences.map(
       (sentence: HTMLParagraphElement) => new SplitText(sentence)
     )
     const timeline = gsap.timeline({ paused: true })
     // Schedule the sentences appearing
     sentenceSplits.forEach((splitSentence, i) => {
       timeline.fromTo(
         splitSentence.chars,
         {
           y: "random(72,-72)",
           opacity: 0,
         },
         {
           y: 0,
           delay: i, // incremental delay for each sentence
           stagger: { from: "random", amount: 0.4 },
           duration: 0.8,
           opacity: 1,
           ease: "ease-in",
         }
       )
     })
     // Get the container to appear
     timeline.to(
       paragraph,
       { z: 0, autoAlpha: 1, duration: sentenceSplits.length },
       0 // make it happen at the same time as the sentences
     )
     timeline.call(() => timeline.kill())
     // Run the animation
     timeline.play()
   }
 
   const transitionOut = (oldParagraph: HTMLDivElement) => {
     gsap.to(oldParagraph, { z: 200, autoAlpha: 0, duration: 1 })
   }
 
   if (newParagraph !== currentParagraph.current) {
     transitionOut(currentParagraph.current)
     transitionIn(newParagraph)
     currentParagraph.current = newParagraph
   }
 }, [])

Copycopy code to clipboard
useEffect(() => {
   // Grab the prefers reduced media query
   const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
 
   // Check if the media query matches or is not available.
   if (!mediaQuery || mediaQuery.matches) {
     console.log("User prefers reduced motion")
     setDisableMotion(true)
   } else {
     console.log("User has no motion preference")
   }
 
   // Adds an event listener to check for changes in the media query's value.
   mediaQuery.addEventListener("change", () => {
     if (mediaQuery.matches) {
       setDisableMotion(true)
     } else {
       setDisableMotion(false)
     }
   })
 }, [])

Copycopy code to clipboard
// Handle motion toggle - either by button press or media query change
 useLayoutEffect(() => {
   if (disableMotion) {
     setupWithoutAnimations()
   } else {
     setupWithAnimations()
   }
   window.scrollTo(0, 0)
 }, [disableMotion])