Build: The Story Flows

build/build-9-1-the-story-flows.md

Build: The Story Flows

Points: 10 (Complete/Incomplete) Time Estimate: 60–90 minutes Prerequisite: Practice 8-1: The Scroll

TL;DR

All sections scroll-triggered. At least one uses scrub. Pacing tested. Markers removed.

Submit

Push to GitHub
Submit GitHub Pages URL to Canvas

Overview

Your scrollytelling site is becoming real. This week's build turns it from "a page with animations" into "a story that unfolds as you scroll." The difference is pacing, trigger placement, and the right mix of trigger-and-play vs. scrubbed animations.

What You're Doing

Step 1: Convert ALL Remaining Sections

Every section of your site should now have scroll-triggered animations. Use the pattern from Practice 8-1.

Efficient approach: If most sections animate the same way (fade-in headings and paragraphs), batch them:

if (!prefersReducedMotion) {
  // Hero — plays on load (no ScrollTrigger)
  const heroTl = gsap.timeline();
  heroTl
    .from('.hero__title', { opacity: 0, y: 40, duration: 0.8, ease: 'power2.out' })
    .from('.hero__subtitle', { opacity: 0, y: 20, duration: 0.6 }, '-=0.4');

  // All chapter sections — scroll-triggered
  gsap.utils.toArray('.section--chapter').forEach(section => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: 'top 80%',
      }
    });

    tl.from(section.querySelector('h2'), {
      opacity: 0, y: 30, duration: 0.6, ease: 'power2.out'
    });

    tl.from(section.querySelectorAll('p'), {
      opacity: 0, y: 20, duration: 0.5, stagger: 0.15
    }, '-=0.2');
  });
}

Then customize specific sections with unique animations.

Step 2: Add Scrub to Your Best Section

Pick the section that deserves the most attention — the one where you want the reader to slow down and feel the content. Add scrub:

const systemTl = gsap.timeline({
  scrollTrigger: {
    trigger: '#the-system',
    start: 'top center',
    end: 'bottom center',
    scrub: 1,
  }
});

systemTl
  .from('#the-system h2', { opacity: 0, y: 20 })
  .from('#the-system .token-list', { opacity: 0, x: -30 })
  .from('#the-system .visual', { scale: 0.8, opacity: 0 });

Step 3: Test Pacing

The reading test: Open your site. Scroll at a natural reading pace. For each section, ask:

Can I read all the text before the next section starts?
Does the animation help me understand the content, or distract from it?
Is there enough "breathing room" between sections?

If scrolling feels exhausting, your sections might be too dense or your animations too aggressive.

Step 4: Remove Markers

Delete every markers: true from your code. They're debugging tools — they don't belong in production.

Step 5: Final Content Check

Read through your entire site top to bottom. Fix any:

Typos or unclear explanations
Missing content in any section
Metaphor inconsistencies (does it hold all the way through?)
Broken visual assets

Complete Criteria

ALL sections have scroll-triggered animations
At least 1 section uses scrub
start values are calibrated per section (not all "top 80%")
ALL markers removed
prefers-reduced-motion wraps all animation code
Content complete and proofread
Pushed to GitHub, live on Pages

Common Issues

Q: My forEach loop doesn't work. A: document.querySelectorAll() returns a NodeList, not an array. Use gsap.utils.toArray() instead — it handles the conversion.

Q: Scrub animation feels disconnected from content. A: The scroll range might be too wide. Tighten start and end so the animation happens while the content is in view. Use "top center" to "bottom center" as a starting point.

Q: Some sections look better without animation. A: That's fine. Not every section needs to animate. A simple fade-in is enough for some sections. The closing section especially might benefit from being still.

Connection to This Week

After this build, your site is a functional scrollytelling piece. Next week you'll add the "showpiece" — a pinned section where the viewport locks and content animates within it. Think about which section deserves that treatment.

Engage: Peer Review

engage/engage-9-1-peer-review.md

Engage: Peer Review

Points: 10 (Complete/Incomplete) Time Estimate: 30 minutes (in-class)

TL;DR

Swap sites with a partner. Test. Give structured feedback. Receive feedback. Document it.

Submit

Submit your completed feedback form for your partner's site (Canvas)
Note the 2 changes you'll make based on feedback you received

The Protocol

Setup (2 minutes)

