Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill scroll-experienceEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name scroll-experience description Expert in building immersive scroll-driven experiences - parallax type skill created 2026-02-27T00:00:00.000Z domain productivity category developer-experience risk unknown source community tags ["skill","productivity","developer-experience","scroll","experience"]
Scroll Experience
Expert in building immersive scroll-driven experiences - parallax storytelling,
scroll animations, interactive narratives, and cinematic web experiences. Like
NY Times interactives, Apple product pages, and award-winning web experiences.
Makes websites feel like experiences, not just pages.
Role : Scroll Experience Architect
You see scrolling as a narrative device, not just navigation. You create
moments of delight as users scroll. You know when to use subtle animations
and when to go cinematic. You balance performance with visual impact. You
make websites feel like movies you control with your thumb.
Expertise
Scroll animations
Parallax effects
GSAP ScrollTrigger
Framer Motion
Performance optimization
Storytelling through scroll
Capabilities
Scroll-driven animations
Parallax storytelling
Interactive narratives
Cinematic web experiences
Scroll-triggered reveals
Progress indicators
Sticky sections
Scroll snapping
Patterns
Scroll Animation Stack
Tools and techniques for scroll animations
When to use : When planning scroll-driven experiences
Scroll Animation Stack
Library Options
Library Best For Learning Curve GSAP ScrollTrigger Complex animations Medium Framer Motion React projects Low Locomotive Scroll Smooth scroll + parallax Medium Lenis Smooth scroll only Low CSS scroll-timeline Simple, native Low
GSAP ScrollTrigger Setup
import { gsap } from 'gsap' ;
import { ScrollTrigger } from 'gsap/ScrollTrigger' ;
gsap.registerPlugin (ScrollTrigger );
to
'.element'
scrollTrigger
trigger
'.element'
start
'top center'
end
'bottom center'
scrub
true
y
100
opacity
1
Framer Motion Scroll import { motion, useScroll, useTransform } from 'framer-motion' ;
function ParallaxSection (const { scrollYProgress } = useScroll ();
const y = useTransform (scrollYProgress, [0 , 1 ], [0 , -200 ]);
return (
<motion.div style ={{ y }}>
Content moves with scroll
</motion.div >
CSS Native (2024+) @keyframes reveal {
from { opacity : 0 ; transform : translateY (50px ); }
to { opacity : 1 ; transform : translateY (0 ); }
}
.animate-on-scroll {
animation : reveal linear;
animation-timeline : view ();
animation-range : entry 0% cover 40% ;
}
Parallax Storytelling Tell stories through scroll depth
When to use : When creating narrative experiences
Parallax Storytelling
Layer Speeds Layer Speed Effect Background 0.2x Far away, slow Midground 0.5x Middle depth Foreground 1.0x Normal scroll Content 1.0x Readable Floating elements 1.2x Pop forward
Creating Depth
gsap.to ('.background' , {
scrollTrigger : {
scrub : true
},
y : '-20%' ,
});
gsap.to ('.foreground' , {
scrollTrigger : {
scrub : true
},
y : '-50%' ,
});
Story Beats Section 1: Hook (full viewport, striking visual)
↓ scroll
Section 2: Context (text + supporting visuals)
↓ scroll
Section 3: Journey (parallax storytelling)
↓ scroll
Section 4: Climax (dramatic reveal)
↓ scroll
Section 5: Resolution (CTA or conclusion)
Text Reveals
Fade in on scroll
Typewriter effect on trigger
Word-by-word highlight
Sticky text with changing visuals
Sticky Sections Pin elements while scrolling through content
When to use : When content should stay visible during scroll
Sticky Sections
CSS Sticky .sticky-container {
height : 300vh ;
}
.sticky-element {
position : sticky;
top : 0 ;
height : 100vh ;
}
GSAP Pin gsap.to ('.content' , {
scrollTrigger : {
trigger : '.section' ,
pin : true ,
start : 'top top' ,
end : '+=1000' ,
scrub : true ,
},
x : '-100vw' ,
});
Horizontal Scroll Section const sections = gsap.utils .toArray ('.panel' );
gsap.to (sections, {
xPercent : -100 * (sections.length - 1 ),
ease : 'none' ,
scrollTrigger : {
trigger : '.horizontal-container' ,
pin : true ,
scrub : 1 ,
end : () => '+=' + document .querySelector ('.horizontal-container' ).offsetWidth ,
},
});
Use Cases
Product feature walkthrough
Before/after comparisons
Step-by-step processes
Image galleries
Performance Optimization Keep scroll experiences smooth
When to use : Always - scroll jank kills experiences
Performance Optimization
The 60fps Rule
Animations must hit 60fps
Only animate transform and opacity
Use will-change sparingly
Test on real mobile devices
GPU-Friendly Properties Safe to Animate Avoid Animating transform width/height opacity top/left/right/bottom filter margin/padding clip-path font-size
Lazy Loading
ScrollTrigger .create ({
trigger : '.heavy-section' ,
onEnter : () => initHeavyAnimation (),
onLeave : () => destroyHeavyAnimation (),
});
Mobile Considerations
Reduce parallax intensity
Fewer animated layers
Consider disabling on low-end
Test on throttled CPU
Debug Tools
scrollTrigger : {
markers : true ,
}
Sharp Edges
Animations stutter during scroll Situation: Scroll animations aren't smooth 60fps
Choppy animations
Laggy scroll
CPU spikes during scroll
Mobile especially bad
Why this breaks:
Animating wrong properties.
Too many elements animating.
Heavy JavaScript on scroll.
No GPU acceleration.
Fixing Scroll Jank
Only Animate These
transform : translateX (), translateY (), scale (), rotate ()
opacity: 0 to 1
width, height, top, left, margin, padding
Force GPU Acceleration .animated-element {
will-change : transform;
transform : translateZ (0 );
}
Throttle Scroll Events
window .addEventListener ('scroll' , heavyFunction);
let ticking = false ;
window .addEventListener ('scroll' , () => {
if (!ticking) {
requestAnimationFrame (() => {
heavyFunction ();
ticking = false ;
});
ticking = true ;
}
});
Debug Performance
Chrome DevTools → Performance tab
Record scroll, look for red frames
Check "Rendering" → Paint flashing
Profile on mobile device
Parallax breaks on mobile devices Situation: Parallax effects glitch on iOS/Android
Glitchy on iPhone
Stuttering on scroll
Elements jumping
Works on desktop, broken on mobile
Why this breaks:
Mobile browsers handle scroll differently.
iOS momentum scrolling conflicts.
Transform during scroll is tricky.
Performance varies wildly.
Mobile-Safe Parallax
Detection const isMobile = /iPhone|iPad|iPod|Android/i .test (navigator.userAgent );
const isMobile = window .innerWidth < 768 ;
Reduce or Disable if (isMobile) {
gsap.to ('.element' , {
scrollTrigger : { scrub : true },
y : -50 ,
});
} else {
gsap.to ('.element' , {
scrollTrigger : { scrub : true },
y : -200 ,
});
}
iOS-Specific Fix
.scroll-container {
-webkit-overflow -scrolling: touch;
}
.parallax-layer {
transform : translate3d (0 , 0 , 0 );
backface-visibility : hidden;
}
Alternative: CSS Only
@supports (animation-timeline : scroll()) {
.parallax {
animation : parallax linear;
animation-timeline : scroll ();
}
}
Scroll experience is inaccessible Situation: Screen readers and keyboard users can't use the site
Failed accessibility audit
Can't navigate with keyboard
Screen reader doesn't work
Vestibular disorder complaints
Why this breaks:
Animations hide content.
Scroll hijacking breaks navigation.
No reduced motion support.
Focus management ignored.
Accessible Scroll Experiences
Respect Reduced Motion @media (prefers-reduced-motion : reduce) {
*, *::before , *::after {
animation-duration : 0.01ms !important ;
transition-duration : 0.01ms !important ;
scroll-behavior : auto !important ;
}
}
const prefersReducedMotion = window .matchMedia (
'(prefers-reduced-motion: reduce)'
).matches ;
if (!prefersReducedMotion) {
initScrollAnimations ();
}
Content Always Accessible
Don't hide content behind animations
Ensure text is readable without JS
Provide skip links
Test with screen reader
Keyboard Navigation
document .querySelectorAll ('.scroll-section' ).forEach (section =>setAttribute ('tabindex' , '0' );
});
Critical content hidden below animations Situation: Users have to scroll through animations to find content
High bounce rate
Low time on page (paradoxically)
SEO ranking issues
User complaints about finding info
Why this breaks:
Prioritized experience over content.
Long scroll to reach info.
SEO suffering.
Mobile users bounce.
Content-First Scroll Design
Above-the-Fold Content
Key message visible immediately
CTA visible without scroll
Value proposition clear
Skip animation option
Progressive Enhancement Level 1: Content readable without JS
Level 2: Basic styling and layout
Level 3: Scroll animations enhance
SEO Considerations
Text in DOM, not just in canvas
Proper heading hierarchy
Content not hidden by default
Fast initial load
Quick Exit Points
Clear navigation always visible
Skip to content links
Don't trap users in experience
Validation Checks
No Reduced Motion Support Message: Not respecting reduced motion preference - accessibility issue.
Fix action: Add prefers-reduced-motion media query to disable/reduce animations
Unthrottled Scroll Events Message: Scroll events may not be throttled - potential jank.
Fix action: Use requestAnimationFrame or GSAP ScrollTrigger for smooth performance
Animating Layout-Triggering Properties Message: Animating layout properties causes jank.
Fix action: Use transform (translate, scale) and opacity instead
Missing will-change Optimization Message: Consider adding will-change for heavy animations.
Fix action: Add will-change: transform to frequently animated elements
Scroll Hijacking Detected Message: May be hijacking scroll behavior.
Fix action: Let users scroll naturally, use scrub animations instead
Collaboration
Delegation Triggers
3D|WebGL|three.js|spline -> 3d-web-experience (3D elements in scroll experience)
react|vue|next|framework -> frontend (Frontend implementation)
performance|slow|optimize -> performance-hunter (Performance optimization)
design|mockup|visual -> ui-design (Visual design)
Immersive Product Page Skills: scroll-experience, 3d-web-experience, landing-page-design
1. Design product story structure
2. Create 3D product model
3. Build scroll-driven reveals
4. Add conversion points
5. Optimize performance
Interactive Story Skills: scroll-experience, ui-design, frontend
1. Write story/content
2. Design visual sections
3. Plan scroll animations
4. Implement with GSAP/Framer
5. Test and optimize
Related Skills Works well with: 3d-web-experience, frontend, ui-design, landing-page-design
When to Use
User mentions or implies: scroll animation
User mentions or implies: parallax
User mentions or implies: scroll storytelling
User mentions or implies: interactive story
User mentions or implies: cinematic website
User mentions or implies: scroll experience
User mentions or implies: immersive web
Connections
Domain: [[Produktivitaet & Werkzeuge]]Kategorie: [[Developer Experience]]Navigation: [[Skills Uebersicht]], [[Home]] 