How to Build an Apple-Style Image Sequence Animation in Webflow

This tutorial empowers web designers to replicate the iconic, fluid scroll animation found on the original Apple AirPods Pro landing page, moving beyond common shortcuts like Lottie files to rebuild the effect from first principles using Webflow and GSAP ScrollTrigger. The core value lies in its comprehensive, high-fidelity workflow: rather than relying on video tags, the user learns to manipulate a sequence of approximately 150 high-resolution frames that update dynamically with the user's scroll, ensuring a "perfectly fluid movement" that feels interactive and premium. This approach grants designers total control over the visual progression and performance of the animation without sacrificing quality.

The instructional journey bridges the gap between design and development by introducing a sophisticated asset management strategy. Viewers achieve proficiency in a complete "no-code" friendly pipeline that includes extracting frames from video sources, compressing them into efficient AVIF formats, and—most critically—leveraging the Webflow API via Postman to automate the retrieval of asset URLs. This eliminates the tedious and error-prone process of manually copying hundreds of file links, providing the user with a scalable, reusable method for accessing project assets programmatically.

By the conclusion of this masterclass, the viewer will have implemented a fully responsive, accessible scroll-scrubbing component using HTML5 Canvas and sticky positioning. The final architecture allows for extensive customization through simple HTML attributes, enabling designers to control parameters such as playback speed, start/end trigger points, and image fitting (cover vs. contain) across different device breakpoints. The result is a professional-grade, highly optimized interaction that enhances user engagement while adhering to inclusive design standards.

• Optimal Source Material Configuration: To achieve the ideal balance between visual smoothness and file size, utilize a video source approximately 6 seconds in length. This duration allows for roughly 144 to 150 frames (at 24 fps), which provides enough data for a smooth scroll-linked animation while keeping the asset load manageable for the browser.
• Automated Asset Retrieval via API: Instead of manually guessing or copying unpredictable CDN URLs, leverage the Webflow API and Postman to programmatically fetch asset data. By sending GET requests to the list asset folders and assets endpoints—and utilizing the offset parameter for lists exceeding 100 items—you can generate a precise, ordered array of image URLs for immediate use in your script.
• Strategic Asset Compression and Organization: To maximize performance and ensure script functionality, compress all extracted frames into the AVIF format using Webflow’s built-in compression tool after uploading. Furthermore, it is critical to move these specific images into a dedicated assets folder named "frames," allowing the API to isolate these assets from the rest of the project files.
• Canvas-Based Rendering: The effect relies on an HTML5 <canvas> element placed within a container set to position: sticky. This ensures the animation remains fixed in the viewport while the user scrolls through the section, with the script drawing frames onto the canvas surface in real-time, functioning like a "whiteboard" that updates frame-by-frame based on scroll progress.
• Attribute-Driven Customization: The entire animation behavior can be configured without writing JavaScript by using specific HTML attributes on the section element. Key attributes include fc-image-scrubbing-fit (to toggle between "cover" and "contain" for responsiveness) and fc-image-scrubbing-fps (to define the virtual pacing of the sequence), granting designers fine-grained control over the user experience.

