@gabriell_lab: If you struggle to describe scroll animations in Claude or Codex, these commonly used terms can help. Save this for late…

naming the pattern is most of the prompt. 'sticky' beats a paragraph of description

Exactly little cheat sheet for someone just starting

Thanks I just told claude move the images right when i scroll down, this certainly helps, lol

Hahaha ofc man🙏🏻 glad it helped

Do these terms also help with 3D camera moves?

No this has nothing to do with 3D... or maybe I understood your question wrong

Quite annoying when a websites does any of this

I would say It heavy depends on the use case

Claude Code particularly likes to use the second scrolling animation effect, but this one is really quite awkward to use.

You mean sticky?

cheers Gabriel 🍻

🫂

para landings de anuncios el que más rinde es el sticky, dejar el botón de pedir presupuesto siempre a la vista en el móvil. el parallax casi siempre lo acabo quitando y truco, pásale a Claude el término y los números, tipo fade in de 0,4 s cuando se ve el 30% de la sección

one to add next to scroll-linked: ask for "CSS scroll-driven animations" (animation-timeline: view()) by name. no GSAP, no scroll listener. just check browser support for your audience

Would you add a reduced-motion example alongside these? Useful to know what to ask Claude for when the page needs to calm down a bit 😅

I asked Codex for a bike video that looked like a $10m company. A valuation is apparently a terrible animation brief 😂

Great, very useful skills, thank you for sharing.

sounds useful, gotta keep these terms in mind for the next time lol.

This is super useful 🙌🏻

nice explanation. i was dying once just to get scroll snap :(

Very helpful. Thanks for sharing.

Good scroll animation ❤️

the amount of times I’ve typed “make it scroll like the apple site” into claude is embarrassing

saving this, the terms are gold

If they struggle with that, sounds like they should start by not using Claude.

Thank you 🙏

스크롤 애니메이션은 이름을 몰라서 설명을 못 하는 경우가 많은데, 용어만 알아도 클로드한테 훨씬 정확하게 시킬 수 있겠네요

Thank you! We would need a reference like that with all the animations and effects. That would really be useful!

What source or skills did you use to assemble the motifs?

And always add: don’t control the user’s control speed.

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

Scroll linked is super great for reading and educational content.

thanks i needed it

would also add basic stuff like overflow. thats actually why people who did this by hand before work faster with ai - they just know how to say exactly what they want from the agent

Specifying whether you want native CSS scroll-driven animations or a library like GSAP ScrollTrigger upfront usually saves a couple rounds of refactoring.

This is very helpful! A simple, clear reference library of different animations and UI patterns would be a major win. Are you thinking of expanding this?

Vocabulary helps, but the trigger still needs spelling out: viewport entry, scroll progress, or a click. Leave that vague and the timing gets improvised.

Let me be blunt: vocabulary is not the hard part. 'Parallax' and 'easing' mean nothing until you give the exact cubic-bezier. Most prompt failures are missing numbers. Anyone got a list that survives a design review?

Useful cheat sheet 👀 Add the trigger + end state too: “fade in when the card enters the viewport, finish at full opacity, play once.” Gives Claude/Codex a lot less to guess.

specific terminology makes a huge difference in clear communication, thanks for sharing!

"save this for later" is how I've built a 4,000-item museum of things I was definitely going to learn

having a set of common terms for scroll animations can make collaboration smoother

Knowing words like parallax and scroll-linked vs scroll-triggered makes such a difference in what the model spits out.

Those commonly used terms can really simplify the process for many developers

the scroll snap one is the real hero here, people sleep on how much smoother it makes a page feel

i'd disagree a bit that terms alone fix it, a reference url or clip of the exact effect gets closer than any glossary because the model copies what it sees

@bot 看一下这个视频里面所涉及的描述，帮我将知识点写入 notion 中的 motion 学习文档，做好说明，方便后续检索

Great post

Naming things strikes again

Instant follow

Quite helpful!

Efficient

i made a spinwheel scroll on https://titi.re never leaves u hanging between sections, but its not limiting your scrolling/swiping either. choreography was a pain until it got right.

Thanks 🙏

Thanks for sharing! Sometimes it is really difficult to explain what we are trying to achieve to the agentic tools.

bookmarking this, Thanks

@gabriell_lab adding a naming convention for animations helps too. Makes it easier to reference them later, especially in complex projects.

why is the label muted

describing scroll animations with the right terms makes agents far better