Motion Designer — Redesign an Animated Web CTA Banner (SVG, Accessible, Multi-Variant)
Budget / Salary$250–750
TypeFreelance project
LocationRemote
Posted4 hours ago
About us
We build ExpressCTA, a widget that car dealerships install on their website. It puts a "get your best price" call-to-action onto vehicle listing pages. We serve several hundred dealer sites in the US.
The job
One of our core assets is an animated banner we call "Blinky." It sits on the vehicle card and is usually the very first thing a shopper's eye lands on. It has never been redesigned and it looks it — it's a 2005-era flashing GIF. We want it reimagined as a small set of modern, lightweight, accessible animated banners.
This is a design + asset production job. You will not touch our codebase; we handle the integration. We need finished, production-ready files.
What exists today (so you know what you're replacing)
1024 x 350 px animated GIF, 308 KB, 20 frames
2.58 second loop: a ~750ms hold, then nine 60ms full-frame flashes — twice per loop
Content is "GET YOUR BEST PRICE" over "CLICK HERE" with a purple arrow
Live on roughly half our dealer accounts as the seeded default
The dealers who replaced it mostly uploaded homemade ezgif.com exports, which tells us the single default isn't doing its job
We'll send you the current file and screenshots of it in real dealer pages.
The catch — real render size
The source file is 1024 px wide, but it never paints at that size. Our widget caps it at max-height 200px, and on a typical vehicle card it lands around 350 px wide. So the current design is effectively a 1024px poster squeezed into a thumbnail. Your design must be built to be read at ~320–400 px wide first, and hold up as it scales up to ~590 px. Anything that only works at full size is a fail.
Deliverables
4–6 named design variants. Dealers pick one in our settings UI, so they need to feel like a family but read as genuinely different options — not recolors of each other.
Each variant delivered as a single self-contained animated SVG:
1024 x 350 viewBox (this is fixed — it must drop into the existing slot with no layout shift)
Animation is CSS keyframes inside the file. No SMIL, no JavaScript.
All text converted to outlines/paths. The asset is delivered through an tag, which cannot load webfonts. Live text will not render.
No external references at all — no linked fonts, images, or stylesheets. Raster content, if any, must be embedded as a data URI.
Under 60 KB gzipped, hard ceiling. Under 25 KB strongly preferred.
A static PNG fallback per variant at 2x, showing the resting frame.
Editable source files (Figma, Illustrator, or After Effects) with layers named and organized so we can produce further variants ourselves later.
A single, clearly-identified accent color per variant that we can find-and-replace in the SVG, so we can optionally match each dealer's brand color.
Animation requirements
Motion must read as movement — a sweep, a slide, a reveal, a subtle pulse. No full-frame flashing or hard on/off strobing. That's the main thing we're fixing.
Each file must contain a working @media (prefers-reduced-motion: reduce) { ... animation: none } block.
Because of that, every animation must begin and rest on a fully legible static state. If someone has reduced motion on, or the animation is blocked, or the page is printed, the frozen frame must still be a complete, readable CTA on its own. We will test this by rasterizing your file with animation disabled.
Loop should feel calm and repeatable, not frantic. Assume a shopper sees it for 30+ seconds while scrolling a listings page.
Design requirements
Must be legible on both a light and a dark vehicle card background. Please show every variant on both.
Must survive being one of several elements on a busy dealer page — it needs to draw the eye without looking like a spam ad.
Copy: you can keep, rework, or replace the current wording. The message is "click this to see the real price on this vehicle." Copy suggestions welcome.
No stock clipart, no gradients-for-the-sake-of-it, no drop shadows on text.
Process / milestones
Concepts — 3+ distinct directions as static comps, each shown at true render size (~350px wide) on both a light and a dark card. We pick one or two.
Motion — animate the chosen direction(s) as working SVG. One round of revisions.
Variant set — build out the full 4–6 variant family, plus fallbacks and sources.
Out of scope
Any work in our codebase, CMS, or CDN
Logo or full brand identity work
Video, HTML5 ad formats, or GIF output (we specifically do not want GIF)
To bid, please include
Portfolio links, specifically anything with animated SVG or small-format web banners. Please say plainly if you have not hand-authored animated SVG before — it's the core skill here and a beautiful After Effects reel that can't be delivered as a 25 KB SVG doesn't help us.
One sentence on how you'd approach the "must be readable at 350px" constraint.
Your timeline and your price for the three milestones above.
Copy-paste bids will be ignored. Please reference "350px" somewhere in your proposal so we know you read the brief.
Budget: [fill in] · Timeline: [fill in]
Skills tags: Graphic Design · Animation · SVG · Motion Graphics · Banner Design · Adobe Illustrator · After Effects · Web Design · Accessibility
We build ExpressCTA, a widget that car dealerships install on their website. It puts a "get your best price" call-to-action onto vehicle listing pages. We serve several hundred dealer sites in the US.
The job
One of our core assets is an animated banner we call "Blinky." It sits on the vehicle card and is usually the very first thing a shopper's eye lands on. It has never been redesigned and it looks it — it's a 2005-era flashing GIF. We want it reimagined as a small set of modern, lightweight, accessible animated banners.
This is a design + asset production job. You will not touch our codebase; we handle the integration. We need finished, production-ready files.
What exists today (so you know what you're replacing)
1024 x 350 px animated GIF, 308 KB, 20 frames
2.58 second loop: a ~750ms hold, then nine 60ms full-frame flashes — twice per loop
Content is "GET YOUR BEST PRICE" over "CLICK HERE" with a purple arrow
Live on roughly half our dealer accounts as the seeded default
The dealers who replaced it mostly uploaded homemade ezgif.com exports, which tells us the single default isn't doing its job
We'll send you the current file and screenshots of it in real dealer pages.
The catch — real render size
The source file is 1024 px wide, but it never paints at that size. Our widget caps it at max-height 200px, and on a typical vehicle card it lands around 350 px wide. So the current design is effectively a 1024px poster squeezed into a thumbnail. Your design must be built to be read at ~320–400 px wide first, and hold up as it scales up to ~590 px. Anything that only works at full size is a fail.
Deliverables
4–6 named design variants. Dealers pick one in our settings UI, so they need to feel like a family but read as genuinely different options — not recolors of each other.
Each variant delivered as a single self-contained animated SVG:
1024 x 350 viewBox (this is fixed — it must drop into the existing slot with no layout shift)
Animation is CSS keyframes inside the file. No SMIL, no JavaScript.
All text converted to outlines/paths. The asset is delivered through an tag, which cannot load webfonts. Live text will not render.
No external references at all — no linked fonts, images, or stylesheets. Raster content, if any, must be embedded as a data URI.
Under 60 KB gzipped, hard ceiling. Under 25 KB strongly preferred.
A static PNG fallback per variant at 2x, showing the resting frame.
Editable source files (Figma, Illustrator, or After Effects) with layers named and organized so we can produce further variants ourselves later.
A single, clearly-identified accent color per variant that we can find-and-replace in the SVG, so we can optionally match each dealer's brand color.
Animation requirements
Motion must read as movement — a sweep, a slide, a reveal, a subtle pulse. No full-frame flashing or hard on/off strobing. That's the main thing we're fixing.
Each file must contain a working @media (prefers-reduced-motion: reduce) { ... animation: none } block.
Because of that, every animation must begin and rest on a fully legible static state. If someone has reduced motion on, or the animation is blocked, or the page is printed, the frozen frame must still be a complete, readable CTA on its own. We will test this by rasterizing your file with animation disabled.
Loop should feel calm and repeatable, not frantic. Assume a shopper sees it for 30+ seconds while scrolling a listings page.
Design requirements
Must be legible on both a light and a dark vehicle card background. Please show every variant on both.
Must survive being one of several elements on a busy dealer page — it needs to draw the eye without looking like a spam ad.
Copy: you can keep, rework, or replace the current wording. The message is "click this to see the real price on this vehicle." Copy suggestions welcome.
No stock clipart, no gradients-for-the-sake-of-it, no drop shadows on text.
Process / milestones
Concepts — 3+ distinct directions as static comps, each shown at true render size (~350px wide) on both a light and a dark card. We pick one or two.
Motion — animate the chosen direction(s) as working SVG. One round of revisions.
Variant set — build out the full 4–6 variant family, plus fallbacks and sources.
Out of scope
Any work in our codebase, CMS, or CDN
Logo or full brand identity work
Video, HTML5 ad formats, or GIF output (we specifically do not want GIF)
To bid, please include
Portfolio links, specifically anything with animated SVG or small-format web banners. Please say plainly if you have not hand-authored animated SVG before — it's the core skill here and a beautiful After Effects reel that can't be delivered as a 25 KB SVG doesn't help us.
One sentence on how you'd approach the "must be readable at 350px" constraint.
Your timeline and your price for the three milestones above.
Copy-paste bids will be ignored. Please reference "350px" somewhere in your proposal so we know you read the brief.
Budget: [fill in] · Timeline: [fill in]
Skills tags: Graphic Design · Animation · SVG · Motion Graphics · Banner Design · Adobe Illustrator · After Effects · Web Design · Accessibility
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.