SECOND LOOK: Before-and-After Template

SECOND LOOK is an eight-second before-and-after template for designers, agencies, renovation studios, and photo-restoration services: the original image peels away like paper, revealing the transformation before unfolding into a call-to-action ribbon. Replace two separately named images, edit the live text and logo, and change three colors while the animation stays intact. Built natively with SVGator MCP, the demo shows identical choreography across website redesign, interior renovation, and photo-restoration content.

Role: SVG motion design and template architecture Timeline: October 2026 Stack: SVGator, SVG, CSS animation, Antigravity MCP

Before-and-after comparisons are a cornerstone of portfolio marketing for designers, contractors, and restoration services. A static side-by-side works, but a short animated reveal — where the "before" peels away to expose the "after" — is dramatically more engaging on social media. The challenge was to build a single reusable template where two images and some text are all a user needs to change.

Paper-peel metaphor. The "before" image peels away from the top-right corner like a page turning, using skew and opacity keyframes to simulate the physical motion of paper lifting off a surface.

Two-image simplicity. The entire template requires exactly two images — before and after — each in its own named layer. No masking tricks or manual positioning needed.

CTA ribbon unfold. After the reveal completes, a ribbon unfolds from the bottom carrying the call-to-action text. This gives the viewer a clear next step while the "after" image is still visible.

Three-color control. Background, ribbon, and accent colors are each tied to a named variable, making full re-theming a three-step edit.

The template was authored entirely through SVGator MCP. Key implementation details:

The paper-peel effect uses coordinated skewX, translateX, and opacity keyframes on the "before" image layer

A subtle shadow element follows the peel edge to reinforce the 3D illusion

The CTA ribbon unfolds with a scale-Y animation anchored to its top edge

All timing uses cubic-bezier easing curves calibrated for natural motion

Three demo variants — website, interior, photo restoration — prove the template works across industries

All demonstration artwork is original. Typography uses Inter, redistributable under SIL OFL.

The finished template is a self-contained SVGator project at 1080 × 1350:

Two separately named image layers (before / after)

Live editable text for headline, description, and CTA

Replaceable logo element

Three-color palette for instant re-theming

Paper-peel reveal with shadow simulation

CTA ribbon unfold animation

Open in SVGator · View original post