10 scroll animation terms to hand to Opus 5.5
A list of 10 scroll animation terms such as scroll-triggered, parallax and pin with their meanings, plus a prompt you can give Opus 5.5 to rework your site.
Can't describe the scroll animation you want? Save 𝘁𝗵𝗲𝘀𝗲 𝟭𝟬 𝘁𝗲𝗿𝗺𝘀 and give them straight to Opus 5.5: → Scroll-triggered: an animation plays once as an element scrolls into view, like a fade-in or a slide up → Scroll-linked: the animation's progress follows your scrolling, and scrolling back plays it in reverse → Parallax: foreground and background move at different speeds, which adds depth → Sticky: an element sticks to the screen at a certain point while everything else keeps scrolling, like a nav bar or section headers → Pin: a whole section locks in place while its content changes step by step as you scroll, then lets go when it's done → Scroll Snap: when you stop, it lines up with the nearest screen or card → Horizontal Scroll: you scroll down, the content moves left → Stagger: a group of cards comes in one after another → Text Reveal: a paragraph lights up word by word as you scroll → Progress Bar: a line at the top grows as you scroll, showing how far you've read To use them on 𝘆𝗼𝘂𝗿 𝗼𝘄𝗻 𝘀𝗶𝘁𝗲, send this to Opus 5.5 👇 "Read the web pages in my current project. If there are several pages, ask me which one to change first. Pick from these 10 scroll effects and add them where they fit: Scroll-triggered, Scroll-linked, Parallax, Sticky, Pin, Scroll Snap, Horizontal Scroll, Stagger, Text Reveal, Progress Bar. Put any effect I name exactly where I say. 1. First give me a table: which section, which effect, and why. List the sections where nothing fits too, and don't add effects just to have them. If you're unsure, build a separate preview page that tries the candidate effects on my content. If you can open a browser, take a screenshot of the page before any changes. 2. Change nothing until I confirm. If the project already uses an animation library, stick with it; otherwise prefer CSS. Animate only transform and opacity. Use Scroll Snap only inside a local container. Make it responsive on phones and tablets, for example by turning horizontal scroll into a vertical stack and toning parallax down. For users with reduced motion turned on (prefers-reduced-motion), or in browsers that don't support scroll animations, skip the animation and just show the content. 3. When you're done, scroll from top to bottom at desktop and phone widths and check that nothing covers the content and nothing overflows sideways. If you can take screenshots, give me the after shots; if you can't, tell me which spots to check by hand."
This post quotes another post: x.com/voxyz_ai/status/2103977414711767244