Pair up with someone you haven't worked with recently
Open each other's GitHub Pages URL on YOUR device (not theirs)
Have the feedback form ready (below)

Round 1: Review Partner's Site (15 minutes)

Scroll through their site at your own pace. Then fill out the feedback form:

Feedback Form:

Question	Your Answer
1. What's the metaphor? Can you explain it in one sentence?
2. Where did you feel confused or lost? (Be specific — which section?)
3. Where did you feel delight? What moment made you go "oh, nice"?
4. Is the scroll pacing comfortable? Too fast? Too slow? Which sections?
5. Does the pinned section work? What's the effect?

Accessibility Tests:

Test	Pass?	Notes
Tab through the entire site — can you reach all content?	Y/N
Enable Reduce Motion (System Settings → Accessibility) — is all content visible?	Y/N
Is text readable against backgrounds? Any contrast issues?	Y/N

One Thing to Keep: What's the strongest part of this site?

One Thing to Change: What would have the biggest impact if improved?

Round 2: Swap Roles (15 minutes)

Now your partner reviews YOUR site using the same form.

Debrief (2 minutes)

Tell your partner:

The 2 changes you plan to make based on their feedback
One thing that surprised you about their feedback

Why This Matters

Your site has lived in your head for 4 weeks. You know what every section means because you wrote it. A fresh pair of eyes tells you what ACTUALLY communicates — and what only makes sense to you.

The best work survives contact with an audience.

Evaluation

Criteria	Points
Feedback form completed for partner's site	5
2 planned changes documented based on received feedback	3
Accessibility tests performed	2

Learn: Scrollytelling Craft

learn/learn-9-1-scrollytelling-craft.md

Learn: Scrollytelling Craft

Points: — (not graded, but come to class ready to discuss) Time Estimate: 15 minutes

TL;DR

Watch a pinning tutorial. Look at one advanced scrollytelling example and notice the pinned sections.

What to Do

1. ScrollTrigger Pinning (Required — 8 min)

GreenSock: ScrollTrigger Pin (start at pinning section)

Watch for:

How pin: true locks a section in the viewport
How end: "+=100%" controls the scroll range
How content animates while the section is pinned

2. Study One Pinned Section (Required — 7 min)

Open Apple AirPods Pro and scroll slowly through the product page.

Find at least 2 sections where the viewport "locks" and content animates within the pinned area. Ask:

How long does the pin last (how much scrolling)?
What animates during the pin? (text, images, 3D model?)
When does the pin release? Does it feel natural?

Come to class ready to share what you noticed.

Practice: The Deep

practice/practice-9-1-the-deep.md

Practice: The Deep

Points: 10 Time Estimate: 45–60 minutes

TL;DR

Add a pinned "showpiece" section to your scrollytelling site. Optional: add parallax to a background element.

Submit

Push to GitHub
Submit GitHub Pages URL to Canvas

Overview

Pinning is the signature move of scrollytelling. The viewport locks. The scroll bar keeps moving. But instead of scrolling past, the section stays fixed while content changes within it. It's how Apple sells AirPods, how the NYT tells data stories, and how you're going to create the "whoa" moment in your site.

What You're Building

One pinned section in your scrollytelling site — the showpiece. Choose the section that deserves the most attention. This is where your metaphor hits hardest, where the concept clicks, where the reader slows down and pays attention.

Requirements

Core

One section pinned with pin: true
Timeline animates content while pinned (at least 3 content changes)
scrub linked to scroll (not trigger-and-play)
Scroll range appropriate (not too short, not exhausting)
Pin releases cleanly (no layout jump below)

Stretch Goals

Parallax effect on at least one background element
Multiple content "steps" within the pin (text swaps or image swaps)
Progress indicator showing position within pinned section
Horizontal scroll section

Step-by-Step

Step 1: Choose Your Showpiece Section

Look at your metaphor map. Which chapter is the turning point? The "aha" moment? That's your pinned section. For many students, "The System" (design tokens) or "The Switch" (first moment of control) are strong candidates.

Step 2: Restructure the HTML

Your pinned section needs internal "steps" — content that swaps or layers:

