Skip to Content
Scrollsequence v2 šŸŽ‰ Alpha dev preview šŸŽ‰
V2Blocks Container Viewport

Viewport Block (Sticky & Fixed)

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

The Viewport 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 viewport, 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 viewport.

Usage

  1. Add the Viewport Block:
    Insert the Viewport 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 viewport 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 viewport.
  • Layered Animations: Combine ā€œSend Behind Contentā€ with other blocks for parallax or depth effects.

Tips

  • The Viewport 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