Scene Block (Sticky & Pinned)

The Scene block (scroll-sequence/v2-scene) is the root container block for scroll-driven animations in Scrollsequence V2. It manages viewport pinning, scroll duration, triggers, and timing for all child layers.

Key Settings & Attributes

1. Duration & Sizing

• Height (height, heightUnit): Sets the physical visible viewport height of the scene (default 100vh).
• Duration (duration, durationUnit): Defines how many pixels (or viewport heights) the scene remains pinned while the user scrolls (default 1500px). A longer duration slows down the animation; a shorter duration speeds it up.
• Top Offset (top, topUnit): Defines an optional top offset (e.g., to account for a fixed navigation header).

2. Positioning Mode

• Sticky (scenePosition: "sticky"): The Scene stays pinned in the viewport while the user scrolls through the configured duration.
• Sticky Type (stickyType):
  • CSS Sticky (Default): Uses browser-native position: sticky for high performance.
  • JS Sticky: Uses JavaScript scroll management, helpful if parent theme containers have overflow: hidden.

3. Scroll Triggers & Scrubbing

• Scrub (scrub): Smoothness dampening factor (e.g., 1 for smooth interpolation, 0 for instantaneous snapping).
• Trigger Start (triggerStart): Viewport position where the scene pin starts (default 0.5, representing vertical center).
• Trigger End (triggerEnd): Viewport position where the scene unpins and normal page scroll resumes (default 0.5).
• Markers (markers): Enable visual debug markers in the editor to inspect start/end trigger points.

Scene Structure

Inside WordPress, your layout structure will look like this:

▼ Scene Block (Duration: 1500px, Height: 100vh)
  ├── ▼ Layer Block (Placement: center center)
  │     └── Canvas 2D Block (Image Sequence)
  │
  └── ▼ Layer Block (Placement: center center)
        ├── Heading: "Your Title"
        └── Paragraph: "Supporting subtitle description"

Each child Layer block can be positioned anywhere across the 9-point placement grid (top-left, center-center, bottom-right, etc.).

Content Animations

You can attach animated styles to content blocks inside the Scene. Animations can run:

• Synchronized to the overall Scene scroll progress (0% to 100%).
• Synchronized to an individual Media Group inside a Canvas 2D block.

Best Practices

1. Duration tuning: For standard 120-frame sequences, a duration between 1200px and 2000px provides a comfortable, natural scroll feel on desktop.
2. Layer separation: Keep your Canvas 2D / 3D blocks in their own dedicated Layer, and place text, buttons, and badges in separate Layer blocks stacked above it.