<section class="section section--pinned" id="the-system">
  <div class="pin-content">
    <div class="pin-step" id="step-1">
      <h2>First, you see the pieces</h2>
      <p>Colors. Fonts. Spacing values. Just raw ingredients...</p>
    </div>
    <div class="pin-step" id="step-2">
      <h2>Then you name them</h2>
      <p>Surface. Text. Accent. Suddenly they have purpose...</p>
    </div>
    <div class="pin-step" id="step-3">
      <h2>Then you see the system</h2>
      <p>Change one value. Everything updates. That's the power...</p>
    </div>
  </div>
</section>

Step 3: Style for Stacking

.section--pinned {
  position: relative;
  min-height: 100vh;
}

.pin-content {
  position: relative;
  width: 100%;
  height: 100vh;
}

.pin-step {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  max-width: 800px;
  text-align: center;
}

.pin-step:first-child {
  opacity: 1; /* first step visible by default */
}

Step 4: Build the Pin Timeline

if (!prefersReducedMotion) {
  const pinTl = gsap.timeline({
    scrollTrigger: {
      trigger: '#the-system',
      start: 'top top',
      end: '+=200%',        // pin for 2x viewport height of scroll
      pin: true,
      scrub: 1,
      markers: true         // remove before submission!
    }
  });

  // Step 1 is visible by default
  // Fade out step 1, fade in step 2
  pinTl
    .to('#step-1', { opacity: 0, duration: 0.5 })
    .from('#step-2', { opacity: 0, y: 20, duration: 0.5 })
    .to('#step-2', { opacity: 0, duration: 0.5 }, '+=0.5')
    .from('#step-3', { opacity: 0, y: 20, duration: 0.5 });
}

Step 5: Test the Scroll Range

Scroll through the pinned section. Ask:

Is there enough scroll to read each step?
Does the transition between steps feel smooth?
Does the pin release feel natural (no jarring jump)?

Adjust end: "+=200%" — make it larger for more scroll time, smaller for less.

Step 6: Add Parallax (Stretch)

For a background element that moves at a different speed:

gsap.to('.section__bg-image', {
  y: -80,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true
  }
});

Evaluation

Criteria	Points
Pinned section working (pin: true, content animates)	4
At least 3 content changes within the pin	3
Scrub linked to scroll	2
Clean pin release (no layout issues)	1

Troubleshooting

Pinned section overlaps content below it: ScrollTrigger adds pin-spacing automatically. If it's not working, check for overflow: hidden on parent elements — that breaks pinning.

Content below the pin jumps when pin releases: This is usually a pin-spacing issue. Make sure you're not setting the section's height in CSS in a way that conflicts with ScrollTrigger's calculations.

Steps change too fast / too slow: Adjust end: "+=200%". More percentage = more scroll time. Also adjust the duration values in your timeline — they're relative to the total scroll range.

Pin works in Chrome but breaks in Safari: Add anticipatePin: 1 to your ScrollTrigger config. This helps Safari handle the pin transition.

Connection to Course

This is your last practice session. After this, you have the Build assignment to polish and deploy. Week 10 is presentations. Make the pinned section count — it's the moment that makes your site memorable.

Reflect: Visual Notes — Final Reflection

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

Reflect: Visual Notes — Final Reflection

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

TL;DR

Final reflection on the project. What did you learn about storytelling through code?

Submit

Written or visual reflection uploaded to Canvas

The Prompt

This is the last Reflect of the project. Answer these questions — in writing, as a sketch, or as an annotated screenshot:

The Metaphor: Did your metaphor hold up? Did it change from what you planned in Week 5? How?
The Hardest Part: What was the most frustrating or challenging part of this project? How did you get past it?
The Best Part: What's your favorite section or moment in your site? Why?
The Code: Pick one code pattern you're proud of understanding (a timeline, a ScrollTrigger config, the reduced-motion check). Explain what it does in plain language.
The Growth: Look at your Week 0 visual notes. Compare what you knew then to what you know now. What's the biggest change?
If I Had More Time: What would you add, change, or refine?

Why This Matters

Week 10 presentations ask you to reflect out loud. This written reflection is your prep. The students who do this well present with confidence.

Evaluation

Criteria	Points
All 6 questions addressed	6
Honest and specific (not generic)	2
Code explanation is accurate	2

Week 9 Resources: The Deep

resources/week-9-resources.md

Week 9 Resources: The Deep

Assigned (Before Day 1)

