Week 6: The Blueprint Week 6

Unit: Teaching Through Story

What happens when the page moves with you?

Build: The Blueprint

build/build-6-1-the-blueprint.md

Build: The Blueprint

Points: 75

TL;DR

Design your complete scrollytelling site in Figma. 6–8 sections. (or more!), each mapped to your metaphor and a JS concept. Set up design tokens as Figma variables with light/dark mode. Annotate where parallax and GSAP animations will go.

This is in figma btw.

Submit

**Add your file to the class Figma Project:**https://www.figma.com/files/team/1590525066201132416/project/557432720?fuid=821425603950455766
Name your Figma file: the-blueprint-lastname
Submit the Figma link in Canvas: share with edit access
Double check: all sections, variables, and modes are visible in the file

Overview

Before you write any code, design first. It saves time, reduces wrong turns, and helps your site feel like one coherent experience instead of a stack of separate sections.

This build pulls together your Week 5 and Week 6 work: your metaphor, style tile, narrative map, and your first experiments with ScrollTrigger and parallax. By Sunday, you should have a complete visual blueprint you can build from next week.

What You're Building

A Figma file with three parts:

Style Tile — Your visual direction (from Week 5, complete and/or update if needed)
Narrative Map — Your section-by-section content plan (from Week 5, complete and/or update if needed)
Full Page Design — 6–8 (or more) Figma frames showing the actual layout of each scroll section

Part 1: Style Tile

If you completed this in Week 5, review and refine. If not, create it ASAP(Like right now!!!).

Your style tile defines the visual language without designing full pages. One Figma frame showing:

Colors: Palette with hex values (primary, surface, text, accent — for both light and dark modes)
Typography: Heading + body fonts with type scale (sizes for h1, h2, body, small)
Icons: 3–5 icons that match your metaphor
Illustration/Image Style: 2–3 visual references showing the vibe
Vibes: 3–5 adjectives describing the feeling
Spacing: Spacing scale (sm, md, lg, xl) with pixel values
Guidelines: Layout direction, self-imposed rules

Part 2: Narrative Map

If you completed this in Week 5, review and refine. If not, create it now.

A table mapping your 5–7 sections:

Section	Metaphor Chapter	JS Concept	What Happens	Visual/Animation Notes
1: Hero	Opening of your story	Why learn code?	Hook the reader	Parallax entrance, GSAP timeline
2–7	Story chapters	Variables, events, conditionals, etc.	Teach through metaphor	ScrollTrigger reveals, parallax layers
8-10: Closing	Where the story leads	Reflection	Resolve the narrative	Gentle fade, quiet exit

Part 3: Full Page Design

This is the new work. Turn your style tile and narrative map into actual section designs.

Create 5–7 Figma Frames

One frame per scroll section. Think of these as storyboards — each frame is a scene.

For each frame:

Layout: Full-bleed, contained, split, centered? What's the structure?
Content placement: Where does text go? Images? SVGs? Code snippets?
Visual hierarchy: What's the biggest element? What draws the eye first?
Style tile applied: Colors, typography, spacing from your tokens
Motion annotations: Mark where GSAP, ScrollTrigger, or parallax will happen (use sticky notes, arrows, or a color-coded system)

Visual Rhythm Check

Lay all frames side by side in Figma. Scroll through them like a filmstrip:

Do adjacent sections look different enough?
Is there variety in layout? (Not all centered, not all left-aligned)
Does the pacing feel right? (Dense → spacious → dense → spacious)
Does the hero feel like a hook?
Does the closing feel like a resolution?

Parallax Annotations

For at least one section (hero recommended), mark the parallax layers:

Background layer: What element? How much does it move? (slow)
Midground layer: What element? How much does it move? (medium)
Foreground layer: What element? How much does it move? (fast or stationary)

Part 4: Figma Variables + Light/Dark Mode

Your design tokens must live as Figma variables — not just colors on a style tile.

Figma Variables (Required)