• 03:32 - Uploading Video Source: Users upload their video file to frameextractor.com to begin the frame generation process.
• 03:44 - Configuring Extraction Settings: Setting the "number of frames" (e.g., 144) and "distance between frames in milliseconds" (e.g., 40ms) to define the density of the image sequence.
• 05:15 - Initiating Frame Extraction: Clicking "Extract" and then "Download All" to save the sequence of PNG files locally.
• 06:52 - Compressing Frames: Dragging all extracted frames into compressimage.io to optimize file sizes before Webflow upload.
• 07:22 - Converting to AVIF in Webflow: Selecting all uploaded assets in the Webflow panel and clicking "Compress selected assets" to convert them to AVIF format.
• 07:51 - Organizing Assets: Creating a specific folder named "frames" in the assets panel and moving all image sequence files into it to isolate them for the API.
• 10:34 - Locating API Endpoints: Navigating to the developers.webflow.com API Explorer to find the list asset folders endpoint.
• 12:28 - Setting Up the Postman Request: Creating a "New Request" in Postman and pasting the list asset folders URL.
• 12:42 - Retrieving Site ID: Copying the "Site ID" from the Webflow Site Settings (Overview section) to replace the placeholder in the API URL.
• 13:18 - Generating API Token: Navigating to "Apps and Integrations" in Webflow settings to generate a Read-Only API token.
• 14:10 - Authenticating the Request: Setting the Authorization type to "Bearer Token" in Postman and pasting the API key.
• 16:03 - Handling Pagination (Offset): Adding a query parameter with the key offset and value 100 in Postman to retrieve assets beyond the initial 100-item limit.
• 20:09 - Applying Component Attribute: Adding the custom attribute fc-image-scrubbing="component" to the section element to identify it as the animation wrapper.
• 20:22 - Linking Image URLs: Pasting the generated JSON array of image URLs into the fc-image-scrubbing-urls attribute on the section element.
• 20:44 - Configuring the Container: Setting the main container's position to sticky with top: 0 so the animation remains fixed during the scroll.
• 21:49 - Creating the Canvas: Adding a custom HTML element to the container, setting the tag to canvas, and defining width="100%" and height="100%".
• 22:40 - Adding Accessible Fallback: Creating a visually-hidden paragraph containing the descriptive text to ensure screen reader accessibility.
• 26:03 - Customizing Image Fit: Using the attribute fc-image-scrubbing-fit (values: cover or contain) to control how images scale within the canvas.
• 27:32 - Defining Triggers: Setting fc-image-scrubbing-start-point and fc-image-scrubbing-end-point (e.g., "top top" or "bottom bottom") to control the scroll interaction timing.

Apple AirPods Pro Scroll Animation in Webflow: Technical Guide

Phase 1: Asset Preparation and Optimization

1. Extract Frames from Video Source

• Reference: 02:19 – 05:27
• How: Use a tool like frameextractor.com. Upload a video file approximately 6 seconds in length. Set the "Number of frames" to roughly 144 (assuming a 24fps reference) and the "Distance between frames" to roughly 40ms. Click "Extract" and then "Download all."
• Why: A 6-second video provides enough visual progression for a smooth scroll without creating an unmanageable file load. 144-150 frames strikes the ideal balance between fluidity and performance.

2. Compress Frames Externally

• Reference: 05:53 – 07:07
• How: Before uploading to Webflow, drag your PNG sequence into compressimage.io. Download the compressed zip file.
• Why: Webflow may discard files during upload if it detects duplicate visual data, even if filenames differ (common with static frames). External compression prevents this issue and reduces initial upload size.

3. Convert to AVIF in Webflow

• Reference: 07:14 – 07:45
• How: Upload the compressed frames to the Webflow Assets panel. Select all of them, click "Compress selected assets," and choose the AVIF format.
• Why: AVIF conversion significantly reduces file size compared to standard PNGs or JPEGs, ensuring the animation loads quickly for the user.

4. Organize Assets into a Folder

• Reference: 07:51 – 08:24
• How: Create a new folder in the Webflow Assets panel specifically named "frames". Move all the extracted images into this folder.
• Why: This isolation is critical for the next phase. It allows the API to identify and fetch only the animation sequence images rather than every asset in the project.

Phase 2: Automated Asset Retrieval (API & Postman)

5. Locate the "List Asset Folders" Endpoint

1. Reference: 10:12 – 11:27
2. How: Visit the Webflow Developers documentation (developers.webflow.com) and navigate to Custom Integrations > Assets > List Asset Folders. Copy the API URL provided.
3. Why: This endpoint is necessary to retrieve the unique IDs required to filter your specific "frames" folder.

6. Configure Postman Request

• Reference: 12:01 – 14:23
• How: Open Postman and create a "New Request." Paste the URL from the previous step.