Resource	Type	Time
GreenSock: ScrollTrigger Pinning	Video (pin section)	8 min
Study one pinned section on Apple AirPods Pro page	Analysis	7 min

Reference

Resource	Why
ScrollTrigger pin docs	Official pin reference
WebAIM Contrast Checker	WCAG AA/AAA contrast testing
Lighthouse (Chrome DevTools)	Performance + accessibility auditing

Video

Resource	Time	Why
GSAP: Advanced ScrollTrigger	15 min	Pinning, parallax, horizontal scroll — comprehensive
Kevin Powell: Parallax Scrolling	10 min	CSS and JS parallax approaches, designer-friendly

Deep Dive

Resource	Why
ScrollTrigger Demos (CodePen)	Official demo collection — study pinning patterns
Inclusive Components by Heydon Pickering	Accessible interaction patterns reference
Squoosh.app	Image compression tool for performance optimization

Inspiration: Advanced Scrollytelling

Site	What to Notice
Apple AirPods Pro	Multiple pinned sections with scrubbed 3D animation
Femme Fatale	Horizontal scroll + pinning
Active Theory	Aggressive pinning — notice when it feels good vs. exhausting
The Boat (SBS)	Pinned graphic novel panels — atmospheric scroll pacing

Cheat Sheet: Pinning + Parallax

// PINNING: lock section, animate content within
const pinTl = gsap.timeline({
  scrollTrigger: {
    trigger: '#section',
    start: 'top top',        // pin when section reaches viewport top
    end: '+=200%',           // pin for 2x viewport height of scroll
    pin: true,               // lock the section
    scrub: 1,                // link to scroll
    anticipatePin: 1,        // helps Safari
  }
});

pinTl
  .from('.step-1', { opacity: 0, y: 20 })
  .to('.step-1', { opacity: 0 }, '+=0.3')
  .from('.step-2', { opacity: 0, y: 20 });

// PARALLAX: background moves slower than foreground
gsap.to('.bg-image', {
  y: -100,                   // moves up 100px over scroll range
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,             // true = no smoothing
  }
});

// HORIZONTAL SCROLL (stretch goal)
const track = document.querySelector('.h-track');
gsap.to(track, {
  x: () => -(track.scrollWidth - window.innerWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '#h-section',
    start: 'top top',
    end: () => '+=' + track.scrollWidth,
    pin: true,
    scrub: 1,
  }
});

Week 9: The Deep

week-overview.md

Week 9: The Deep

Unit 2: Teaching Through Story Interaction Question: What separates good from great?

Learning Outcomes

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

Implement a pinned ScrollTrigger section that locks in the viewport while content animates
Create parallax effects using different scroll speeds on layered elements
Conduct structured peer review of a scrollytelling site
Test for accessibility: keyboard navigation, reduced motion, color contrast
Optimize animation performance using Lighthouse and DevTools
Deploy a production-ready site to GitHub Pages
Identify and fix common scroll-animation bugs (layout shifts, z-index issues, pin spacing)

Two-Day Breakdown

Day 1: Pinning + Parallax

Duration: 90 minutes

Time	Activity	Description
0:00	Opening	Show a pinned section from a professional site. "The viewport stops. The content keeps moving. That's pinning."
0:10	Pinning Explained	How `pin: true` works. The section locks in place. ScrollTrigger adds space for the scroll range. `start: "top top"`, `end: "+=100%"`.
0:25	Live Code: Pinned Section	Build a pinned section with content that animates within it — text fades in/out, images swap, progress bar fills.
0:45	Parallax Concept	Layers moving at different speeds create depth. Simple technique: different `y` offsets at different scroll rates.
0:55	Break	—
1:05	Practice Start	Students add one pinned section to their site. Choose which section is the "showpiece." Optional: add parallax to a background.
1:35	Closing	Homework: refine pinned section, prepare for peer review Day 2

Deliverables assigned:

Practice 9-1: The Deep (start in class, due before Day 2)

Day 2: Peer Review + Polish

Duration: 90 minutes

Time	Activity	Description
0:00	Opening	"Your site is built. Now it needs another pair of eyes."
0:05	Peer Review Protocol	Walk through the feedback form. What to look for: clarity, pacing, metaphor, accessibility, delight.
0:15	Engage: Peer Review	Swap with a partner. 15 minutes to scroll through, test, and fill out feedback form. Then swap roles.
0:45	Break	—
0:55	Feedback Debrief	What surprised you? What common issues appeared? Quick group discussion.
1:05	Polish Workshop	Remaining time: address peer feedback, performance pass (Lighthouse), final content edit.
1:30	Closing	Final build due Sunday. Presentation prep for Week 10.

