Canvas 2D Block

Alpha Release:
This documentation covers the alpha/dev 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.