Guides · · Maxwell Prehoda
13 Ecommerce Animation Examples That Help People Buy (Not Just Look Nice)
Store animation earns its place in four moments: confirming that something was added to the cart, showing a product up close, making the jump from grid to product page feel instant, and celebrating a finished order. Everything else is decoration, and decoration on a store costs sales if it slows the page.
This list is built around those moments. The strongest entries come from code you can read, including Shopify's own Horizon theme, plus a documented retailer case study and the open source libraries stores actually use. Each says what it is best for and what to watch, and our pure CSS versions of the patterns play live so you can copy them.
1. Shopify Horizon's fly-to-cart: Best for confirming add to cart without opening a drawer
Platform: Shopify theme (Liquid, web components, CSS)
Horizon, which Shopify calls the flagship of its new generation of first-party themes, ships a fly-to-cart element. When you add a product, a small copy of its image flies from the product to the header cart icon in 0.6 seconds, shrinking to 25% and rounding into a circle as it lands. The header cart bubble then animates its new count.
The arc is a neat CSS trick worth studying: three separate keyframes for x, y and scale, combined with animation-composition: accumulate, each with its own cubic-bezier. Because horizontal and vertical motion ease differently, the straight-line keyframes trace a curve. The element measures source and destination with an IntersectionObserver, then removes itself when its animations finish.
Our Add to Cart Icon Hover below shows the landing side in pure CSS: a parcel drops into the cart and the cart rocks under its weight.
Watch out for: Horizon's license only allows using its code to build themes for Shopify stores. Learn from the technique, but write your own version for any other platform.
2. Shopify Horizon's page transitions: Best for multi-page stores that want app-like navigation safely
Platform: Cross-document View Transitions
Horizon opts into cross-document view transitions, so moving from a product card to the product page can animate across a real page load. What makes it a model is the list of times it refuses to animate: under prefers-reduced-motion, on low-power devices (2 or fewer CPU cores, or 2 GB or less of device memory), on the first page of a visit and on reloads.
It also cancels the transition the moment the shopper presses a key or the pointer, to protect Interaction to Next Paint, and caps the render-blocking wait so first paint still aims for under 1.8 seconds. A comment dated June 2026 explains that it disables transitions entirely inside in-app browsers like Instagram, TikTok and Facebook, after testing showed some Android WebViews could freeze or white-screen during them.
Read the file before you add view transitions to your own store. Most of it is safeguards, and that is the lesson.
Watch out for: Social traffic arrives in in-app browsers. If you build this yourself, test in Instagram and TikTok on Android, not just Chrome.
3. Nykaa's grid-to-product transitions: Best for fashion and beauty stores with image-led browsing
Platform: View Transitions API
Chrome's view transitions case studies include Nykaa, the Indian fashion and beauty retailer. It added transitions between the product detail page and the product listing page, plus a slide animation for a side drawer. Nykaa's head of apps, Sunit Jindal, described the main benefit as "perception of speed".
That is the honest case for store transitions. They do not make pages load faster; they make the jump feel continuous, so the product image a shopper tapped seems to carry over to the next page instead of everything blinking.
The same write-up covers redBus, which paired transitions with responsiveness work and reported 7% more sales, a reminder that motion and speed fixes usually ship together.
Watch out for: The case study gives no numeric result for Nykaa. Measure your own conversion and Interaction to Next Paint before and after, rather than assuming a lift.
4. Shopify's theme Animations settings: Best for merchants who want motion without touching code
Platform: Shopify theme editor
Stoneware mug
$28
Shopify's theme settings documentation lists an Animations section with two controls: Reveal sections on scroll, and a Hover effect with Vertical lift and 3D lift options. For many merchants that is all the motion a store needs, and it ships without a single custom line of code.
The reasoning behind the restraint is in Shopify's reference theme principles: "Functionality and design defaults to 'no' until it meets this requirement" of being lean, fast and reliable. Dawn's repo runs Lighthouse audits on the home, product and collection pages so added code does not slow the storefront.
Our Product Card Add to Cart Hover below is a pure CSS take on a lifted product card, with an Add to cart button that slides up from the photo. It also opens on focus, not only hover.
Watch out for: Scroll reveals hide content until it animates in. Keep them short and subtle on product grids, or shoppers scrolling fast see empty space.
6. Drift image zoom: Best for hover zoom on detailed product photos
Platform: JavaScript library, no dependencies, BSD-2
Weekend in Lisbon
Three days of tiles, tarts and trams.
Drift adds zoom on hover to images with no dependencies. You give the image a data-zoom attribute pointing at a high-resolution version, and it shows a magnified pane (zoomFactor 3 by default) beside the image, or inline on narrow screens below a breakpoint you set with inlinePane.
Its touch handling is the reason to pick it over a quick CSS scale: a touchDelay option lets shoppers scroll past the image without triggering zoom, a common annoyance with mobile product zoom.
Our Image Zoom Card below is the CSS-only version, an image that scales inside a clipped frame, fine for grids but not for inspecting fabric.
Watch out for: The repo moved from imgix to strawdynamics and its activity is hard to judge. Pin a version, and check that the high-resolution images are not downloaded until someone hovers.
7. Embla Carousel for product galleries: Best for swipeable product image galleries
Platform: JavaScript library, MIT, React/Vue/Svelte/Solid
Most product pages need a gallery that swipes well on phones, and Embla is a popular choice: a lightweight carousel built around fluid motion and precise swipe handling, with guides for React, Vue, Svelte and Solid as well as plain JavaScript.
Its plugins cover the store cases: Autoplay, Fade for a crossfading hero, Auto Height for mixed image ratios, Wheel Gestures for trackpads, Class Names for styling the active slide, plus Accessibility and SSR plugins.
The motion comes from your swipe, not from a timer, which is exactly how a product gallery should feel.
Watch out for: Autoplaying product galleries move the image a shopper is looking at. Leave autoplay off on product pages and use it, if at all, only for promotional banners.
8. canvas-confetti for order confirmation: Best for celebrating a completed order
Platform: JavaScript library, ISC
The thank-you page is the one place in a store where a burst of celebration fits. canvas-confetti draws it on a canvas with one function call, with options for particleCount (50 by default), spread (45 degrees), and origin, so you can fire it from the order total or the success checkmark. It can also use custom shapes from SVG paths or emoji.
It has a built-in accessibility switch, disableForReducedMotion, which, in the README's words, "disables confetti entirely for users that prefer reduced motion". Turn it on.
Pair it with a clear order number and next steps, since the confetti is the reward and the details are the reason people stay on the page.
Watch out for: Fire it once per order, not on every visit to the confirmation page or account area, or it turns from celebration into noise.
9. NN/g on the role of animation in UX: Best for checking your store's motion is not a dark pattern
Platform: Research article, Nielsen Norman Group
Page Laubheimer's 2020 article names the four jobs motion does in an interface: feedback that an action registered, state change such as loading, navigation metaphors like a slide-over to move forward through checkout, and signifiers that hint how something can be dismissed. Its core rule: "Animation in UX must be unobtrusive, brief, and subtle."
It also says plainly that using motion to create urgency or fear of loss is a dark pattern. On a store, that means flashing countdown timers, pulsing "only 2 left" badges and shaking buy buttons.
Use the four jobs as a checklist. If a store animation does not do one of them, it is decoration and should be cut first when the page is slow.
Watch out for: Urgency animations can raise short-term clicks while costing trust and repeat purchases. If a timer is real, show it plainly without pulsing or shaking.
12. Our Product Grid Skeleton: Best for collection pages that load products client-side
Platform: Motions directory, free, HTML + CSS Ours
Three product cards with image, title, price and cart button placeholders. One mask gradient on the wrapper sweeps a single bright wave across all of them, so the shimmer looks like one light passing over the grid instead of every card blinking on its own.
Use it when filters or infinite scroll fetch products after the page loads. There is a Product Page Skeleton for detail pages, and more in the skeleton loaders collection.
Watch out for: Match the skeleton to the real layout. If the loaded grid has different card heights, the page jumps when products arrive and the skeleton has made things worse.
13. Our shopping agent checkout pause: Best for stores adding an AI shopping assistant
Platform: Motions directory, free, HTML + CSS Ours
- Trail running shoes, size 10$129.00
- Merino socks, 3 pack$36.00
- Shipping, 2 day$9.95
- Tax$14.06
Total
As AI assistants start building carts, the important moment is the one where the agent stops and asks. This snippet shows a shopping agent adding an order line by line while the total rolls up, then pausing short of paying for the shopper to confirm.
It is a pattern worth stealing for any agentic checkout: motion shows the work, the stop is unmistakable, and the human makes the final click. More agent states live in our AI animations directory.
Watch out for: Never let the animation imply a purchase happened before the shopper confirms. The paused state must look clearly unfinished.
How to choose ecommerce animations
Spend motion where it removes doubt.
Match it to the shopping moment
Add to cart needs confirmation: a fly-to-cart like Horizon's or a bubble count change. Product inspection needs zoom and a swipeable gallery. Grid to product page can use a view transition. Order complete can celebrate. Browsing itself, the grid and filters, should be calm and fast.
Match it to your platform
On Shopify, start with the theme's built-in Animations settings and only then add custom code. On a headless or custom stack, CSS covers hovers, swatches and buttons; libraries like Embla and Drift cover galleries and zoom; view transitions cover navigation. Do not add a JavaScript animation library for things CSS already does.
Match it to your slowest shopper
Copy Horizon's safeguards: skip motion under prefers-reduced-motion and on low-power devices, cancel transitions on input, and test inside Instagram and TikTok's in-app browsers. Then apply NN/g's test: if an animation is not feedback, state, navigation or a signifier, cut it.
Fix your add-to-cart moment first
If you only animate one thing this week, make it the add-to-cart confirmation. Shoppers who are not sure the click worked add twice, or leave. A 600 ms fly-to-cart or a cart count that pops is enough.
Copy a pure CSS version from our buttons and hover effects, or describe your product card and get the motion back as CSS you can drop into your theme.
Make an add-to-cart confirmation for a product card, pure CSS plus a class toggle. When the button gets the .added class, a small circle copy of the product image arcs up and right toward the header cart in 600 ms, shrinking to 25 percent; x and y use different cubic-bezier curves so the path curves. Then the cart count pops from 1 to 1.2 scale and back in 200 ms. The button label changes to Added and is announced to screen readers. Under prefers-reduced-motion, skip the flight and only update the count.
Common questions
What animations should an ecommerce site have?
Clear add-to-cart feedback, product image zoom and a swipeable gallery, responsive hover and focus states on product cards, fast variant pickers, and a small celebration on order confirmation. Page transitions between grid and product page are a nice extra when done with safeguards.
Do animations slow down online stores?
They can. CSS on transform and opacity is cheap; large libraries, autoplaying video and long scroll reveals are not. Shopify's reference theme runs Lighthouse checks on key pages, and Horizon skips page transitions on low-power devices. Measure before and after.
How does a fly-to-cart animation work?
Measure the product image and the cart icon, place a small copy of the image at the start, then animate it to the cart. Shopify's Horizon uses three keyframes for x, y and scale with animation-composition: accumulate and different easings for x and y, which bends the path into an arc.
Are page transitions worth it on a store?
They improve perceived speed when the tapped product image carries over to the next page, as in Nykaa's case study. Add them with care: skip them for reduced motion and weak devices, cancel them on input, and test inside social in-app browsers.
Is a countdown timer animation a dark pattern?
Nielsen Norman Group calls motion that creates urgency or fear of loss a dark pattern. A real deadline can be shown plainly; flashing or pulsing timers and fake scarcity badges are the problem.
Sources
- Shopify Horizon theme on GitHub
- Horizon fly-to-cart styles
- Horizon view-transitions.js
- Chrome for Developers: view transitions case studies
- Shopify Help Center: theme settings
- Shopify Dawn on GitHub
- Colorlib: SVG animation examples
- Drift on GitHub
- Embla Carousel
- canvas-confetti on GitHub
- NN/g: The Role of Animation and Motion in UX