Deliverables assigned:

Build 9-1: The Refinement (final polish + deploy, due Sunday)
Engage 9-1: Peer Review (in-class)
Reflect 9-1: Visual Notes (final reflection, due Sunday)

Activities

Type	Activity	Points	Due
Learn 9-1	Scrollytelling Craft	—	Before Day 1
Practice 9-1	The Deep	10	Before Day 2
Engage 9-1	Peer Review	10	Day 2
Build 9-1	The Refinement	10	Sunday
Reflect 9-1	Visual Notes	10	Sunday

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

Topics Covered

Concept	Depth	Notes
ScrollTrigger `pin`	Deep	Pinned sections, pin-spacing, layout implications
Parallax scrolling	Practical	Layered y-offsets at different speeds
Horizontal scroll	Exposure	Shown as stretch goal, not required
Performance optimization	Practical	Lighthouse, will-change, GPU layers
Peer review	Structured	Feedback form with specific criteria
Cross-browser testing	Practical	Chrome, Firefox, Safari quick check
Deployment	Practical	GitHub Pages, clean URLs

Project Milestone

Project 2: "The Long Way Down" — Week 9 checkpoint (FINAL before submission)

At least 1 pinned section ("showpiece" moment)
Peer review completed and feedback documented
Peer feedback addressed (at least 2 changes based on feedback)
prefers-reduced-motion fully implemented
Keyboard navigable (Tab through all sections)
Color contrast passing WCAG AA
Semantic HTML verified (heading hierarchy, landmarks)
Markers removed
Performance: no major jank or lag
Deployed to GitHub Pages
Linked from portfolio

Key Vocabulary

Term	Definition
Pinning	Locking a section in the viewport while scroll-linked content animates within it
Pin-spacing	Extra space ScrollTrigger adds to the page to accommodate the pinned section's scroll range
Parallax	Layers moving at different speeds to create a sense of depth
Lighthouse	Chrome DevTools audit tool for performance, accessibility, best practices
GPU acceleration	Using the graphics card for animation — triggered by `transform` and `opacity`
will-change	CSS hint that tells the browser to optimize an element for upcoming changes
Peer review	Structured feedback from a classmate focused on specific criteria

Common Struggles & Solutions

Struggle	Solution
Pinned section breaks layout below it	ScrollTrigger adds `pin-spacing` automatically. If layout shifts, check for elements with `position: fixed` or `z-index` conflicts.
Pinned section is the wrong height	Adjust `end: "+=100%"` — this means "pin for 100% of viewport height of scroll." Change the percentage to adjust scroll range.
Parallax looks choppy	Use `scrub: 1` for smoothing. Reduce the Y offset. Simpler parallax performs better.
Peer feedback is vague	Guide students: "Don't say 'it's good.' Say 'I got confused at section 3 because the metaphor shifted.' Be specific."
Lighthouse score is low	Common fixes: compress images, remove unused CSS, add `loading="lazy"` to images below the fold.
Site looks different in Safari	ScrollTrigger generally handles cross-browser, but test pinned sections in Safari specifically. Some CSS transforms render differently.

Code Patterns Introduced

Pinned Section

const showpieceTl = gsap.timeline({
  scrollTrigger: {
    trigger: '#the-system',
    start: 'top top',
    end: '+=150%',          // pin for 1.5x viewport height of scroll
    pin: true,
    scrub: 1,
  }
});

// Content animates while pinned
showpieceTl
  .from('#the-system .step-1', { opacity: 0, y: 30 })
  .to('#the-system .step-1', { opacity: 0 }, '+=0.5')
  .from('#the-system .step-2', { opacity: 0, y: 30 })
  .to('#the-system .step-2', { opacity: 0 }, '+=0.5')
  .from('#the-system .step-3', { opacity: 0, y: 30 });

Simple Parallax

gsap.to('.section__bg', {
  y: -100,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  }
});

Horizontal Scroll (Stretch Goal)

