Scroll Animation Terminology to Improve Prompts for Claude and Codex

X postGabrielResource

Gabriel shares a video cheat sheet highlighting standard terms for scroll animations. These terms help developers clearly describe frontend animation patterns when prompting AI models like Claude or Codex.

Key points

  1. Standardised terminology for scroll animations makes prompting in AI coding tools like Claude and Codex more effective.
  2. The video functions as a cheat sheet for beginners needing clear names for common UI patterns.
  3. The author confirms the terms focus on standard web interactions (such as sticky positioning) rather than 3D camera movements.
  4. Gabriel notes that the appropriate animation choice depends heavily on the specific use case.

Why it matters

Specifying animations to coding assistants often fails when using vague visual descriptions. Using recognised industry terms saves time and yields more accurate code from LLMs.

Analysis

Gabriel identifies a frequent challenge in AI-assisted frontend development: describing nuanced scroll behaviours without ambiguity. By providing visual references paired with standard interaction design terminology, the resource helps developers prompt more efficiently and get precise code outputs.

Original post

Gabriel

@gabriell_lab · 6 October 2026

If you struggle to describe scroll animations in Claude or Codex, these commonly used terms can help. Save this for later. t.co/PuHebRB23w

5.7k likes54 replies8.7k bookmarks224k views

View on X
More posts in the thread (6)
  1. @LLiepenieks Exactly little cheat sheet for someone just starting
  2. @stevencheng No this has nothing to do with 3D... or maybe I understood your question wrong
  3. @maglev_eth I would say It heavy depends on the use case
  4. @Ubendev Hahaha ofc man🙏🏻 glad it helped
  5. @Fevra_ 🫂
  6. @RealVicHere You mean sticky?
Selected replies (5)
  • @Ubendev @gabriell_lab Thanks I just told claude move the images right when i scroll down, this certainly helps, lol
  • @LLiepenieks @gabriell_lab naming the pattern is most of the prompt. 'sticky' beats a paragraph of description
  • @BDoma @gabriell_lab Take Emil’s reverse animation scale takes or poorly described terms and turns them into the professional ones, it also has taught me a whole bunch of new animation terms t.co/yEafgyTJ9N
  • @maglev_eth @gabriell_lab Quite annoying when a websites does any of this
  • @RealVicHere @gabriell_lab Claude Code 特别喜欢用第 2 个滚动动画效果，但是这一个用起来实在是非常的别扭。

Mentioned links

Summary generated by AI (Gemini 3.8 Flash, 7 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Video

    Video:Chase AI

    Improving Web Design in Claude Code in Three Steps

    Chase AI outlines a three-step workflow to eliminate generic 'AI slop' when designing web interfaces with Claude Code. The method combines a personal design library, specialised CLI tools like Impeccable or the Higgsfield MCP, and an iterative build workflow featuring in-browser tweak bars.

    AI & LLMs· Tutorial

  • Video

    Video:Nate Herk | AI Automation

    Scrollcraft: Building Interactive Scroll-Driven Websites with Claude Code

    Nate Herk presents Scrollcraft, a Claude Code skill designed to generate custom, scroll-driven websites. The workflow features an interview process covering the user journey, automated asset generation via key.ai, and an internal visual verification pass during the build.

    AI & LLMs· Demo

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.