Getting Started

If you are using the WordPress Block Editor, the fastest way to begin is by inserting a Scrollsequence block pattern. Watch the short video first, then follow the steps below.

1. Starter Patterns

Starter patterns are pre-built block templates that you can insert into your post or page. They provide a ready-made structure for your scroll-driven animations, allowing you to quickly customize and create your own unique experience.

1. Open the Block Editor
   Create a new post or page. In case you need to export to a builder like Elementor, create a Scrollsequence custom post instead.

2. Insert a Scrollsequence pattern
   Select a Pattern from the popup when creating a new post/page/custom post. Alternatively click + → Patterns → Scrollsequence and pick a starter pattern.

3. Understand the structure
   The patterns mostly include a Scene that layers its children:
   Canvas at the back, Content on top.

4. Set Scene triggers
   In the Scene settings, adjust Start and End to control when the animation begins and finishes.

5. Edit the Canvas media
   Replace images in media group, or add a new group with Add Media.

6. Customize Content
   Add headings, text, or buttons on top of the Canvas.

7. Preview and publish
   Use the editor preview, then publish when you are ready.

Notes

• Elementor, Divi or other builder users: create a Scrollsequence custom post, then use its shortcode in the builder of your choice.
• You can generate new media with Media Tools if needed.

2. Build from Scratch - Manually

If you prefer to build your scroll-driven animation from scratch, you can start with a blank post or page and add the necessary blocks manually.

1. Open the Block Editor
   Create a new post or page. For Elementor users, create a Scrollsequence custom post instead.

2. Add a Canvas block
   This will be the area where your media (images or video) will be displayed in media groups. You can add media from WordPress library, URL, templates, or generate new media. In the example video above, I have converted an existing video to an image sequence for smooth scroll playback.

3. Insert the Canvas into a Scene
   The Scene block allows you to layer content on top of the Canvas and set scroll triggers.

4. Add Content blocks
   You can add headings, text, buttons, or any other content blocks on top of the Canvas within the Scene.