Week 6: The Blueprint

week-6/

"What happens when the page moves with you?"

Curriculum content for this week is coming soon.

Design a complete scrollytelling site in Figma with 5–7 sections, each mapped to a metaphor chapter and JS concept
Set up Figma variables with semantic tokens and light/dark mode
Explain how GSAP ScrollTrigger ties animation progress to scroll position
Use ScrollTrigger's core properties: `trigger`, `start`, `end`, `scrub`, and `markers`
Define parallax and identify how different scroll speeds create the illusion of depth
Build a basic parallax effect using GSAP ScrollTrigger in CodePen
Apply DrawSVGPlugin to animate SVG strokes tied to scroll position (via tutorial)
Analyze scrollytelling as a design pattern — understanding how scroll controls pacing, attention, reveal, and meaning

Design a complete scrollytelling site in Figma with 5–7 sections, each mapped to a metaphor chapter and JS concept
Set up Figma variables with semantic tokens and light/dark mode
Explain how GSAP ScrollTrigger ties animation progress to scroll position
Use ScrollTrigger's core properties: `trigger`, `start`, `end`, `scrub`, and `markers`
Define parallax and identify how different scroll speeds create the illusion of depth
Build a basic parallax effect using GSAP ScrollTrigger in CodePen
Apply DrawSVGPlugin to animate SVG strokes tied to scroll position (via tutorial)
Analyze scrollytelling as a design pattern — understanding how scroll controls pacing, attention, reveal, and meaning