Color primitives: Raw hex values (e.g., blue-500: #3B82F6)
Semantic color tokens: Named by purpose (e.g., surface-primary, text-primary, accent, surface-secondary)
Typography tokens: Font family, sizes for each heading level and body
Spacing tokens: space-sm, space-md, space-lg, space-xl with pixel values

Light/Dark Mode (Required)

Create two modes for your color variables in Figma
Light mode: Default — your primary color scheme
Dark mode: Inverted surfaces and text, adjusted contrast
Test: does your design read well in both modes?
Contrast check: both modes pass WCAG AA (use WebAIM Contrast Checker)
Accent colors: these often stay the same across modes, but check contrast

If light/dark feels overwhelming: Start simple. Swap your surface and text colors. That's the core of dark mode. Accents usually stay the same.

Export Path

When you're ready to build in HTML (Week 7), you'll export these variables to a tokens.css file using a Figma plugin or manually. For now, just get the variables set up correctly in Figma.

Section Planning Guide

Section 1: Hero / Opening

Metaphor chapter: The beginning of your story
JS concept: Why learn code? What brought you here?
Visual approach: Full-bleed? Large typography? Illustration?
Animation note: This will have a GSAP entrance timeline + parallax layers

Sections 2–6: Story Chapters

For each middle section, decide:

Metaphor chapter: What part of your metaphor does this represent?
JS concept: Which concept are you explaining? (variables, events, conditionals, classList, tokens, localStorage)
Visual approach: Text-heavy or image-driven? How does it contrast with the previous section?
Animation note: How might ScrollTrigger reveal this content? Is there a parallax opportunity?

Section 7: Closing / What's Next

Metaphor chapter: Where the story leads
JS concept: Reflection, looking forward
Visual approach: Quieter, resolved, a breath
Animation note: Simple entrance, not GSAP-heavy — a gentle exit

Design Tips

Visual rhythm matters. Alternate between:

Full-bleed sections and contained sections
Text-heavy and image-driven
High-contrast and quieter moments
Dense and spacious

Think about scroll pacing. Taller sections = more scroll time = slower reading. Shorter sections = quicker pace. Use height intentionally.

The hero is your hook. Give it the most design attention. First impressions drive engagement. This is also where parallax will have the biggest impact.

Don't design for one mode. Switch between light and dark as you design. Make sure both modes tell the same story with the same visual strength.

Evaluation

Criteria	Points
Style tile complete (colors, type, icons, vibes, spacing)	10
Narrative map with 5–7 sections mapped to metaphor + JS concepts	10
5–7 Figma frames with layouts and content placement	25
Visual rhythm and variety across sections	5
Figma variables set up (primitives + semantic tokens)	10
Light/dark mode configured and contrast-checked	5
Motion/parallax annotations on at least one section	10

Inspiration

See the MIlanote Inspiration Board: https://app.milanote.com/1VPCwk1O6aPUfe?p=bneQoS8Q1HM

Engage 6-1 // Learning Log

engage/engage-6-0-learning-log.md

Engage 6-1 // Learning Log

Points: 10 Due: Sunday at 11:59pm

TL;DR

Reflect on what you learned in Week 5. Write about the concepts, what clicked, and what you're still working through.

Submit

Post your response on the Canvas discussion board (minimum 150 words).

The Prompt

Look back at everything you worked on in Week 5 and write about your experience. Use the questions below as a guide — you don't need to answer all of them, but your response should show genuine reflection, not just a summary.

What to Reflect On

Concepts from Week 5:

Style tiles and design tokens
Narrative maps / metaphor mapping
GSAP animation basics (gsap.to(), gsap.from(), gsap.fromTo())
Timelines, easing, and transformOrigin
Working with SVG icons (Lucide)
Using an AI model as a coding partner

Questions to consider:

What concept from Week 5 made the most sense to you? Why?
What are you still confused about or want more practice with?
How did your metaphor develop this week? Did it change or get clearer?
What was your experience using an AI model to help you code? What worked? What didn't?
What's one thing you built this week that you're proud of?
How does what you learned connect to your scrollytelling project?

Evaluation

Criteria	Points
Substantive reflection (not just listing what you did)	5
Connects learning to your project or personal understanding	5

Engage: Parallax Dissection

engage/engage-6-1-parallax-dissection.md

Engage: Parallax Dissection

Points: 10 (participation) Time: 20 minutes (in-class, Day 1)

TL;DR

Examine scrollytelling sites with a partner. Identify how parallax and scroll-driven animation create depth and pacing. Share one observation with the class.

The Activity

In pairs, open each of these sites on your laptop. Scroll slowly. Don't rush — the whole point is noticing what happens as you scroll.

Sites to Examine

Apple AirPods Pro — Product scroll narrative
The Pudding — Pick any visual essay from the homepage
Species in Pieces — CSS polygon art with scroll reveals
Lusion — Agency site with bold motion

For Each Site, Answer Three Questions

1. LAYERS: What elements move at different speeds? What stays still while other things move?

2. TRIGGERS: Where does animation start? Is it tied to scroll position (moves as you scroll) or just triggered by scroll (plays automatically when you reach it)?

3. PURPOSE: Does the parallax/motion serve the content — helping you understand the story — or is it decoration?

Write It Down

For each site, write one sentence using this format:

"[Site name] uses [technique] to [effect/purpose]."

Example: "Apple AirPods Pro uses parallax layers to make the product feel like it's floating in space as you scroll through features."

Share Out

Each pair shares one observation with the class. Pick your most interesting finding.

Why This Matters

You're about to plan motion for your own scrollytelling site. Seeing how professionals use parallax and scroll-driven animation teaches you what works — and what feels like too much. The best scroll experiences serve the story. The worst ones are just showing off.

Evaluation

Criteria	Points
Participated in pair analysis	5
Shared observation with class	5

Learn: Scrollytelling Readings + Visual Notes

learn/learn-6-1-scrollytelling-readings.md

Learn: Scrollytelling Readings + Visual Notes

Points: 10 (Complete/Incomplete)

Submission

What: A PDF scan of your notes
Name your file: week-6-notes-lastname.pdf
Upload to Canvas by Sunday at midnight

This Week's Focus

Create visual notes from this week's readings on scrollytelling.

You are not learning a tool yet. You are learning a pattern.

Your notes should help you understand how scrolling becomes a storytelling device that controls:

pacing
attention
reveal
emotion
meaning

Think of scrollytelling as choreographing information through space and time.

Required Reading (Pick 2)

Reading 1: Scrollytelling Fundamentals

Read: Webflow — A Guide to Scrollytelling Time: ~15–20 minutes

Focus on:

What scrollytelling is and is not
Why scroll is used instead of clicks
Narrative flow tied to vertical movement
Common scrollytelling structures

Reading 2: Editorial and Journalistic Scrollytelling

Read: Shorthand — An Introduction to Scrollytelling Time: ~10–15 minutes

Focus on:

Scrollytelling in journalism and longform stories
How text, images, and motion work together
The role of restraint and pacing
Reader immersion

Reading 3: Interactive and Educational Scrollytelling

Read: Genially — What Is Scrollytelling? Time: ~10 minutes

Focus on:

Scrollytelling beyond journalism
Educational and experiential uses
Engagement through interaction
When scrollytelling helps vs. hurts clarity

Reading 4: No-Code Scrollytelling Patterns

Read: Flourish — No-Code Scrollytelling Time: ~10 minutes

Focus on:

Scrollytelling as a pattern, not a technology
Separation of content and motion
Story-first thinking
Why tools come last

Requirements

Pages: 2–4 pages (5.5" × 8.5" each)
Medium: Moleskine Cahier notebook
Tools: Pen (any color that scans well)
Style: Hand-written with visual elements (sketches, diagrams, connections, etc.)

What to Include

Document anything that helps you process and remember the week's material:

Key concepts and definitions
Quick sketches or diagrams
Questions that came up
Connections between ideas
Personal insights or "aha" moments
Resources you want to remember

Focus Questions

As you take notes, consider these questions:

Question 1: What Is Scrollytelling Really Doing?

In your own words, define scrollytelling.

Draw a diagram showing:

Scroll position on the Y-axis
Story progression over time
How content is revealed or transformed

Include a metaphor of your own. Examples:

"Scroll as a camera move"
"Scroll as chapters unfolding"
"Scroll as a guided walk"

Question 2: Scroll as Pace Control

How does scrolling control speed and attention?

Create a visual comparison:

Fast scroll experience
Slow, deliberate scroll experience

Annotate:

When does the user pause?
When does something new appear?
What happens if everything animates at once?

Question 3: Structure Patterns

Identify at least three scrollytelling patterns from the readings.

For each, sketch:

Section layout
What stays fixed
What moves
What changes on scroll

Examples to look for:

Sticky elements
Progressive reveal
Section-based chapters
Background transitions

Question 4: When Scrollytelling Is a Bad Idea

Scrollytelling is not always the answer.

Create a decision chart:

What type of content benefits from scrollytelling?
What type of content does not?

Consider:

Accessibility
Cognitive load
Information density
User goals

Include at least one cautionary note.

Tips

Don't worry about perfection — focus on capturing ideas
Mix text and visuals in whatever way helps you learn
Use your own note-taking style
These are YOUR learning artifacts

Grading

✓ Complete (2–4 pages with genuine engagement)
✗ Incomplete (less than 2 pages or minimal effort)

Inspiration

For visual note-taking techniques and examples, check out:

Google's Sketchnotes Gallery
Search #sketchnotes on social media for community examples

Learn: Animating SVG Icons with GSAP + AI

learn/learn-6-2-svg-icons-gsap.md

Learn: Animating SVG Icons with GSAP + AI

Points: — (not graded, but required before Day 2) Time Estimate: 60–90 minutes

TL;DR

Follow this 11-step tutorial to build two animated bell icons in CodePen. You'll practice GSAP tweens (from Week 5), then learn two new plugins: DrawSVGPlugin and ScrollTrigger. Work with an AI model as your coding partner throughout.

Submit

Share your CodePen URL during the Day 2 check-in.

What You'll Build

A CodePen with two bell icons: one that rings on click, and one that draws itself in on scroll then undraws as you keep scrolling. You'll work with an AI model (ChatGPT, Claude, or Gemini) as your coding partner throughout.

Before You Start

Open a new pen on codepen.io. You'll be adding external libraries, writing HTML, CSS, and JS across the following steps.

Pick your AI model and keep it open in another tab. You'll be prompting it for help at each stage.

Step 1: Get the Bell Icon Rendering

Lucide is an open-source icon library that renders icons as inline SVGs. Your first task is to get a single bell icon showing up in CodePen.

Your tasks:

Find the Lucide CDN link and add it to your CodePen's external scripts (Settings → JS)
Add the HTML markup for a Lucide bell icon
Write the JavaScript to initialize Lucide so the icon actually renders

Inspect the result. Right-click the bell and choose "Inspect." What did Lucide do to your HTML? What element is actually in the DOM now?

If you're stuck, try asking your model:

"How do I use Lucide icons via CDN in a CodePen? I don't have access to npm imports."

Step 2: Make the Bell Bigger

The default icon is 24×24 pixels. Make it larger.

Your tasks:

Use CSS to increase the bell's size
Think about what selector targets the rendered SVG (hint: check what you saw in the inspector from Step 1)

If you're stuck, try asking your model:

"How do I target a rendered Lucide icon with CSS to change its size? What selector should I use?"

Step 3: Change the Bell's Color

Lucide icons are stroke-based SVGs. Make the bell a color other than black.

Your tasks:

Figure out which CSS property controls the color of a stroke-based SVG
Apply it to your bell

Pause and notice: Try setting both color and stroke — what happens with each? Why?

If you're stuck, try asking your model:

"How do I change the color of a Lucide SVG icon with CSS? Is it fill or stroke?"

Step 4: Make the Bell Ring with GSAP

Now add animation. You'll use GSAP (GreenSock Animation Platform) to create a ringing motion.

Your tasks:

Add GSAP via CDN to your CodePen's external scripts
Write a GSAP timeline that rotates the bell back and forth like it's ringing
Think about: where should the rotation pivot from? The center? The top? What looks more natural for a bell?

Key concept: A bell swings from where it hangs, not from its center. GSAP has a property that controls this.

If you're stuck, try asking your model:

"How do I animate an SVG element with GSAP to create a ringing bell effect? How do I set the pivot point so it swings from the top?"

Step 5: Add a Second Bell

Add a second bell icon to your HTML. Give each bell its own class (.bell-1 and .bell-2) so you can target them independently.

Your tasks:

Add the HTML for both bells with distinct classes
Make them different colors using CSS
Confirm both render correctly (remember: you only need to call createIcons() once)

If you're stuck, try asking your model:

"I have two Lucide bell icons with different classes. How do I style them with different colors? Do I need to call createIcons() for each one?"

Step 6: Stack the Bells

Position both bells so they overlap — one on top of the other. This is a CSS layout challenge.

Your tasks:

Use CSS positioning to stack the two bells
Make sure both are visible (their different colors should help)

If you're stuck, try asking your model:

"How do I use CSS to position two SVG elements so they're stacked directly on top of each other?"

Step 7: Ring Bell 1 on Click

Make the first bell ring only when you click it, not automatically.

Your tasks:

Modify your GSAP timeline so it starts paused
Add a click event listener that triggers the animation
Consider: should you use .play() or .restart() on click? What's the difference if someone clicks while it's already ringing?

If you're stuck, try asking your model:

"How do I make a GSAP timeline play only when an element is clicked? What's the difference between play() and restart()?"

Checkpoint: Steps 1–7 reinforced your Week 5 GSAP skills — tweens, timelines, event listeners, transform origin. Steps 8–11 introduce two new GSAP plugins you'll use throughout Project 2: DrawSVGPlugin and ScrollTrigger.

Step 8: Draw Bell 2 with DrawSVGPlugin

GSAP's DrawSVGPlugin animates the stroke of an SVG path — making it look like the icon is being drawn by hand.

Important: DrawSVGPlugin is a paid GSAP plugin, but GSAP provides free trial versions that work on CodePen. You need to find the correct CDN URL for the CodePen trial.

Your tasks:

Find and add the DrawSVGPlugin trial CDN to your external scripts
Register the plugin with GSAP
Start with the bell's strokes hidden, then animate them to fully drawn
Try using stagger to draw each path element one at a time instead of all at once

Pause and observe: Lucide's bell is made of multiple <path> and <line> elements. Inspect the SVG to see them. The stagger property animates each one sequentially.

If you're stuck, try asking your model:

"How do I use GSAP's DrawSVGPlugin in CodePen? Where is the trial CDN? How do I animate an SVG so it looks like it's being drawn?"

Step 9: Drive the Draw Animation with ScrollTrigger

Instead of the draw animation playing immediately, tie it to the user's scroll position.

Your tasks:

Add the ScrollTrigger CDN to your external scripts
Register ScrollTrigger with GSAP
Connect your draw timeline to scroll using ScrollTrigger's scrub property
Add enough content/spacing in your HTML so the page is actually scrollable

Critical detail: ScrollTrigger won't work if there's nothing to scroll. You need the page to be taller than the viewport.

Turn on markers: true in your ScrollTrigger config so you can see exactly where the animation starts and ends.

If you're stuck, try asking your model:

"How do I use GSAP ScrollTrigger to tie a timeline to scroll position? The animation isn't working — could it be because my page isn't scrollable?"

Step 10: Undraw on Continued Scroll

Once the bell is fully drawn, continuing to scroll should undraw it — reversing the stroke animation.

Your tasks:

Add a second tween to your timeline that animates drawSVG back to 0%
Adjust your ScrollTrigger's end value so there's enough scroll range for both the draw and undraw
Scroll up and down — the whole sequence should scrub in both directions

If you're stuck, try asking your model:

"I have a DrawSVG animation on a scrubbed ScrollTrigger timeline. How do I add a second phase that undraws the SVG if the user keeps scrolling?"

Step 11: Ring at Full Draw

When the bell reaches 100% drawn (the midpoint of your scroll range), trigger the ring animation.

The challenge: The ring animation shouldn't be scrubbed — it needs to play freely at normal speed regardless of scroll. But it should fire at the right moment in the scrubbed timeline.

Your tasks:

Create a separate ring timeline (paused)
Figure out how to trigger it when the draw-in tween completes, even though the parent timeline is scrubbed
Look into GSAP's tween callbacks

If you're stuck, try asking your model:

"I have a scrubbed ScrollTrigger timeline. How do I fire a separate, non-scrubbed animation when a specific tween in that timeline completes? What callbacks are available on GSAP tweens?"

Reflection

Look at what you've built and consider:

How does scrub: true change the relationship between animation and user input?
What's the difference between an animation that plays and one that's driven by scroll?
When would you use onComplete vs. adding more tweens to the same timeline?
How did working with an AI model change your debugging process?

Reference: External Scripts Order

Your final CodePen should have these external scripts in Settings → JS, in this order:

Lucide (CDN)
GSAP core
DrawSVGPlugin (CodePen trial)
ScrollTrigger

The exact URLs are part of the exercise — use your AI model to find them if needed.

Connection to Course

This Tutorial	Connects To
Steps 1–7: GSAP tweens, timelines, events	Week 5 GSAP fundamentals
Step 8: DrawSVGPlugin	Your scrollytelling SVG illustrations
Steps 9–11: ScrollTrigger + scrub	Week 6 parallax practice, Week 7+ project build
AI as coding partner	Workflow for all future assignments

The skills from this tutorial — especially ScrollTrigger and DrawSVG — are the exact tools you'll use to bring your scrollytelling site to life.

Learn: GSAP ScrollTrigger + Parallax

learn/learn-6-3-gsap-scrolltrigger.md

Learn: GSAP ScrollTrigger + Parallax

Points: — (not graded, but required before Day 2) Time Estimate: 30–40 minutes

TL;DR

Watch 3 short videos and read one doc page about GSAP ScrollTrigger and parallax. Understand how scroll position can drive animation before you get to class on Day 2.

What to Watch

1. GSAP ScrollTrigger — Getting Started (Required)

GreenSock ScrollTrigger Introduction ~10 minutes

Watch for:

What does scrub do to an animation?
What are markers and why do you turn them on?
What's the difference between trigger, start, and end?

2. Parallax Scrolling with GSAP (Required)

Search YouTube: "GSAP ScrollTrigger parallax tutorial" — pick one under 10 minutes from a channel you trust (DesignCourse, Developedbyed, or similar).

Watch for:

What creates the illusion of depth?
How do layers move at different speeds?
What CSS property is being animated? (Hint: it's y via transform)

3. GSAP Plugins Overview (Recommended)

GSAP Plugins — What's Available Browse the plugin page. ~5 minutes.

Look for:

DrawSVGPlugin — what can it animate?
ScrollTrigger — how does it connect to tweens and timelines?
MorphSVGPlugin, MotionPathPlugin — what else exists that you might want to try?
Where do you find the free CodePen trial CDN links for premium plugins?

What to Read

ScrollTrigger Documentation (Required)

GSAP ScrollTrigger Docs

Focus on these properties:

Property	What It Does
`trigger`	The element ScrollTrigger watches
`start`	Where the trigger must be to begin the animation (e.g., `"top 80%"`)
`end`	Where the trigger must be to end the animation (e.g., `"top 20%"`)
`scrub`	Links animation progress to scroll progress (1:1)
`markers`	Shows visual start/end lines for debugging
`toggleActions`	What happens on enter, leave, enter-back, leave-back

You don't need to memorize all of this. Bookmark the page — you'll reference it constantly.

The Key Concept

ScrollTrigger turns scroll position into a timeline controller.

Without ScrollTrigger	With ScrollTrigger	With Scrub
Animation plays on page load	Animation plays when you scroll to it	Animation progress IS scroll progress
Time-based	Position-triggered	Position-driven
`gsap.to(".el", { ... })`	`gsap.to(".el", { scrollTrigger: { ... } })`	`scrollTrigger: { scrub: true }`

Parallax uses this principle: different layers respond to the same scroll at different speeds, creating depth.

GSAP Tween Methods — Quick Review

You learned these in Week 5. Here's the cheat sheet:

// Animate FROM current state TO these values
gsap.to(".element", { x: 100, opacity: 0.5, duration: 1 });

// Animate FROM these values TO current state
gsap.from(".element", { y: 50, opacity: 0, duration: 1 });

// Animate FROM first values TO second values
gsap.fromTo(".element",
  { opacity: 0, y: 30 },    // from
  { opacity: 1, y: 0, duration: 1 }  // to
);

Any of these can have a scrollTrigger added to them. That's the Week 6 upgrade.

What to Notice

As you watch these videos, think about your scrollytelling site:

Which sections should animate when you scroll to them? (toggleActions)
Which sections should be "scrubbed" — tied directly to scroll position?
Where could parallax create depth? (Hero? Transitions between chapters? Background illustrations?)
Which GSAP method fits each section? (gsap.to, gsap.from, gsap.fromTo)

Jot down 2–3 ideas. You'll use them in your Reflect 6-1 motion map.

Connection to Course

This week you're learning the tools in isolation (CodePen exercises). Starting Week 7, you'll apply ScrollTrigger and parallax to your actual scrollytelling project. The better you understand these concepts now, the smoother the build goes.

Practice: The Parallax

practice/practice-6-1-the-parallax.md

Practice: The Parallax

Points: 10 Time Estimate: 30–45 minutes (in-class, Day 2)

TL;DR

Build a 3-layer parallax scene in CodePen using GSAP ScrollTrigger. Background, midground, and foreground move at different speeds as you scroll — creating the illusion of depth.

Submit

CodePen URL to Canvas.

Overview

Parallax creates the illusion of depth by moving layers at different speeds. You've seen this in games, films, and the websites you analyzed in Engage 6-1. Now you build it.

This is a controlled exercise — a single scene, not your full project. The techniques transfer directly to your scrollytelling site.

What You're Building

A scrollable page with a "scene" section containing three layers:

Background — moves slowest (barely moves)
Midground — moves at medium speed
Foreground — moves fastest or stays completely still

As the user scrolls, the layers separate, creating depth.

What You're Learning

How to register and configure GSAP ScrollTrigger
How scrub: true ties animation to scroll position
How different y values on the same scroll range create parallax depth
How to use markers: true for visual debugging
How ease: "none" creates smooth, linear scroll-driven movement

Requirements

Core

GSAP + ScrollTrigger loaded via CDN
ScrollTrigger registered: gsap.registerPlugin(ScrollTrigger)
3 visual layers with different content (background, midground, foreground)
Each layer animated with gsap.to() + scrollTrigger config
Each layer moves a different distance (different y values)
markers: true turned on for debugging
Page is scrollable (enough content/height above and below the scene)
ease: "none" on all parallax tweens

Stretch Goals

A 4th decorative layer (clouds, particles, shapes, or SVG illustrations)
Opacity change on one layer (fades as it scrolls)
Scale change on foreground (grows slightly as you scroll)
Color or filter shift on background layer
Add a second scene with different parallax speeds

Starter Code

HTML

<!-- Spacer: gives room to scroll before the scene -->
<section class="spacer">
  <h1>Scroll Down</h1>
</section>

<!-- The parallax scene -->
<section class="parallax-scene">
  <div class="layer layer--bg">
    <div class="bg-shape"></div>
  </div>
  <div class="layer layer--mid">
    <p class="mid-text">midground element</p>
  </div>
  <div class="layer layer--fg">
    <h2 class="fg-heading">Foreground</h2>
  </div>
</section>

<!-- Spacer: gives room to scroll after the scene -->
<section class="spacer">
  <p>Keep scrolling...</p>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  color: #f0f0f0;
  background: #1a1a2e;
}

.spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The scene container */
.parallax-scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* All layers fill the scene */
.layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background layer */
.layer--bg {
  z-index: 1;
}

.bg-shape {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #16213e;
  border: 2px solid #0f3460;
}

/* Midground layer */
.layer--mid {
  z-index: 2;
}

.mid-text {
  font-size: 1.5rem;
  color: #e94560;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Foreground layer */
.layer--fg {
  z-index: 3;
}

.fg-heading {
  font-size: 4rem;
  font-weight: 900;
  color: #f0f0f0;
}

JavaScript

gsap.registerPlugin(ScrollTrigger);

// Layer 1: Background — moves the LEAST (slow = far away)
gsap.to(".layer--bg", {
  y: -50,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-scene",
    start: "top bottom",
    end: "bottom top",
    scrub: true,
    markers: true
  }
});

// YOUR TURN: Add Layer 2 (midground)
// Hint: use a larger y value than the background
// gsap.to(".layer--mid", { ... })

// YOUR TURN: Add Layer 3 (foreground)
// Hint: use the largest y value, or try y: 0 (stationary)
// gsap.to(".layer--fg", { ... })

Step-by-Step Guide

1. Set Up the CodePen

Add these external scripts in Settings → JS (in this order):

GSAP core: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js
ScrollTrigger: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js

2. Paste the Starter Code

Copy the HTML, CSS, and JS into your CodePen. You should see a page with three sections and markers visible.

3. Scroll and Observe

The background layer should move slightly as you scroll. The markers show where ScrollTrigger starts (start) and ends (end).

4. Add the Midground Layer

Write a gsap.to() for .layer--mid with a larger y value. Try y: -150. Use the same scrollTrigger config (same trigger, start, end, scrub).

5. Add the Foreground Layer

Write a gsap.to() for .layer--fg. Try y: -300 for fast movement, or y: 0 to keep it stationary (stationary foreground + moving background also creates depth).

6. Feel the Depth

Scroll up and down. Do the layers feel like they're at different distances? If not, increase the difference between y values.

7. Experiment

Try positive y values — what happens?
Try different values: -30, -100, -250
What happens if background and foreground have the same y?

8. Customize

Replace the placeholder content with something that fits your style:

Background: a gradient, a large shape, or an image
Midground: an SVG, a decorative element, or text
Foreground: your heading or hero content

9. Clean Up

Once satisfied, remove markers: true from all three tweens. Your parallax scene should feel smooth and natural.

The Key Insight

All three animations share the same trigger and scroll range. The depth illusion comes entirely from different y distances:

Layer	`y` Value	Speed	Perception
Background	`-50`	Barely moves	Far away
Midground	`-150`	Moves more	Middle distance
Foreground	`-300` or `0`	Moves most (or stays still)	Close to you

The minus sign means the element moves up as you scroll down. Experiment with positive values too.

Troubleshooting

Problem	Fix
Nothing animates	Did you register the plugin? `gsap.registerPlugin(ScrollTrigger)`
ScrollTrigger doesn't work	Is the page scrollable? You need spacer sections above and below.
Markers don't appear	Is `markers: true` inside the `scrollTrigger: { }` object? Not outside it.
No depth feeling	The `y` values are too similar. Try `-50`, `-150`, `-300` — big differences.
Layers not visible	Check `z-index` values. Higher z-index = closer to viewer.
Animation is jerky	Make sure `ease: "none"` is set. Non-linear easing looks weird on scrubbed parallax.
Animation plays on load, not scroll	The `scrollTrigger` config must be INSIDE the `gsap.to()` options, not separate.

Complete Criteria

Your parallax CodePen is complete when:

3 layers move at visibly different speeds on scroll
ScrollTrigger is properly configured with scrub: true
The depth illusion is perceptible (you can feel the layers)
Code is clean and each tween is commented with what layer it controls

Evaluation

Criteria	Points
3 layers with different scroll speeds	4
ScrollTrigger configured correctly (trigger, start, end, scrub)	3
Visual depth effect is perceptible	2
Code is clean and commented	1

Connection to Course

This parallax technique goes directly into your scrollytelling site. Your hero section, chapter transitions, or background illustrations can all use this same pattern. In Week 7, you'll apply this to your actual project HTML — the CodePen is your sandbox for learning the technique first.

Resources

Reflect: Visual Notes — Motion Map

reflect/reflect-6-1-visual-notes.md

Reflect: Visual Notes — Motion Map

Points: 10 (Complete/Incomplete) Time Estimate: 20–30 minutes

TL;DR

Build a motion map in Milanote. Drop in screenshots of your Figma sections, draw arrows showing animation direction, add reference examples from real sites, and label every planned animation with the GSAP method you'll use.

Submit

Share your Milanote board link on Canvas (view access)

What You're Building

A Milanote board that maps out every animation in your scrollytelling site. This is part mood board, part technical plan — you're combining visual references with specific GSAP decisions.

How to Set It Up

Create a new Milanote board: Motion Map — [Your Name]
Screenshot each Figma section and drag them onto the board in scroll order (top to bottom or left to right)
Between and on top of each screenshot, add your annotations using Milanote's tools:
- Arrows → show animation direction (fade up, slide left, parallax movement)
- Notes/cards → label the GSAP method and animation type
- Images → drop in reference examples from real sites that do what you want
- Color coding → use different colors for different animation types
- Drawing → sketch layer diagrams, motion paths, or timing notes

What to Annotate

1. Where Will Animation Happen?

For each section, mark every element that will animate. Use arrows to show direction of movement. Be specific:

"This heading fades in from below" (arrow pointing up)
"This background image moves slower than the text" (small arrow vs. large arrow)
"This SVG draws itself on scroll" (path trace)

2. What Kind of Animation?

Label each with the type (use colored notes or tags):

"parallax" — layers moving at different speeds
"scroll-trigger entrance" — element fades/slides in when scrolled to
"scrubbed" — animation tied directly to scroll position
"timeline" — multi-element coordinated sequence
"draw-on" — SVG stroke animation (DrawSVGPlugin)

3. What GSAP Method?

Next to each animation, note what you'll use:

gsap.to() — animate to new values
gsap.from() — animate from values (element "arrives")
gsap.fromTo() — control both start and end
gsap.timeline() — sequence multiple animations
ScrollTrigger — driven by or triggered by scroll
DrawSVGPlugin — SVG stroke animation

4. Reference Examples

For each animation type you're planning, find and add a reference — a screenshot, GIF, or link from a real site that does something similar to what you want. Drop it next to the section where you'll use it.

Examples of where to find references:

Sites from Engage 6-1 (Apple AirPods Pro, The Pudding, etc.)
GSAP ScrollTrigger Demos
Awwwards — search "scroll animation"
The class Milanote inspiration board

5. Where Is Parallax?

Mark at least one section with parallax layers. Draw or diagram the layers:

Background (moves slowest)
Midground (moves at medium speed)
Foreground (moves fastest or stays still)

Use arrows to show relative speed. Add a reference example of parallax you want to emulate.

6. Where Is Your Showpiece?

Mark the one section that will be your most ambitious scroll moment. Add a note explaining:

What happens in this section?
Why is this the "wow" moment?
What reference site inspired this?

Why This Matters

You've learned the tools: GSAP tweens (Week 5), ScrollTrigger and parallax (Week 6). You've designed the site (Build 6-1). This motion map is the bridge between design and code. Every arrow becomes a line of JavaScript. Every reference becomes a target to aim for.

Animation without intention is decoration. Animation with intention is design.

Evaluation

Criteria	Points
All section designs present with animation annotations	3
At least 5 animation points marked with type and GSAP method	3
Reference examples included for planned animations	2
Parallax layers and showpiece section identified	2

Reflect: Visual Notes — ScrollTrigger + Parallax

reflect/reflect-6-2-visual-notes.md

Reflect: Visual Notes — ScrollTrigger + Parallax

Points: 10 (Complete/Incomplete)

Submission

What: A PDF scan of your notes
Name your file: week-5-notes-scrolltrigger-lastname.pdf
Upload to Canvas by Sunday at midnight

This Week's Focus

Create visual notes from the GSAP ScrollTrigger and parallax resources below.

You're learning a new relationship between user input and animation. Up until now, animations play on a timer. ScrollTrigger changes that — scroll becomes the controller.

Your notes should help you understand:

How scroll position replaces time as an animation driver
What scrub, trigger, start, end, and markers do
How parallax uses different speeds to create depth
Which GSAP tween methods (gsap.to, gsap.from, gsap.fromTo) fit different situations

Required Resources (Watch/Read All)

Video 1: GSAP ScrollTrigger — Getting Started (Required)

Watch: GreenSock ScrollTrigger Introduction Time: ~10 minutes

Focus on:

What does scrub do to an animation?
What are markers and why do you turn them on?
What's the difference between trigger, start, and end?

Video 2: Parallax Scrolling with GSAP (Required)

Watch: Search YouTube: "GSAP ScrollTrigger parallax tutorial" — pick one under 10 minutes from a channel you trust (DesignCourse, Developedbyed, or similar).

Focus on:

What creates the illusion of depth?
How do layers move at different speeds?
What CSS property is being animated? (Hint: it's y via transform)

Video 3: GSAP Plugins Overview (Recommended)

Browse: GSAP Plugins — What's Available Time: ~5 minutes

Look for:

DrawSVGPlugin — what can it animate?
ScrollTrigger — how does it connect to tweens and timelines?
MorphSVGPlugin, MotionPathPlugin — what else could you use?
Where do you find the free CodePen trial CDN links?

Reading: ScrollTrigger Documentation (Required)

Read: GSAP ScrollTrigger Docs Time: ~10 minutes

Focus on these properties: trigger, start, end, scrub, markers, toggleActions

Requirements

Pages: 2–4 pages (5.5" × 8.5" each)
Medium: Moleskine Cahier notebook
Tools: Pen (any color that scans well)
Style: Hand-written with visual elements (sketches, diagrams, connections, etc.)

What to Include

Document anything that helps you process and remember the material:

Key concepts and definitions
Quick sketches or diagrams
Code snippets you want to remember
Questions that came up
Connections to your scrollytelling project
Personal insights or "aha" moments

Focus Questions

Question 1: Time vs. Scroll

ScrollTrigger changes what drives an animation.

Draw a comparison diagram:

	Without ScrollTrigger	With ScrollTrigger	With Scrub
What drives it?	Time (seconds)	Scroll position (triggers)	Scroll position (1:1)
When does it play?	Page load	When element enters viewport	As you scroll

Sketch what each feels like from the user's perspective. When would you use each?

Question 2: The ScrollTrigger Anatomy

Draw a diagram of how ScrollTrigger works. Include:

A viewport (the browser window)
A trigger element (a section on the page)
Where start and end are relative to the viewport
Where markers appear
What happens in the scroll range between start and end

Label: trigger, start, end, scrub, markers

Question 3: Parallax = Layers at Different Speeds

Draw a parallax scene with three layers:

Background — moves slowest (small y value, e.g., -50)
Midground — moves at medium speed (e.g., -150)
Foreground — moves fastest or stays still (e.g., -300 or 0)

Show with arrows how each layer moves as the user scrolls down. Why does this create the feeling of depth?

Question 4: Tween Methods Cheat Sheet

Sketch or write out the three GSAP tween methods:

gsap.to()     → animate FROM current state TO new values
gsap.from()   → animate FROM values TO current state
gsap.fromTo() → animate FROM start values TO end values

For each, draw a quick example: What would gsap.from(".heading", { opacity: 0, y: 50 }) look like? What about gsap.to(".bg", { y: -100 })?

Which method would you use for:

A heading that fades in from below? (gsap.from)
A background that moves up on scroll? (gsap.to)
An element that goes from small and invisible to full size? (gsap.fromTo)

Question 5: Your Project Connection

Think about your scrollytelling site. Sketch one section and annotate:

Where would you use ScrollTrigger?
Would it be scrubbed or triggered?
Could parallax work here? Which elements would be on which layer?
Which tween method fits?

Tips

Don't worry about perfection — focus on capturing ideas
Draw the diagrams — ScrollTrigger is spatial, so visual notes work better than text
Copy code snippets by hand — writing it helps you remember the syntax
These are YOUR learning artifacts

Grading

✓ Complete (2–4 pages with genuine engagement)
✗ Incomplete (less than 2 pages or minimal effort)

Inspiration

For visual note-taking techniques:

Google's Sketchnotes Gallery
Search #sketchnotes on social media for community examples

Week 6 Resources: The Blueprint

resources/week-6-resources.md

Week 6 Resources: The Blueprint

Assigned (Before Day 2)

Resource	Type	Time
GSAP ScrollTrigger — Getting Started	Docs + Demos	10 min
GSAP ScrollTrigger Docs	Reference	10 min
Learn 6-2: Animating SVG Icons with GSAP + AI (in-course tutorial)	Tutorial	60–90 min

Reference

Resource	Why
GSAP ScrollTrigger API	Full property reference — bookmark this
DrawSVGPlugin Docs	SVG stroke animation API
GSAP .to() Docs	Tween method reference
GSAP .from() Docs	Tween method reference
GSAP .fromTo() Docs	Tween method reference
GSAP Plugins Overview	See all available plugins
GreenSock CodePen Collection	Official examples with premium plugins enabled

Video

Resource	Time	Why
GSAP in 100 Seconds — Fireship	2 min	Quick refresher on GSAP core concepts
GSAP ScrollTrigger Introduction	~10 min	Official GreenSock ScrollTrigger walkthrough
Parallax Scrolling Effect with GSAP	8–15 min	Search and pick one under 15 min from a trusted channel
Kevin Powell: Parallax Scroll Effect	10–15 min	Designer-friendly, CSS-first then enhanced

Deep Dive

Resource	Why
GSAP ScrollTrigger — Common Mistakes	Avoid the pitfalls before you hit them
GSAP ScrollTrigger — Most Common Mistakes (video)	Visual walkthrough of what goes wrong and why
Smashing Magazine: Practical Guide to Scroll-Driven Animations	In-depth parallax and scroll animation theory
web.dev: Scroll-Driven Animations	Native CSS scroll APIs (context, not for this project)

Tools

Tool	Use
GSAP ScrollTrigger Demos	Official interactive demos — fork and study
GSAP Ease Visualizer	Pick and preview easing curves (bookmark this)
CodePen	Where all GSAP premium plugins work free (DrawSVG, MorphSVG, etc.)
Figma Variables Guide	Setting up variables and modes
WebAIM Contrast Checker	Verify WCAG AA contrast for light/dark modes

Inspiration

Site	What to Notice
Apple AirPods Pro	Product parallax with scroll-driven reveals — layers create depth
The Pudding	Data-driven scrollytelling with intentional pacing — content drives the motion
Species in Pieces	Polygon art with scroll reveals — each section has a distinct rhythm
Lusion	Agency site with bold parallax and 3D depth
Linear	Subtle entrance animations and parallax on a product page
Locomotive Scroll Demos	Smooth scroll parallax with configurable depth

Cheat Sheet: GSAP ScrollTrigger + Parallax

Register ScrollTrigger

gsap.registerPlugin(ScrollTrigger);

Trigger an Animation on Scroll

gsap.from(".element", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    trigger: ".element",
    start: "top 80%",      // element top hits 80% of viewport
    end: "top 20%",
    markers: true,           // remove in production
    toggleActions: "play none none reverse"
  }
});

