4.21 | on-ground | interactions

due Tuesday 4.28 @11:15AM

Before you begin: Webflow recently updated how interactions work. You’ll notice the interface… and more importantly, the logic… looks different than older tutorials. The new system is built on GSAP (GreenSock Animation Platform), a professional animation engine used in web design. While this required updating course content, the upside is important:

This new model more closely reflects how motion is created in tools like After Effects… focusing on timing, sequence, and intention.

How to think about motion (important shift)

Previously, interactions worked like this:
“When this happens → do this animation”
(logic-based, like flipping a switch)

Now, interactions work like this:
“When this happens → animate these elements over time”
(time-based, like directing a short scene)

Core interaction process

All interactions now follow this structure:

trigger → target → action → timeline

• trigger = what starts the motion
• target = what moves
• action = what changes (opacity, position, blur, etc.)
• timeline = how it unfolds over time

To Begin:

Create a new Webflow site and:

• Create 4 separate sections for each interaction below
• Add 4 containers (1 per section)
• Add a simple QuickStack – 3 columns – image grid (3 images)
• Interaction #1 – Hover Fade: (1 pt) Create a hover interaction where all three images blur on hover and return to sharp on hover out.
  • Trigger: hover
  • Target: image group
  • Action: Fade (opacity)
  • Timeline:
    • Hover in → opacity (to 50)
    • Hover out → opacity (to 100)
      • Teaching focus: This introduces the idea of two states over time (hover in vs hover out). Pay attention to how quickly the blur happens… timing affects how the interaction feels.
• Interaction #2 – Scroll into View: (1 pt) Animate the images so they fade in and move upward as they enter the viewport.
  • Trigger: element scroll into view
  • Target: images
  • Timeline:
    • opacity 0 → 100
    • y position: 40px → 0
      • Teaching focus: This is one of the most common patterns in web design. Notice how combining opacity + movement helps guide attention and create hierarchy.
• Parallax: (.5 pt) Create a simple parallax effect
  • Set a background image to fixed.
  • Trigger: while scrolling
  • Animate:
    • background position OR element Y movement
      • Teaching focus: Parallax introduces the idea of continuous motion instead of a one-time event. Subtlety is key. Small movement often feels more refined than large movement.
• Create your own interaction (2.5 pts) Create your own interaction using your content (images, buttons, typography, etc.). You can use this as an opportunity to experiment with something you would like to try with your own website. Use motion intentionally, not just for decoration.
  Think about:
  • What are you drawing attention to?
  • What happens first vs second?
  • How does timing affect the experience?
• Publish your link and submit to D2L via “Warmup 6” Submission Folder. 

High-Level Motion Design Tips

• Motion should guide the eye, not decorate
  (if everything moves, nothing matters)
• Start simple: opacity + position is enough
  (most good web motion is just this)
• Timing matters more than complexity
  (fast = snappy, slow = calm, easing = personality)
• Most motion on the web should be kept short and snappy
  (when in doubt, speed it up)