GSAP ScrollTrigger image sequence in WordPress without code: when DIY isn't worth it

Short answer: building a scroll image sequence with GSAP ScrollTrigger and canvas is fine if you're a developer, it's one page, and you're happy to maintain it. It stops being worth it when you need mobile frame sets, smooth loading, editing inside Elementor, Bricks or Gutenberg, or non-developers updating content. Then a plugin like Scrollsequence does the same job without custom code.

What does the DIY GSAP version actually involve?

The core demo is short: load frames into an array of images, create a ScrollTrigger that pins a section, and on update draw images[frame] onto a canvas. That's maybe 30–50 lines and it works on your laptop.

The production version is where the time goes:

• Frame export: ffmpeg commands, frame step, sizes, format.
• Loading strategy: first frame first, progressive loading, not blocking the page.
• Memory: not holding hundreds of decoded frames on a phone.
• Mobile: a separate portrait frame set, DPR capping, resize handling.
• Blank-frame handling: drawing the nearest loaded frame on fast scroll.
• Layout: pinning, scroll length, overlapping text, resize and orientation changes.
• WordPress integration: enqueueing scripts, getting it into a builder, surviving theme and plugin updates, caching and optimization plugins.

Each one is solvable; together they're days or weeks, and then they're yours to maintain.

When is DIY GSAP the right call?

• You're a front-end developer and enjoy it.
• The site is custom-coded anyway, not built in a page builder.
• It's a single, one-off animation.
• You need behaviour no plugin offers.
• You'll be around to fix it when browsers, GSAP or the theme change.

That's a perfectly good reason to build it. If that's you, start from our performance checklist: image sequence lagging on mobile? 9 fixes.

When does a plugin win?

• You (or your client) build in Elementor, Bricks, Divi or Oxygen. Scrollsequence drops in with a shortcode, [scroll-sequence id="..."], that renders in the builder and on the live site.
• You use Gutenberg. Scrollsequence has native blocks (Scene, Layer, Canvas 2D/3D). See the Scrollsequence WordPress documentation.
• You start from a video. The free vid2ssq converter (npx scrollsequence vid2ssq, or built into wp-admin in v2) handles export.
• Mobile matters. Multi-resolution sequences let phones get a lighter set without extra code.
• Non-developers edit the page. Text and layers stay editable in WordPress, not in a JS file.
• You build several of these, for different pages or clients.

Why not just scrub an MP4 with GSAP?

It's tempting: one file instead of hundreds. But setting video.currentTime on every scroll update makes the browser seek constantly, and most browsers can't seek compressed video that fast. Result: stutter, especially on mobile and in Safari. Full explanation: video on scroll: why scrubbing an MP4 stutters.

A quick decision guide

Related reading

• Video on scroll: why scrubbing an MP4 stutters
• Image sequence lagging on mobile? 9 fixes
• AI video scroll animation in WordPress and Elementor

FAQ

Do I need GSAP to make a scroll image sequence in WordPress? No. GSAP is one way to build it yourself. A plugin like Scrollsequence handles scroll tracking and drawing for you.

Can I use GSAP and Scrollsequence on the same site? Does Scrollsequence use GSAP? Scrollsequence v2 does not use GSAP. Versions (v1) uses GSAP, but we moved completely away from it: GSAP ScrollTrigger frequently caused friction inside page builders like Elementor (especially with nested scroll containers, sticky sections, and dynamic resize calculations), and GSAP's timeline syntax introduced maintenance overhead across version upgrades. Also, if another plugin was using different version of GSAP it caused conflicts.

Today, Scrollsequence is powered by Motion, which serves as a modern wrapper around the browser's native Web Animations API (WAAPI). This offloads animation timing and interpolation directly to the browser's compositor thread and GPU instead of executing heavy JavaScript timer loops on the main thread. Because Scrollsequence doesn't bundle GSAP, you can run GSAP elsewhere in your theme or custom scripts with zero library conflicts.

Is the DIY approach faster on the frontend? Not inherently. Performance comes from frame count, sizes, loading and memory handling, whichever tool draws the frames.

Is there a free way to try the plugin route? Yes: the free version of Scrollsequence and the free vid2ssq converter.

---

If you've got a half-working GSAP demo and a deadline, try the plugin route on the same video first. Convert it with vid2ssq, drop it into your page with a block or shortcode, and compare on a real phone.