Skip to Content
🎉 Scrollsequence v2 is in Beta 🎉
V2Blocks Canvas 2D

Canvas 2D Block

Beta Release:
This documentation covers the Beta version of the Canvas 2D block for WordPress Gutenberg. Features and UI may change. Some features are incomplete or experimental.

1. Introduction

The Canvas 2D block is a powerful Gutenberg block for creating scroll-driven animations using image sequences and videos. It is based on the Scroll Sequence (Scrollsequence v2) engine, bringing advanced storytelling and animation capabilities to WordPress.

  • Scrollsequence v1 allowed users to animate image sequences on scroll.
  • Scroll Sequence (v2) is a complete rewrite, offering more flexibility, better performance, and a modern block-based UI.

2. Features Overview

  • Add multiple media groups (images, videos, gaps)
  • Fine-tune animation triggers and smoothness
  • Responsive sizing and layout controls
  • Visual block editor interface
  • Powered by the ScrollSequence JavaScript library

3. Block Interface Overview

Below is an overview of the main block settings and panels.

  • Dimensions: Set width, height, margin, and spacing.
  • Media Groups: Add and manage image/video groups.
  • Animation Trigger: Control when and how the animation starts/ends.

4. Getting Started

Adding the Block

  1. Open the WordPress block editor.
  2. Search for Canvas 2D and add it to your page.

Basic Setup

  • Click Add Media Group to start adding images or videos.
  • Adjust dimensions and triggers as needed.

5. Media Groups

Media groups are the core of your animation. Each group can be:

  • WP Media Images: Select images from the WordPress media library.
  • URL Image List: Provide a list of image URLs.
  • WP Media Video: Select a video from the media library.
  • Video URL: Provide a video URL.
  • Gap: Insert a pause or empty space in the animation.

Managing Media

  • Use the Replace Images or Replace Video button to update media.
  • Drag to reorder groups.

6. Dimensions & Layout

Control the block’s appearance and layout:

  • Width/Height: Set in %, px, vh, etc.
  • Margin/Spacing: Adjust outer and inner spacing.
  • Border & Shadow: Optional styling.

7. Animation Triggers

Fine-tune when your animation starts and ends as the user scrolls.

  • Trigger Start/End: Set how early or late the animation begins/ends.
  • Smoothness: Control the animation’s delay for a more fluid effect.
  • Show Markers: Toggle visual markers for debugging.

8. Advanced Settings

  • Background Size: Choose between Contain, Cover, or Custom.
  • Focal Point: Adjust the focus area for images/videos.
  • Custom Options: (Planned for future releases)

9. How It Works (Technical Overview)

The block uses the ScrollSequence JavaScript library to render and animate media on a <canvas> element. Block settings are saved as attributes and passed to the frontend, where ScrollSequence handles:

  • Preloading images/videos
  • Drawing frames to canvas based on scroll position
  • Managing animation triggers and smoothness

10. Known Issues & Limitations

  • Some features are incomplete or experimental (e.g., custom options, advanced video controls).
  • UI/UX may change in future releases.
  • Not all browsers are fully tested.
  • Please report bugs and feedback!

11. FAQ / Troubleshooting

Q: My images/videos are not displaying.
A: Check that your media group is set up correctly and that files are supported.

Q: Can I use both images and videos?
A: Yes, you can mix media groups.

For more help, contact support or open an issue.

Last updated on
Canvas 1D Canvas 3D
Feedback