Build and verify responsive scroll experiences without losing grouped motion, page-load triggers, stylesheets, or playable media between editor, preview, and export.
Where: Website/Designer editor → motion controls and Preview; import or export when testing delivery parity.
Key ideas
- Motion stays semantic through import: Grouped GSAP timelines are preserved as related motion rather than flattened into disconnected animations. Range-style media rules become actual breakpoint behavior, and top-level comma selectors are parsed as separate targets.
- Pins need geometry and a reachable ending: Pinned scenes are clamped to available page travel. A last-section pin cannot finish cleanly, and artificially shrinking the page to satisfy a fit check is not a valid fix.
- Editor, preview, and export share intent: Page-load triggers fire at page load, the shared page container keeps breakpoint editing coherent, stylesheets survive preview/export, detached website videos play, and deterministic video export waits for the correct playback cues.
Steps
- Import or author the page using one shared page container and real component selectors. Inspect any imported grouped motion before editing individual beats.
- Create load, hover, mouse, or scroll behavior through the motion controls. For a stagger, target the parent and animate its children rather than duplicating one animation per child.
- For pinned or scrubbed scenes, ensure enough normal document flow follows the pin and keep the final section unpinned.
- Test from a fresh Preview load so load triggers, initial media state, and first frames are exercised.
- Resize across actual breakpoints and inspect range-bound rules, shared selectors, and video fit/playback.
- Export or render a representative result and compare it to Preview. Verify stylesheet presence, trigger timing, grouped motion, and detached media—not only a still screenshot.
Recent reliability fixes
- Range-syntax media imports become real responsive breakpoints.
- Grouped GSAP motion remains grouped through import and editing.
- The root page container is retained and component breakpoint editing uses a consistent selector location.
- Top-level comma-separated selectors are parsed correctly.
- Load triggers execute on page load again, including AI-authored stagger behavior.
- Preview/export retain the intended stylesheet; detached website videos can play; video-export capture uses deterministic cues.
Safe repair behavior
- Legacy CSS corruption is healed once rather than repeatedly rewriting valid authored styles.
- Selector editing is centralized so one control does not silently target a different scope.
- Page-fit and review corrections should patch the responsible elements, not scale down an otherwise correct page.
- Scroll pins should be audited against remaining flow before delivery.
Motion and layout verification updates
Recent verification distinguishes intended gallery travel from clipped content, keeps viewport-owned fixed-stage transforms out of authored motion, restores mobile entry motion, verifies sticky overlays and scrub-zone ownership, and waits for a driven page to settle even when it never visibly leaves frame zero.
- Pinned scenes must fit available page flow.
- Gallery entrances must remain inside their staged playback window.
- Responsive stacks are checked against aspect overflow.
- Real video frames can be captured for review instead of judging placeholders.
Tips
- Always test a load-trigger animation with a hard preview reload; replaying from an already-settled editor state can hide the bug.
- Use one intentional page-root layout system, then let component breakpoints handle local changes.
Limitations and important notes
- Imported third-party scripts can still depend on runtimes the safe preview does not execute.
- A desktop visual review does not replace testing touch input, reduced motion, and smaller breakpoints.
- Video export timing fixes improve determinism but cannot make an unreadable/blocked media source available.
Troubleshooting
A scroll scene completes too fast near the page bottom.
Add meaningful flow after it, move it earlier, or reduce pin travel. Do not leave a pinned scene as the last section.
Preview looks right but export loses styles.
Confirm the page uses the shared stylesheet/document path and no external linked CSS is missing; rerun the export after the source is saved.