Scrubbed Animation (progress = scroll)

gsap.to(".progress-bar", {
  scaleX: 1,
  ease: "none",
  scrollTrigger: {
    trigger: ".story",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});

Parallax Layers

// Same trigger, different speeds = depth
const parallaxTrigger = {
  trigger: ".scene",
  start: "top bottom",
  end: "bottom top",
  scrub: true
};

gsap.to(".layer--bg",  { y: -50,  ease: "none", scrollTrigger: parallaxTrigger });
gsap.to(".layer--mid", { y: -150, ease: "none", scrollTrigger: {...parallaxTrigger} });
gsap.to(".layer--fg",  { y: -300, ease: "none", scrollTrigger: {...parallaxTrigger} });

Tween Methods

// Animate FROM current → TO these values
gsap.to(".el", { x: 100, opacity: 0.5, duration: 1 });

// Animate FROM these values → TO current
gsap.from(".el", { y: 50, opacity: 0, duration: 1 });

// Animate FROM start → TO end (full control)
gsap.fromTo(".el",
  { opacity: 0, scale: 0.8 },
  { opacity: 1, scale: 1, duration: 1 }
);

Reduced Motion Check

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

if (!prefersReducedMotion) {
  // Your GSAP animations here
}

Week 6: The Blueprint

week-overview.md

Week 6: The Blueprint

Unit 2: Teaching Through Story Interaction Question: What happens when the page moves with you?

Learning Outcomes

By the end of this week, students will be able to:

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

Two-Day Breakdown

Day 1: ScrollTrigger + Design Foundation

Duration: 90 minutes

Time	Activity	Description
0:00	Opening	Pull up a parallax scrollytelling site (Apple AirPods Pro). Scroll slowly together. "Not everything moves at the same speed. Why does this feel different from a normal webpage?"
0:10	Concept: ScrollTrigger	Scroll as a timeline controller. Instead of time driving animation, scroll position drives it. Introduce `trigger`, `start`, `end`, `scrub`, `markers`. Draw it on the whiteboard.
0:25	Live Demo: ScrollTrigger Basics	In CodePen: load GSAP + ScrollTrigger via CDN. Create 3 colored sections. Animate an element with `gsap.to()` + `scrollTrigger: {}`. Turn on `markers: true`. Show `scrub: true` vs. `scrub: false`. Change `start` and `end` — watch the markers move. Break it intentionally, then fix it.
0:45	Break	—
0:55	Engage 6-1: Parallax Dissection	In pairs, students examine 3–4 scrollytelling sites. For each: identify layers (what moves at different speeds), triggers (scroll-driven vs. auto-play), purpose (serves content or decoration?). Share one observation per pair.
1:15	Design Check-in + Work Time	Quick class poll: "Who has their style tile done? Who has a narrative map?" Review what the Blueprint assignment requires. Students who have style tiles start extending them into full section designs.
1:30	Closing	Assign: Learn 6-1 (Scrollytelling readings + visual notes, due Sunday), Learn 6-2 (SVG Icons tutorial, before Day 2), Build 6-1 (The Blueprint, due Sunday)

Deliverables assigned:

Engage 6-1: Parallax Dissection (in-class)
Learn 6-1: Scrollytelling Readings + Visual Notes (due Sunday)
Learn 6-2: Animating SVG Icons with GSAP + AI (before Day 2)
Build 6-1: The Blueprint (due Sunday)
Reflect 6-1: Visual Notes — Motion Map (due Sunday)

Day 2: Parallax Implementation

Duration: 90 minutes

Time	Activity	Description
0:00	Opening: Tutorial Check-in	"How did the SVG Icons tutorial go? What was the difference between a scrubbed animation and one that just plays?" Quick show of hands: who got DrawSVG working? Who got the scroll-driven draw/undraw?
0:10	Figma Gallery Walk	Students show their Blueprint progress on screens. Walk around, observe. Quick verbal feedback: "I notice your sections have good rhythm" or "Think about what happens between these two sections."
0:20	Concept: Parallax	What parallax is: layers moving at different speeds to create depth. Show the principle with a simple diagram (foreground, midground, background). Connect to film: dolly shots vs. static camera. In GSAP: different `y` distances for different layers on the same scroll range.
0:35	Live Demo: Building Parallax	In CodePen: a hero section with a background element, a midground SVG, and foreground text. Each layer gets its own `gsap.to()` with ScrollTrigger, all sharing the same trigger but moving different distances. Show how adjusting `y` values changes the depth feel. Add `ease: "none"` for linear parallax.
0:50	Break	—
1:00	Practice 6-1: The Parallax	Students build a 3-layer parallax scene in CodePen. Background (barely moves), midground (moves more), foreground (moves most or stays still). Instructor circulates for troubleshooting.
1:30	Closing	Preview: "You've designed your site, you've learned ScrollTrigger and parallax in isolation. Next week: you start building the real thing." Remind: Build 6-1 + Reflect 6-1 due Sunday.

Deliverables assigned:

Practice 6-1: The Parallax (in-class, finish by end of Day 2)
Reflect 6-1: Visual Notes — Motion Map (due Sunday)

Activities

Type	Activity	Points	Due
Learn 6-1	Scrollytelling Readings + Visual Notes	10	Sunday
Learn 6-2	Animating SVG Icons with GSAP + AI	—	Before Day 2
Learn 6-3	GSAP ScrollTrigger + Parallax	—	Before Day 2
Engage 6-1	Parallax Dissection	10	Day 1 (in-class)
Practice 6-1	The Parallax	10	End of Day 2
Build 6-1	The Blueprint	10	Sunday
Reflect 6-1	Visual Notes: Motion Map	10	Sunday

See learn/, practice/, build/, engage/, and reflect/ folders for activity files.

Topics Covered

Concept	Depth	Notes
GSAP ScrollTrigger	Deep	`trigger`, `start`, `end`, `markers`, `scrub`, `toggleActions`
Parallax scrolling	Practical + Conceptual	Layer concept, implementation with ScrollTrigger
DrawSVGPlugin	Hands-on (via tutorial)	Stroke animation tied to scroll
GSAP Tweens	Review + Practical	`gsap.to()`, `gsap.from()`, `gsap.fromTo()`
Figma design for scrollytelling	Hands-on	Full section design, visual rhythm
Figma variables and tokens	Completion	Primitives, semantic tokens, light/dark mode
Motion planning	Conceptual	Annotating designs with animation intent
Scroll as input	Conceptual	Scroll position as timeline controller
Scrollytelling as a pattern	Conceptual (via readings)	Pacing, attention, reveal, structure patterns

Project Milestone

Project 2: "The Long Way Down" — Week 6 checkpoint

Complete Figma design with 5–7 sections
Each section maps to a metaphor chapter and JS concept
Figma variables set up (primitives + semantic tokens)
Light/dark mode tokens configured
Style tile applied to all section designs
Visual rhythm established (sections look different, not repetitive)
Motion annotations on design (where GSAP, ScrollTrigger, parallax will go)
Parallax CodePen exercise completed

Key Vocabulary

Term	Definition
ScrollTrigger	A GSAP plugin that triggers or drives animations based on scroll position
trigger	The element ScrollTrigger watches to determine when animation starts
start / end	Where in the viewport the trigger element must be to begin/end the animation
scrub	Links animation progress directly to scroll progress (1:1 relationship)
markers	Visual debugging aids that show where ScrollTrigger starts and ends
parallax	An effect where layers move at different speeds to create an illusion of depth
DrawSVGPlugin	A GSAP plugin that animates SVG stroke drawing (as if drawn by hand)
toggleActions	ScrollTrigger property controlling what happens on enter, leave, enter-back, leave-back
gsap.to()	Animate FROM current state TO specified values
gsap.from()	Animate FROM specified values TO current state
gsap.fromTo()	Animate FROM specified start values TO specified end values

Common Struggles & Solutions

Struggle	Solution
ScrollTrigger animation doesn't play	Is the page scrollable? ScrollTrigger needs scroll room. Add enough content or section height.
Markers don't show up	Make sure `markers: true` is inside the `scrollTrigger` object, not outside it.
Animation plays immediately instead of on scroll	Did you forget `scrollTrigger: { ... }` inside your tween? Without it, GSAP plays on load.
Parallax layers don't feel like depth	The y-value difference between layers is too small. Try -50 (bg), -150 (mid), -300 (fg).
DrawSVGPlugin not working	It's a premium plugin. Only works on CodePen with the trial CDN. Check the URL.
Figma variables are confusing	Start with colors: raw hex = primitive, named purpose = semantic (`surface-primary`, `text-primary`).
Light/dark mode feels overwhelming	Focus on swapping surface and text colors first. Accent colors often stay the same.
Sections all look the same in Figma	Check your visual rhythm. Alternate: full-bleed ↔ contained, text ↔ image, dense ↔ spacious.

Code Patterns Introduced

Basic ScrollTrigger

gsap.registerPlugin(ScrollTrigger);

gsap.from(".chapter", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    trigger: ".chapter",
    start: "top 80%",
    end: "top 20%",
    markers: true,
    toggleActions: "play none none reverse"
  }
});

