▸case-16 Our marketing lead suggests pinning a product section for 10,000 pixels of scroll length to ensure visitors watch every single feature state transition. What usability concern does this introduce and how should pin length be constrained? | pass→pass | 13,108 | 9,261 | -29% | 1 | 1 | 0% | 2,029 | 2,380 | +17% | 0 | 0 | — |
▸case-08 We are designing the transition between Section 1 (product overview) and Section 2 (deep dive hardware specs). Currently, Section 1 simply unpins and abruptly scrolls away off top. How can we make the transition between these two story sections feel seamless and cinematic? | pass→pass | 15,339 | 14,342 | -6% | 1 | 1 | 0% | 2,304 | 3,491 | +52% | 0 | 0 | — |
▸case-15 To create cinematic depth in our scroll showcase, we are adding foreground blurred particles, dimming overlays, and background parallax layers behind text cards. However, design QA noted that text contrast drops significantly during certain scroll positions. What rule should govern depth effects during narrative sections? | fail→pass | 9,538 | 8,306 | -13% | 1 | 1 | 0% | 1,544 | 2,222 | +44% | 0 | 0 | — |
▸case-01 We want to create a high-end product presentation page for a new smart watch. As visitors scroll down, the watch mockup needs to remain anchored on screen while several key hardware layers split apart and copy panels transition alongside the motion. Please provide the GSAP timeline and HTML structure to achieve this cinematic scroll effect, including recommendations on how to handle mobile screens cleanly where space is tight. | pass→pass | 26,660 | 24,895 | -7% | 1 | 1 | 0% | 6,217 | 6,411 | +3% | 0 | 0 | — |
▸case-02 I am implementing an interactive product feature showcase in a React component where a device screen expands as the user scrolls. Developers often use standard useEffect hooks with raw window listeners or basic ScrollTrigger instances, but triggers keep accumulating on re-render. How should I structure the GSAP animation lifecycle in React to ensure complete cleanup? | fail→pass | 14,488 | 16,350 | +13% | 1 | 1 | 0% | 2,997 | 4,221 | +41% | 0 | 0 | — |
▸case-03 We are building a scroll-driven feature breakdown section where UI panels expand in size and move across the screen as the user scrolls down the page. To make the panels grow and reposition, should we animate the CSS width, height, top, and left properties with scrub, or use another technique? | pass→pass | 12,479 | 9,859 | -21% | 1 | 1 | 0% | 2,274 | 2,675 | +18% | 0 | 0 | — |
▸case-04 On our interactive landing page, high-resolution product showcase images and web fonts load asynchronously after the initial page load. As a result, the scroll pinning triggers occur at the wrong positions and the section highlights misalign. How should the scroll timeline handle late-loading visual assets? | pass→pass | 12,653 | 10,789 | -15% | 1 | 1 | 0% | 2,161 | 2,890 | +34% | 0 | 0 | — |
▸case-05 In a cinematic scroll-driven product story section, we have two types of motion: the main step-by-step product assembly as the user scrolls, and a secondary pulsing glow effect on a button when the user hovers over it. Should both effects be bound to the scrubbed scroll timeline? | pass→pass | 9,215 | 7,949 | -14% | 1 | 1 | 0% | 1,629 | 2,322 | +43% | 0 | 0 | — |
▸case-06 We have a complex desktop sticky product scroll layout with 5 pinned stages and depth parallax. On mobile devices, this long pinned sequence feels cramped and frustrating to scroll through. What is the standard pattern for handling this scroll scene across screen sizes? | pass→pass | 14,833 | 12,390 | -16% | 1 | 1 | 0% | 2,631 | 3,036 | +15% | 0 | 0 | — |
▸case-07 During a sticky scroll section showcasing a camera sensor, we want a floating lens flare element to follow the user's mouse cursor with smooth fluid motion while the main sequence stays tied to scroll position. What implementation pattern avoids heavy performance overhead during mousemove events? | fail→pass | 14,863 | 10,446 | -30% | 1 | 1 | 0% | 2,775 | 2,825 | +2% | 0 | 0 | — |
▸case-09 We need to build a standard 3-column CSS grid displaying product feature cards (icon, title, description) on a static marketing page. No scroll pinning, narrative storytelling, or animation sequence is required. What HTML structure and CSS Grid layout should we use? | pass→pass | 11,885 | 8,896 | -25% | 1 | 1 | 0% | 2,731 | 2,859 | +5% | 0 | 0 | — |
▸case-10 We need a frontend form validation component for user signup with inline field error messages and submit button disabled states. No scroll motion or product narrative is involved. How should we handle form field state validation? | pass→pass | 14,609 | 11,787 | -19% | 1 | 1 | 0% | 3,102 | 3,218 | +4% | 0 | 0 | — |
▸case-11 We need a paginated table component that fetches JSON data from an endpoint and displays page controls (Previous, Next, Page Numbers). How should we manage API requests and active page state in JavaScript? | pass→pass | 16,156 | 12,981 | -20% | 1 | 1 | 0% | 3,474 | 3,815 | +10% | 0 | 0 | — |
▸case-12 Our scroll story section has a detailed 6-step breakdown of a software interface, but users are scrolling past it too quickly before the text and UI state changes finish playing. How do we adjust the ScrollTrigger configuration so users have enough scroll distance to consume all 6 steps comfortably? | pass→pass | 13,261 | 13,940 | +5% | 1 | 1 | 0% | 2,491 | 3,316 | +33% | 0 | 0 | — |
▸case-13 In a text-heavy brand narrative section with long paragraphs describing company ethos, we currently have 15 separate micro-elements fading and scaling in on every scroll increment. The reading experience feels chaotic and distracting. How should we adjust the reveal density for text-heavy story beats? | pass→pass | 12,510 | 9,609 | -23% | 1 | 1 | 0% | 1,947 | 2,462 | +26% | 0 | 0 | — |
▸case-14 We are building a high-precision technical CAD viewer walk-through where the user needs 1:1 direct physical control over the frame alignment as they scroll. Should we use an eased scrub value like `scrub: 1` or direct scrub `scrub: true`? | pass→pass | 11,564 | 9,572 | -17% | 1 | 1 | 0% | 1,973 | 2,452 | +24% | 0 | 0 | — |
▸case-17 In a scroll scene presenting a cloud analytics dashboard, as the user scrolls into the section, we want the metric card numbers to count up from 0 to 99%, while a chart region highlights. How should this be integrated into the scroll workflow? | fail→pass | 13,153 | 11,794 | -10% | 1 | 1 | 0% | 2,358 | 3,049 | +29% | 0 | 0 | — |
▸case-18 We are displaying a complex software dashboard frame. As the user scrolls into view, 4 sidebar icons, 2 main data panels, and a header bar should appear sequentially. How should timing and delays be structured across these elements? | pass→pass | 14,696 | 12,001 | -18% | 1 | 1 | 0% | 3,131 | 2,936 | -6% | 0 | 0 | — |
▸case-19 A developer on our team proposed adding `will-change: transform, opacity, width, height, top, left` to every element on the entire scroll page to maximize GPU performance. What is the best practice regarding `will-change` in scroll-driven animations? | pass→pass | 12,843 | 9,646 | -25% | 1 | 1 | 0% | 2,255 | 2,503 | +11% | 0 | 0 | — |
▸case-20 We have a 4-scene product reveal animation on a single pinned timeline. Currently, all tweens use relative offsets like `'+=0.5'` or `'<0.2'`, making it extremely tedious to reorder scene 2 and scene 3 during design reviews. How should the timeline sequence be structured for maintainability? | pass→fail | 11,619 | 12,157 | +5% | 1 | 1 | 0% | 2,203 | 3,122 | +42% | 0 | 0 | — |
▸case-21 Our visual designer wants to obscure the actual product interface behind full-screen blur filters, heavy distortion shaders, and theatrical lens flares during the scroll sequence. What principle should guide the balance between motion aesthetics and content clarity? | pass→pass | 11,447 | 7,587 | -34% | 1 | 1 | 0% | 1,772 | 2,002 | +13% | 0 | 0 | — |
▸case-22 In a single-page app (SPA) built with Next.js / Vue, navigating away from the scroll story page to a contact page leaves background scroll listeners attached, causing errors on the new page. What step prevents this during route transitions? | pass→pass | 4,683 | 7,238 | +55% | 1 | 1 | 0% | 934 | 2,228 | +139% | 0 | 0 | — |