1. Replace SITE_ID in the URL with your actual Site ID (found in Webflow Site Settings > Overview).
2. Generate a Read-Only API Token (Webflow Site Settings > Apps & Integrations).
3. In Postman, set Authorization to Bearer Token and paste your API key.

• Why: This establishes a secure connection to your project data, allowing you to read asset information without writing custom backend code.

7. Fetch and Process Asset Data

• Reference: 15:22 – 17:41
• How: Change the Postman request URL endpoint from assets/folders to simply assets. Send the request. Copy the JSON response and paste it into the custom tool provided in the project resources.
• Why: This retrieves the CDN URLs for your images. The custom tool filters this data to generate a clean, ordered list of URLs.

8. Handle Pagination for Large Sequences

• Reference: 17:47 – 18:45
• How: Because the API limits responses to 100 items, add a query parameter in Postman: Key = offset, Value = 100. Send the request again to get the remaining frames (101–144). Paste this second JSON batch into the custom tool to merge it with the first.
• Why: Without the offset, your animation would be missing the final third of its frames. Merging the data ensures a complete sequence.

Phase 3: Implementation and Configuration

9. Configure the Section Element

• Reference: 19:36 – 20:33
• How: Create a Section with a height of roughly 300vh. Add two custom attributes:

1. fc-image-scrubbing="component"
2. fc-image-scrubbing-urls="[PASTE_GENERATED_ARRAY]"

• Why: The height determines the scroll distance required to play the animation (taller = slower/smoother). The attributes connect the HTML element to the script and provide the image source data.

10. Set Up the Sticky Container

• Reference: 20:39 – 21:19
• How: Inside the section, add a Container (100vh height). Set its Position to Sticky with Top: 0.
• Why: Sticky positioning ensures the animation remains fixed in the viewport while the user scrolls through the 300vh section, creating the "scrubbing" illusion.

11. Implement the Canvas Element

• Reference: 21:34 – 22:34
• How: Add a custom HTML Embed inside the container. Set the code to <canvas width="100%" height="100%"></canvas>. Add the attribute aria-hidden="true" to the canvas element.
• Why: The canvas acts as the "whiteboard" where JavaScript draws the frames. aria-hidden ensures screen readers ignore this purely visual element.

12. Add Accessibility Fallback

• Reference: 22:40 – 23:28
• How: Add a paragraph with a visually-hidden class (1px size, overflow hidden) containing a text description of the animation.
• Why: Inclusive design requires that the visual message (e.g., "Rotating Logo") is accessible to users relying on screen readers, as the canvas itself is invisible to them.

13. Customize Responsive Behavior

• Reference: 26:03 – 29:10
• How: Apply attributes like fc-image-scrubbing-fit with values cover or contain. Use fit-landscape (e.g., cover) for desktop and fit-portrait (e.g., contain) for mobile.
• Why: This ensures the subject remains visible and properly scaled across different device orientations, preventing the image from being cut off on mobile screens.

To achieve this effect without video tags, extract approximately 150 frames from a 6-second video and compress them into AVIF format. Load these images into an HTML5 <canvas> element placed within a sticky container, then use GSAP ScrollTrigger to draw the correct frame onto the canvas dynamically as the user scrolls.

Instead of manually copying links, use Postman to send a GET request to the Webflow API assets endpoint using your Site ID and Read-Only Bearer Token. For projects with over 100 assets, you must add an offset query parameter (e.g., offset=100) to retrieve the remaining files in batches.

A source video duration of approximately 6 seconds is optimal for scroll-linked animations. At 24 frames per second, this generates roughly 144 to 150 frames, which offers enough data for fluid visual progression while keeping the total asset weight manageable for browser performance.

You can control how images render within the canvas using custom attributes like fc-image-scrubbing-fit set to either cover or contain. To handle different devices, define orientation-specific attributes (e.g., fit-landscape for desktop immersion and fit-portrait for mobile safety) to ensure the subject remains visible.