Animate on Scroll Without a Third-Party Plugin: The DesignSetGo Animation Extension

Scroll-triggered animations are one of those features that always seems to require a third-party plugin. AOS, ScrollMagic, GSAP with ScrollTrigger, some page builder’s proprietary add-on — each one ships its own JavaScript, its own initialization code, and its own performance footprint.

DesignSetGo’s Animation extension takes a different approach: a few dozen lines of modern CSS, the native IntersectionObserver, and an attribute that attaches to any block — core paragraphs, core images, DesignSetGo sections, all of it. No extra libraries, no jQuery, and a footprint small enough that we don’t load it on pages that don’t use it.

What it does

The extension adds an “Animation” panel to the sidebar of every supported block. Enable it, and you get:

• Entrance animations: fade, slide (four directions), scale, and zoom variants.
• Triggers: on scroll (element enters viewport), on page load, or on hover.
• Timing controls: duration, delay, easing.
• Repeat behavior: play once, or re-play each time the element re-enters the viewport.

Everything is driven by data-dsgo-* attributes on the rendered HTML. The frontend JS is ~2KB gzipped, it uses IntersectionObserver natively (supported in every browser since ~2019), and the animation itself is pure CSS transitions — so it runs on the compositor, not the main thread.

How to apply it

1. Select any block in the editor.
2. Open the block inspector (right sidebar).
3. Scroll to the Animation panel and enable it.
4. Pick an entrance animation — Fade In Up is the safe default.
5. Set the trigger to On Scroll.
6. Save and view on the frontend.

That’s the whole workflow. For most blocks, the defaults (600ms duration, ease-out, triggered when the element is 15% into the viewport) are right.

Patterns that work

Staggered reveals. Apply the same animation to three feature cards, but set delays of 0ms, 150ms, and 300ms. The eye reads them as a choreographed entrance rather than a simultaneous flash.

Content-first heroes. Animate the hero heading with a fade-in-up at 0ms, the subheading at 200ms, the button at 400ms. Total 1 second — fast enough to feel responsive, slow enough to read as intentional.

Side-to-center sections. In a two-column section, animate the left column with slide-in-from-left and the right column with slide-in-from-right. They meet in the middle and the section clicks into place.

Scale-on-hover cards. Set the trigger to Hover, animation to Scale, duration to 200ms. A subtle interactive affordance that doesn’t need custom CSS.

Patterns that don’t

Animating the first visible element. If your hero heading is above the fold, a scroll-triggered animation fires on page load — and with the default behavior, the user sees an empty space flash to filled. Either set the trigger to On Load (runs immediately, no viewport check) or skip animating the very first element entirely.

Animating every single block. If everything moves, nothing moves. Pick the 2-3 elements per page that carry the most visual weight — section headings, hero CTAs, feature grids — and leave paragraphs and body text alone.

Long durations. Anything over 800ms starts to feel sluggish. Our sweet spot is 400-600ms.

Accessibility: reduced motion

Users who’ve enabled Reduce motion at the OS level (macOS → Accessibility → Display, iOS → Accessibility → Motion, Windows → Ease of Access → Display) see the final state immediately. The extension respects prefers-reduced-motion: reduce automatically — no setting to toggle, no code to write.

This matters. Scroll animations are the single most common motion-sickness trigger on the web, and WCAG 2.1 requires a way to disable them. We handle it for you.

Performance notes

• The observer script only loads on pages that contain an animated block.
• Animations use transform and opacity only — GPU-accelerated, no layout thrashing.
• Elements start with visibility: hidden until observed, so there’s no flash of unstyled animation.
• The observer disconnects after one-shot animations fire — no lingering listeners.

If you’ve been reaching for AOS or a page-builder plugin for scroll animations, try the Animation extension on your next page. It’s already bundled with DesignSetGo, it works on core blocks, and it’s one fewer dependency on your site.