Skip to Content
🎉 Scrollsequence v2 is in Beta 🎉
V2Blocks Scene

Scene Block (Sticky & Fixed)

The Scene block is a core layout block in Scrollsequence 2, designed to control how content is positioned and animated within the scene as users scroll. It supports both Sticky and Fixed positioning, enabling advanced scroll-based effects and layouts.

The Scene block acts as a container that manages the position, height, and scroll-triggered behavior of its child blocks. It is typically used inside the Scrollsequence Container block.

Key Features

  • Sticky Positioning: Keeps content in view as the user scrolls, until a certain point.
  • Fixed Positioning: Pins content to a fixed spot in the scene, regardless of scroll.
  • Send Behind Content: Optionally moves the block behind other content for layered effects.
  • Custom Height & Units: Control the block’s height using various units (vh, px, %, etc.).
  • Scroll Duration: Define how long (in pixels or other units) the sticky/fixed effect lasts.
  • Offset Controls: Fine-tune the block’s position from the top of the scene.

Usage

  1. Add the Scene Block:
    Insert the Scene block inside a Scrollsequence Container block.

  2. Choose Positioning:

    • Sticky: Content stays in view while scrolling until a defined duration.
    • Fixed: Content remains fixed in the scene regardless of scroll.

  3. Configure Height and Duration:

    • Set the block’s height and the scroll duration for the sticky/fixed effect.
    • Choose units (vh, px, %, etc.) as needed.

  4. Advanced Options:

    • Enable “Send Behind Content” to layer the block behind other elements.
    • Adjust top/absTop offsets for precise positioning.
    • Use markers and scrub for debugging and fine-tuning animations.

Example Use Cases

  • Sticky Hero Section: Keep a hero image or animation visible as the user scrolls.
  • Fixed Call-to-Action: Pin a CTA or navigation element to the scene.
  • Layered Animations: Combine “Send Behind Content” with other blocks for parallax or depth effects.

Tips

  • The Scene block is intended to be used as a child of the Container block.
  • Use the Inspector Controls in the block editor sidebar to adjust all settings.
  • For best results, experiment with different combinations of height, duration, and positioning.
Last updated on
Canvas 3D Container
Feedback