const horizontal = gsap.timeline({
  scrollTrigger: {
    trigger: '#horizontal-section',
    start: 'top top',
    end: () => '+=' + document.querySelector('.horizontal-track').scrollWidth,
    pin: true,
    scrub: 1,
  }
});

horizontal.to('.horizontal-track', {
  x: () => -(document.querySelector('.horizontal-track').scrollWidth - window.innerWidth),
  ease: 'none'
});

Accessibility Focus

This is the full audit week. Before submission, check:

Keyboard: Tab through the entire site. Can you reach all content?
Reduced motion: Enable "Reduce Motion" in System Settings. Is all content visible? No animation?
Color contrast: Run a contrast checker on all text/background pairs from your tokens
Semantic HTML: Check heading hierarchy (h1 → h2 → h3, no skipping)
Landmarks: <main>, <section>, <header> present?
Screen reader test: Turn on VoiceOver (Cmd+F5 on Mac). Navigate by headings. Does the content make sense?

Connections

Connects To	How
Week 7	GSAP timelines now used inside pinned sections
Week 8	ScrollTrigger config extended with pin and parallax
Week 10	This is the last build week — Week 10 is presentation
Project 2	Final submission due Sunday

Instructor Notes

Pinning is the "wow" moment of the course. Demo it well on Day 1.
The peer review protocol needs to be STRUCTURED. Without guidance, students say "it looks good" and learn nothing. The feedback form is essential.
Some students will be behind. That's okay — the peer review still helps them identify priorities.
Horizontal scroll is a stretch goal. Only advanced students should attempt it. Pin-spacing math is tricky.
The accessibility audit is real, not performative. Walk students through VoiceOver briefly if they've never used it.
Remind students: markers off, site deployed, linked from portfolio. These are easy points to lose.

Materials Checklist

Pinning demo file prepared
Parallax example ready
Peer review feedback form printed/shared
Learn 9-1: Scrollytelling Craft (learn/learn-9-1-scrollytelling-craft.md)
Practice 9-1: The Deep (practice/practice-9-1-the-deep.md)
Engage 9-1: Peer Review (engage/engage-9-1-peer-review.md)
Build 9-1: The Refinement (build/build-9-1-the-refinement.md)
Reflect 9-1: Visual Notes (reflect/reflect-9-1-visual-notes.md)
Resources page updated

Week 9: The Deep Week 9

Build: The Refinement

TL;DR

Submit

Overview

What You're Doing

Step 1: Address Peer Feedback

Step 2: Accessibility Audit

Step 3: Performance Pass

Step 4: Final Content Edit

Step 5: Remove All Debug Code

Step 6: Deploy

Step 7: Prep for Presentation

Complete Criteria

Connection to This Week

Build: The Story Flows

TL;DR

Submit

Overview

What You're Doing

Step 1: Convert ALL Remaining Sections

Step 2: Add Scrub to Your Best Section

Step 3: Test Pacing

Step 4: Remove Markers

Step 5: Final Content Check

Complete Criteria

Common Issues

Connection to This Week

Engage: Peer Review

TL;DR

Submit

The Protocol

Setup (2 minutes)

Round 1: Review Partner's Site (15 minutes)

Round 2: Swap Roles (15 minutes)

Debrief (2 minutes)

Why This Matters

Evaluation

Learn: Scrollytelling Craft

TL;DR

What to Do

1. ScrollTrigger Pinning (Required — 8 min)

2. Study One Pinned Section (Required — 7 min)

Practice: The Deep

TL;DR

Submit

Overview

What You're Building

Requirements

Core

Stretch Goals

Step-by-Step

Step 1: Choose Your Showpiece Section

Step 2: Restructure the HTML

Step 3: Style for Stacking

Step 4: Build the Pin Timeline

Step 5: Test the Scroll Range

Step 6: Add Parallax (Stretch)

Evaluation

Troubleshooting

Connection to Course

Reflect: Visual Notes — Final Reflection

TL;DR

Submit

The Prompt

Why This Matters

Evaluation

Week 9 Resources: The Deep

Assigned (Before Day 1)

Reference

Video

Deep Dive

Inspiration: Advanced Scrollytelling

Cheat Sheet: Pinning + Parallax

Week 9: The Deep

Learning Outcomes

Two-Day Breakdown

Day 1: Pinning + Parallax

Day 2: Peer Review + Polish

Activities