Sequentialanimation docs

Sequential Animation enables a scroll-based animation using a sequence of images. As users scroll, the sequence dynamically updates, creating a smooth animation effect. The implementation is particularly effective for storytelling, showcasing product details, or adding interactivity to your designs.

Preview

Open preview

Quick Setup

This element needs to split the video you are going to use in many images, I will help you in the process.

Step 1: Prepare the Video

Record/prepare a video no longer than 10 seconds.
Use HD quality (1920×1080) to ensure crisp image output.

Step 2: Install FFmpeg

Download FFmpeg from https://ffmpeg.org/download.html.
- For Windows: Choose the option “Windows builds from gyan.dev.”
Extract the downloaded ZIP file.
Copy the bin folder to C:\ffmpeg

FFmpeg is a command line tool. You need to open it from the CMD (command prompt):

Press Windows + R
Type ‘cmd’ and press Enter
Navigate to the folder where you have your video: cd path/to/your/folder

Tip: To find the path to the video: Go to the folder where the video is Hold down the Shift key and right-click on the video Select ‘Copy as path’.

Step 3: Extract Frames

Open CMD as administrator and run these commands:

ffmpeg -i “[full_path_video]” -vf “fps=24” -c:v libwebp -q:v 90 “C:\bin\frames_%04d.webp”

-i “[full_path_video]”
- Specifies the input video file. Replace [full_path_video] with the full file path of the video you want to process.
- Example: "C:\Users\George\Downloads\MyVideo.mp4".
-vf “fps=24”
- Applies a video filter (-vf) to set the output frame rate to 24 frames per second (fps).
- This means FFmpeg will extract 24 images per second of video.
-c:v libwebp
- Chooses the video codec (-c:v) to encode the frames into the WebP format, which is optimized for web usage and supports transparency.
q:v 90
- Sets the quality of the output images. The -q:v flag adjusts the compression quality:
  - 0: Lowest quality, smallest file size.
  - 100: Maximum quality, largest file size.
“C:\bin\frames_%04d.webp”
- Specifies the output directory, filename format, and image format:
  - C:\bin: Folder where the images will be saved.
  - frames_%04d.webp
    - frames_: Base name for the images.
    - %04d: Sequence numbering padded to 4 digits (e.g., frames_0001.webp, frames_0002.webp).
    - .webp: File format for the output images.

After entering your full command all images will go to the bin folder, there you can find them.

Step 4: Upload Frames to Hosting

Use an FTP client (e.g., FileZilla) to upload the generated frames.
Create a new directory on your server:
- wp-content/uploads/project-name
Upload all the frames to this folder.
Note the base URL of your frames, such as:
- https://yourdomain.com/wp-content/uploads/project-name/frame_

The path ends in ‘frame_’ because the numbering is not taken into account. If you had defined another name such as ‘images’ then the path would have to end in ‘images_’.

Step 5: Implementation in Bricks Builder

To implement the extracted WebP images as a scroll-based animation in Bricks Builder, you will use a ‘section’ element with specific attributes to configure the scroll sequence. Here is how each attribute works:

data-scroll-sequence

Required

Purpose: Marks the section as a scroll sequence container.
Usage: Add this attribute to your section to enable the scroll-based animation.

data-frames

Required

Purpose: Specifies the total number of frames in your animation.
Value: The exact number of WebP images you extracted using FFmpeg.
Example: If you extracted 90 frames, use data-frames="90".

data-sequence-path

Required

Purpose: Defines the base path to the WebP frames stored on your server.
Value: The complete URL path, including the prefix of your image filenames.
Example: If your images are stored at https://yourdomain.com/uploads/project/frame_, use data-sequence-path="https://yourdomain.com/uploads/project/frame_".

Advanced configuration

data-desktop-width

Optional

Specifies the width of the canvas container in percentages for desktop devices.

Default: 80

data-desktop-height

Optional

Specifies the height of the canvas container in viewport height (vh) for desktop devices.

Default: 80

data-mobile-landscape-height

Optional

Sets the height of the canvas container in landscape mode on mobile devices (in vh)

Default: 80

data-mobile-portrait-height

Optional

Sets the height of the canvas container in portrait mode on mobile devices (in vh).

Default: 100

data-start-delay

Optional

Indicates the percentage (as a decimal) of the viewport height to scroll before the animation starts.

Default: 0.2

data-section-height

Optional

Sets the total height of the section (in vh), allowing control over the scrollable area.

Default: 150

data-animation-intensity

Optional

Adjusts the intensity of the animation effect.

Default: 1

data-animation-effect

Optional

Adds effects to the animation, such as: zoom-in or zoom-out.

Default: none

Visual Configurator

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES