Experimental UI Design Course

Day 5: Movement and Flow

Creating rhythm and emotional pacing through scroll animations

📚 Study (10 min)

Explore 5 sites from godly.website focusing on scroll animations

✏️ Practice (20 min)

Create a simple parallax scrolling experiment using only CSS

🛠 Tool

Start with CodePen for quick experiments

Movement as Emotional Language

Movement in web design isn't just about animation - it's about creating rhythm and emotional pacing. Scroll animations can transform static layouts into cinematic experiences, but they need purpose beyond flashiness. Study how top sites use scroll-triggered animations to reveal information progressively, creating anticipation and discovery.

On godly.website, find five examples where scroll animations enhance storytelling rather than just showing off technical skills. Notice timing differences - some sites use quick, snappy transitions while others unfold slowly like meditation. Pay attention to easing curves and how they affect emotional perception. Sharp easing feels urgent; smooth curves feel contemplative.

Your CSS experiment should focus on creating emotional impact through movement. Try making background colors shift subtly as users scroll, or have text elements move at different speeds to create depth. Use transform: translateY() and opacity changes triggered by scroll position. Start simple - maybe just three elements moving at different rates. The goal is understanding how motion affects perception of content, not creating complex animations. Save your CodePen; you'll build on these techniques later.

Animation Analysis Framework

When studying scroll animations, consider:

  • Timing: How does speed affect emotional perception?
  • Easing: What feeling do different curves create?
  • Sequence: How does order of reveal impact story?
  • Purpose: Does movement enhance or distract from content?

CSS Parallax Starter Code

/* Basic CSS Parallax Setup */
.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax-layer--back {
  transform: translateZ(-1px) scale(2);
}

.parallax-layer--base {
  transform: translateZ(0);
}

/* Scroll-triggered opacity */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.fade-in.visible {
  opacity: 1;
}

Movement Experiments to Try

  • Color Temperature Shift: Background hue changes with scroll depth
  • Text Parallax: Headlines move slower than body text
  • Reveal Sequences: Elements appear in meaningful order
  • Depth Layers: Multiple speeds create 3D effect
  • Emotional Easing: Match curve to content mood

Key Takeaways

  • Movement creates emotional pacing in digital experiences
  • Easing curves dramatically affect perception of animation
  • Simple effects often have more impact than complex ones
  • Purpose should drive animation choices, not technical capability