Scrubbed Animation

gsap.to(".progress-bar", {
  scaleX: 1,
  ease: "none",
  scrollTrigger: {
    trigger: ".story",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});

Parallax Layers

// Same trigger, different speeds = depth
gsap.to(".layer--bg", {
  y: -50,
  ease: "none",
  scrollTrigger: {
    trigger: ".scene",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

gsap.to(".layer--mid", {
  y: -150,
  ease: "none",
  scrollTrigger: {
    trigger: ".scene",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

gsap.to(".layer--fg", {
  y: -300,
  ease: "none",
  scrollTrigger: {
    trigger: ".scene",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

Accessibility Focus

Parallax and prefers-reduced-motion: All scroll-driven animations must respect prefers-reduced-motion: reduce. Wrap GSAP animations in a media query check or use ScrollTrigger's built-in support.
Content without JavaScript: The Figma design should ensure all content is readable in a static layout. Parallax and ScrollTrigger are enhancements.
Contrast in both modes: Light and dark mode tokens must both pass WCAG AA contrast requirements.

Connections

Connects To	How
Week 5	Style tiles and narrative maps become full Figma designs
Week 5	GSAP fundamentals (tweens, eases) now get ScrollTrigger and parallax
Week 2	Same tokens workflow, now with light/dark mode
Week 7	Figma designs become HTML/CSS, GSAP applied to real project
Week 8	ScrollTrigger knowledge deepens with pinned sections

Instructor Notes

The Blueprint didn't happen in Week 5. This is the catch-up. Students need the full Figma design before they can build in HTML. Don't rush past this.
No CSS animations this semester. We're going straight from CSS transitions (hover/focus) to GSAP for all animation. Students don't need @keyframes.
The SVG Icons tutorial is meaty. Give students a heads-up that Learn 6-2 takes 60–90 minutes. They should start it before Day 2, not the night before.
Parallax is the hook. Students have seen parallax on websites they admire. Connecting GSAP ScrollTrigger to parallax makes the tool immediately exciting.
Gallery walk is fast. 10 minutes max. The goal is quick peer exposure, not detailed critique. Save deep feedback for Week 7 when they're building in code.
Light/dark mode is required. Every student must set up dual-mode tokens in Figma. If they're struggling, start simple: swap surface and text colors. Accents can stay the same.
Students can use any GSAP plugins they want. ScrollTrigger and DrawSVG are the focus, but if they discover MotionPath, MorphSVG, or others — encourage exploration.

Materials Checklist

Learn 6-1: Scrollytelling Readings + Visual Notes (learn/learn-6-1-scrollytelling-readings.md)
Learn 6-2: Animating SVG Icons with GSAP + AI (learn/learn-6-2-svg-icons-gsap.md)
Learn 6-3: GSAP ScrollTrigger + Parallax (learn/learn-6-3-gsap-scrolltrigger.md)
Engage 6-1: Parallax Dissection (engage/engage-6-1-parallax-dissection.md)
Practice 6-1: The Parallax (practice/practice-6-1-the-parallax.md)
Build 6-1: The Blueprint (build/build-6-1-the-blueprint.md)
Reflect 6-1: Visual Notes (reflect/reflect-6-1-visual-notes.md)
Resources page updated (resources/week-6-resources.md)
Demo files: ScrollTrigger + parallax CodePen ready
Example Figma scrollytelling layout prepared for Day 1