Week 6: The Blueprint Week 6

Unit: Teaching Through Story

Interaction Question: What happens when the page moves with you?

Learning Outcomes

  • 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

Curriculum Activities

Engage

  • Engage 6-1 // Learning Log
    weeks/week-6/engage/engage-6-0-learning-log.md
  • Engage: Parallax Dissection
    weeks/week-6/engage/engage-6-1-parallax-dissection.md

Learn

  • Codepen Starter Html
    weeks/week-6/learn/gsap-svg-tutorial/codepen-starter-html.html
  • Index
    weeks/week-6/learn/gsap-svg-tutorial/index.html
  • Learn: Scrollytelling Readings + Visual Notes
    weeks/week-6/learn/learn-6-1-scrollytelling-readings.md
  • Learn: Animating SVG Icons with GSAP + AI
    weeks/week-6/learn/learn-6-2-svg-icons-gsap.md
  • Learn: GSAP ScrollTrigger + Parallax
    weeks/week-6/learn/learn-6-3-gsap-scrolltrigger.md

Practice

  • Practice: The Parallax
    weeks/week-6/practice/practice-6-1-the-parallax.md

Build

  • Build: The Blueprint
    weeks/week-6/build/build-6-1-the-blueprint.md

Reflect

  • Reflect: Visual Notes — Motion Map
    weeks/week-6/reflect/reflect-6-1-visual-notes.md
  • Reflect: Visual Notes — ScrollTrigger + Parallax
    weeks/week-6/reflect/reflect-6-2-visual-notes.md

Resources

  • Week 6 Resources: The Blueprint
    weeks/week-6/resources/week-6-resources.md

Canvas Alignment

Module: week 6

  • unpublished fireship cat parchute tutorial
  • active Build 6-1 : The Blueprint
  • active gsap ai svg tutorial
  • active Motion Map
  • active Reflect: week 6 -- Visual Notes // ScrollTrigger + Parallax