Free Animated QR Code Generator
Create animated QR codes that move and still scan. A feature most generators do not offer. Free, no signup.
Create Animated QR Code → Create animated QR codes that move and still scan. A feature most generators do not offer. Free, no signup.
Create Animated QR Code →
These QR codes are animated live in your browser using the
<qr-animate> embed widget.
An animated QR code is a QR code that moves. The modules shift, rotate, pulse, or morph in a continuous loop — yet at every point in the animation, the code remains fully scannable. Point your phone camera at it, and it reads the data just like a static code.
This is not a gimmick trick where a GIF flashes between frames. The animation is built into the QR code’s visual style. The underlying data grid stays fixed. What changes are the style parameters — module size, rotation, position offset, color, opacity. These parameters are interpolated smoothly over time, creating fluid motion while preserving the code’s scannability at every single frame.
Most QR code generators do not even attempt this. The rendering complexity is significant — every frame needs to be validated as a scannable code, and the style parameter ranges must stay within bounds that maintain readability. Our generator handles all of this, and offers it for free.
Traditional QR codes are static images. Each module (the small dark squares) is placed on a fixed grid. The scanner reads the pattern, decodes the data, and you get your URL, text, or WiFi credentials.
An animated QR code adds a time dimension. Instead of fixed style parameters, the parameters follow curves over time:
Module rotation cycles smoothly from 0 to 360 degrees, or oscillates between two angles. Each module rotates individually, creating a ripple or wave effect across the grid.
Module size pulses gently — modules grow and shrink in a breathing pattern. As long as the size stays within scannable bounds, the code works throughout the entire pulse cycle.
Position offset shifts modules slightly from their grid positions. A wave function applied across the grid creates the illusion of the code rippling like water or waving like fabric.
Color transitions between two or more colors over time. Modules can cycle through hues, alternate between complementary colors, or fade between a brand’s primary and secondary palette.
Opacity can oscillate to create a pulsing glow effect, or modules can fade in and out in sequence to draw the eye across the code.
All these transformations are described as CSS animations on SVG elements. There is no frame-by-frame raster rendering. The animation is smooth, resolution-independent, and lightweight. A typical animated QR code SVG file is under 100KB.
In a world saturated with static visual content, motion captures attention. This is well-established in advertising psychology — the human eye is drawn to movement. A poster on a wall gets glanced at. A screen with moving content gets watched.
Animated QR codes exploit this principle directly. On a digital screen surrounded by static content, a moving QR code pulls attention. On a website, it breaks the scroll-and-skim pattern. In a presentation, it draws the audience’s eyes to exactly where you want them — the code that links to your call-to-action.
The effect is particularly strong because people do not expect QR codes to move. The surprise of seeing familiar square modules shifting and rotating creates a moment of curiosity — and curiosity drives scans.
Retail stores, airports, hotels, and public spaces use digital screens for information and advertising. An animated QR code on a digital sign draws more scans than a static one. The motion catches the eye of passersby who would otherwise walk past. Use cases include promotional offers, wayfinding information, menu boards, and event schedules.
Trade show floors are visually overwhelming. Every booth competes for attention. An animated QR code on your display screen or digital banner differentiates your booth from neighbors using static materials. Link the code to your product demo, brochure, or lead capture form.
When you show a QR code during a talk and say “scan this for the slides,” half the audience fumbles with their phones before the slide changes. An animated QR code holds on screen longer because it is visually interesting, giving everyone time to scan. The motion also serves as a visual cue that says “this is interactive, scan me.”
Embedding an animated QR code on a webpage — particularly a landing page designed to bridge desktop and mobile — creates an engaging call-to-action. The animation draws the eye and encourages visitors to pull out their phone and scan, completing a cross-device handoff.
In video content for Instagram Reels, TikTok, or YouTube Shorts, an animated QR code feels native to the medium. A static code in a video looks like a frozen overlay. An animated code moves with the energy of the content, making it feel intentional rather than grafted on.
QR codes on TV commercials and live broadcasts have become common. Animated codes perform better because they look like part of the broadcast design language rather than a static graphic inserted in post-production. The motion signals interactivity and invites action.
Self-service kiosks in restaurants, museums, and retail environments can use animated QR codes to draw users into specific actions — downloading an app, accessing additional content, or joining a loyalty program. The animation signals that the code is an active element, not a decorative label.
The designer includes ready-made animation presets that work well across different contexts:
Breathe. Modules gently pulse in size, creating a calm, organic breathing effect. Subtle enough for professional contexts, eye-catching enough to draw attention.
Wave. A sine wave ripples across the grid, displacing modules in sequence. Creates a sense of flowing movement reminiscent of water or fabric.
Spin. Modules rotate continuously, either all in the same direction or in alternating directions for a kaleidoscopic effect. Works well with geometric styles like Diamond and Hexagon.
Color shift. Module colors transition smoothly between two or more hues. The structure stays static while the color moves, creating a chromatic effect that works especially well on dark backgrounds.
Cascade. Modules animate in sequence from one corner to the opposite, creating a waterfall or domino effect. Strong visual direction that guides the eye across the code.
Each preset has adjustable parameters — speed, intensity, direction — so you can dial in the exact level of motion for your context.
Digital only. This should be obvious, but animated QR codes only work on screens. Paper does not move. If you need a code for print, use the same design in static mode — all styles and colors transfer directly, only the animation is removed.
Screen refresh rate. The animation assumes a standard 60fps display. On very old or low-refresh screens, the animation may appear choppy. This does not affect scannability — even a frozen frame is a valid QR code.
Scanning speed. Some older QR code scanner apps may take slightly longer to lock onto an animated code compared to a static one. Modern phone cameras (iOS 11+ and Android 8+) handle animated codes without issues.
File size. Animated SVG files are larger than static ones — typically 50-100KB versus 5-20KB for static. This is still far smaller than equivalent video files or animated GIFs, and negligible for most use cases.
Accessibility. Some users are sensitive to motion. When embedding animated QR codes on websites, consider wrapping them in a prefers-reduced-motion media query that falls back to the static version. The designer can export both the animated and static versions so you have both available.
Building a QR code animation system requires solving a problem that most generators do not even recognize: ensuring continuous scannability across all animation states. A module that rotates 45 degrees takes up a different visual footprint than one at 0 degrees. A module that shrinks to 60% of its original size changes the contrast pattern the scanner reads.
Our rendering engine validates parameter ranges before animation begins. It calculates the worst-case scannability across the full animation cycle — not just the starting frame — and warns you if any parameter combination might cause scanning failures. This means you can experiment freely with animation settings, confident that the result will work.
Found this useful?
Share it with someone who needs it.
Yes, completely free. Animation mode, all presets, and all export options are available without signup or payment.
Yes. Every frame of the animation is a valid, scannable QR code. The animation interpolates style parameters — not the data modules themselves — so the code remains readable throughout the entire animation cycle.
No. Animation requires a screen. For print materials, use a static QR code instead — you can still use all the same styles and colors, just without the motion.
Animated QR codes are exported as SVG with CSS animations or as video files. They are not GIFs — the animation uses smooth vector rendering rather than a sequence of raster frames.
Animated QR code generation is technically complex. Each frame must remain scannable while the visual style changes over time. Most generators treat QR codes as static images and lack the rendering pipeline to produce frame-by-frame validated animations.
Anywhere a screen is involved — digital signage, presentations, websites, social media videos, trade show displays, kiosks, and TV broadcasts. They draw attention in environments where static images are easily ignored.
45+ artistic styles, free SVG export, no signup needed.
Create Animated QR Code →