How To Add Animations in Wix

You can add animations in Wix by selecting any element on your page, opening its settings panel, clicking "Animations and Effects," and choosing from entrance, hover, or click animation types. Each animation can be fine-tuned with controls for duration, delay, and direction, letting you match the motion to your site's style without writing any code.

Animations turn a static page into something visitors actually want to scroll through. A heading that fades in as someone scrolls down, a button that shifts color on hover, or an image that slides into view -- these small touches make your site feel polished and intentional. For richer dynamic content beyond animations, you can also add video to your Wix pages or even add a video background to a Wix section to create an even more engaging experience. Lightboxes are another option -- see our guide on what a lightbox is in Wix for pop-up content that appears over the page. But overdoing it can slow your site down and annoy visitors, so knowing which animations to use (and where to stop) matters just as much as knowing how to add them.

Step-by-Step Guide to Add Animations in Wix

The Wix Editor makes it simple to attach animations to any element on your page. You can animate text blocks, images, buttons, sections, groups, and stacks. The whole process takes under a minute per element once you know where to look.

Here is how to do it.

Step 1: Click the Relevant Element, Group, or Stack

Open the Wix Editor and click on the element you want to animate. This can be a single element like a heading or image, or a grouped set of elements. When you select it, a settings toolbar appears near the element. If you want multiple elements to animate together, group them first and then select the group.

Step 2: Select the "Animations and Effects" Section

Once the settings panel opens, look for the "Animations and Effects" option. Click it to open the animation picker. This section shows all available animation types for the selected element. Some elements support all three types (entrance, hover, click), while others may only support entrance animations.

Step 3: Select an Animation

Browse the available effects and pick one that fits your purpose. You will see options like Fade In, Float In, Slide In, Bounce, Spin, and more. Each animation shows a small preview when you hover over it. Click "Add" to apply it to your element.

Step 4: Customize the Animation Settings

After adding the animation, click "Adjust Animations" to fine-tune it. You can change the duration (how long the motion lasts), the delay (how long before it starts), and the direction (whether the element enters from the left, right, top, or bottom). Use the "Preview" button to watch the effect before publishing.

Animation Settings Explained

Understanding each setting gives you more control over how your animations look and feel. Here is what each one does:

• Duration: Controls how long the animation takes to complete, measured in seconds. Short durations (0.3-0.5 seconds) feel snappy. Longer ones (1-2 seconds) create a slower, more dramatic reveal. For most elements, 0.5 to 0.8 seconds works well.
• Delay: Sets the wait time before the animation starts after the trigger (scroll position, page load, or hover). Use delays to stagger multiple elements so they animate one after another instead of all at once.
• Direction: Determines where the element moves from. A heading might slide in from the left, while an image fades in from the bottom. Match the direction to your page's reading flow -- left-to-right for most Western audiences.
• Easing: Some animations include easing options that control acceleration. "Ease in" starts slow and speeds up. "Ease out" starts fast and slows down. "Ease in-out" does both, creating the most natural-looking motion.

A good rule of thumb: if you need to watch an animation twice to see what happened, it is too fast. If it makes you wait, it is too slow.

Types of Animations in Wix

Wix groups its animations into three categories, each triggered differently. Picking the right type depends on what you want visitors to notice and when.

Entrance Animations

Entrance animations play when an element first appears in the browser window, typically as a visitor scrolls down the page. Common entrance effects include Fade In, Float In, Slide In, Bounce, Fly In, Turn In, Arc In, and Spin In. These work best for headings, images, testimonial cards, and feature sections where you want to create a sense of progression as the visitor moves through your content.

The most popular choice is Fade In because it is subtle and works with almost any design. Float In (a combination of fade and slight upward movement) is another safe option. Save more dramatic effects like Bounce or Spin for elements that need extra attention, like a call-to-action or a special offer badge.

Hover Interactions

Hover animations trigger when a visitor moves their cursor over an element. These are best for interactive elements like buttons, image galleries, portfolio thumbnails, and navigation links. Common hover effects include color changes, slight scaling (making the element grow or shrink), shadow changes, and opacity shifts.

Hover effects give visitors feedback that an element is clickable or interactive. A button that slightly grows and darkens on hover feels more responsive than one that just sits there. Keep hover effects subtle -- a 5-10% scale change or a slight color shift is enough. Anything more dramatic can feel jarring.

Click Interactions

Click animations trigger when a visitor clicks or taps an element. These can include expanding an accordion section, changing an element's appearance, or triggering a transition to new content. Click interactions work well for FAQ sections, tabbed content, before-and-after reveals, and interactive product showcases.

Because click animations require active participation from the visitor, reserve them for elements where the interaction adds real value. A "Read More" section that expands on click is useful. A random animation that fires when someone clicks a heading is not.

Scroll Effects in Wix

Beyond element-level animations, Wix also offers scroll effects that apply to entire sections or strips of your page. These are different from entrance animations because they create continuous motion tied to the scroll position rather than a one-time trigger.

Available scroll effects include:

• Parallax: The background image moves at a different speed than the foreground content, creating a sense of depth. This is the most widely used scroll effect and looks great on hero sections and full-width image strips.
• Reveal: Content appears to slide out from behind the section above it, like pulling back a curtain.
• Fade In: The section gradually becomes visible as the visitor scrolls into it.
• Zoom In: The section or its background image scales up slightly as the visitor scrolls through it.

To add scroll effects, click on a strip or section, open the section settings, and look for "Scroll Effects." These effects work independently of element-level animations, so you can combine a parallax background with entrance animations on the elements inside that section.

How to Add Animations in Wix Studio (Interactions Panel)

Wix Studio uses a completely different animation system from the classic Wix Editor. Instead of "Animations and Effects" in the element settings panel, Wix Studio has a dedicated Interactions panel that gives you much more precise control over when and how animations fire.

Here is how animations work in Wix Studio specifically:

Opening the Interactions Panel

Select any element on your Wix Studio canvas. In the right-side properties panel, look for the Interactions tab (it may appear as a lightning bolt icon). Click it to open the interactions builder. This is where you define triggers and effects for that element.

Setting Up a Trigger

In Wix Studio, every animation starts with a trigger. Available triggers include:

• Viewport Enter: The animation fires when the element scrolls into view. This is equivalent to entrance animations in the classic editor.
• Hover: The animation fires when a visitor's cursor enters the element's bounding box.
• Click: The animation fires on a mouse click or tap event.
• Page Load: The animation fires immediately when the page finishes loading, before any scrolling.
• Scroll Position: Available in advanced mode, this ties the animation's progress directly to how far the visitor has scrolled, creating scrub animations.

Choosing Effects in Wix Studio

After selecting a trigger, you choose one or more effects to apply. Wix Studio supports the same effect types as the classic editor (Fade, Slide, Scale, Rotate), but you can chain multiple effects on a single element and control them independently. For example, you can set a card to fade in and slide up simultaneously, with the fade taking 0.4 seconds and the slide taking 0.6 seconds.

The Key Difference: Multi-Step Interactions

The biggest advantage of Wix Studio's Interactions panel over the classic editor's animation system is the ability to define "on" and "off" states. For hover interactions, you can specify what happens when the cursor enters the element AND what happens when it leaves. This lets you create smooth two-way transitions that feel polished on both hover-in and hover-out, which is not possible with the classic editor's hover effects alone.

Scrub Animations (Advanced)

Wix Studio also supports scrub animations, where the animation's progress is controlled by scroll position rather than a single trigger event. This lets you create effects like a progress bar that fills as the visitor scrolls down, or an image that rotates continuously as the page moves. Access scrub animations by selecting "Scroll Position" as the trigger and linking the effect's completion to a specific scroll percentage or pixel offset.

How to Copy Animations to Multiple Elements

Wix doesn't have a direct "copy animation to all elements" button, but you can achieve consistent animation styles across your page with a few techniques.

• Copy and paste elements: If you've set up an element with the exact animation you want, duplicate it (Ctrl/Cmd + D or right-click > Duplicate) and then replace the content inside. The animation settings carry over with the duplicate.
• Group elements before animating: If you want the same entrance animation on a set of cards or feature boxes, group them first (Ctrl/Cmd + G), then apply the animation to the group. All elements inside will animate together as a unit.
• Apply animations section by section: Rather than trying to synchronize individual element animations, apply the same effect to each element in a section separately, using matching duration and easing settings. Stagger the delay by 0.1-0.2 seconds per element to create a smooth cascade effect.

Best Animations for Different Elements

Not every animation suits every element. Here are practical recommendations based on what works for each type:

• Text blocks and headings: Fade In or Float In. Avoid Spin or Bounce on text -- it makes content harder to read as it moves.
• Images and galleries: Fade In, Slide In, or Float In. These let visitors focus on the image itself rather than the motion.
• Buttons and CTAs: Subtle hover effects (slight scale increase, color darkening) combined with a simple entrance animation like Fade In.
• Full-width sections: Parallax scroll effect on the background with Fade In on the content inside.
• Cards and feature boxes: Float In with staggered delays so each card appears one after another from left to right.
• Icons and small graphics: Fly In or Spin can work here since the elements are small enough that dramatic motion does not overwhelm the page.

Mobile Animation Behavior

Wix automatically adjusts certain animations for mobile devices, but there are things you should know before assuming your desktop animations will translate perfectly.

Hover effects do not work on touchscreen devices since there is no cursor to hover with. Wix typically converts hover effects to tap interactions on mobile, but the behavior is not always identical. Parallax scroll effects may be disabled or simplified on mobile browsers to maintain performance. Entrance animations generally work the same way on mobile, though you should check that elements are not animating off-screen on smaller viewports.

Always preview your animations using the mobile view in the Wix Editor before publishing. Switch to mobile view using the device toggle at the top of the editor, and scroll through your entire page to confirm every animation plays correctly.

Wix Animations and Accessibility: What You Need to Know

Animations that look great to most visitors can cause real problems for people with vestibular disorders, epilepsy, or motion sensitivity. Rapidly moving or flashing content can trigger nausea, dizziness, and in severe cases, seizures. This is not a hypothetical edge case -- the World Health Organization estimates that motion sensitivity affects roughly 35% of adults over 40 to some degree.

The web accessibility standard WCAG 2.3.3 (level AAA) states that users should be able to stop all motion that plays for more than five seconds. More practically, the CSS media query prefers-reduced-motion lets browsers tell websites when a visitor has enabled the "Reduce Motion" accessibility setting on their device (available in macOS, iOS, Windows, and Android).

What prefers-reduced-motion Does

When a visitor has enabled reduced-motion on their operating system, their browser sends a signal: "this person prefers less movement." Well-coded sites respond by disabling or toning down animations. Wix's built-in animation system does not automatically respond to this setting, which means your animations will play regardless of the visitor's accessibility preferences unless you take additional steps.

How to Respect Motion Preferences in Wix

The most practical approach in standard Wix is to keep animations short (under 0.5 seconds) and avoid looping, flashing, or continuous-motion effects. These are the categories most likely to cause problems for sensitive visitors.

If you are using Wix Studio with Wix Velo (Wix's JavaScript framework), you can add code to your page's masterPage.js file that checks the visitor's motion preference and disables animations accordingly:

import wixWindow from 'wix-window';

$w.onReady(function () {
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (prefersReduced) {
    // Remove animation classes or set element opacity directly
    $w('#animatedSection').style.opacity = '1';
  }
});

For most Wix users without Velo, the key practical rules are: no looping animations, no flashing effects, keep entrance animations under 0.5 seconds, and never animate your primary content or navigation elements in ways that could disorient visitors.

Animations That Are Always High-Risk

• Flashing or strobing effects: Any animation that flashes more than three times per second can trigger photosensitive epilepsy. Wix's built-in animations do not include flash effects, but custom HTML embeds could introduce them.
• Continuous looping motion: A background element that loops indefinitely (like a spinning icon or scrolling ticker) forces the visitor's brain to process constant movement even when they are trying to read content. Use loop animations only when they are off-screen or on very small, peripheral elements.
• Large-scale parallax on hero sections: Full-width background parallax on the main hero section can cause vertigo in sensitive visitors because it creates a disconnect between what they see and what their body expects from the scroll.

Animations and Core Web Vitals: What You Need to Know

If you care about page performance scores (Google PageSpeed Insights or Core Web Vitals), you may wonder whether Wix animations affect your LCP (Largest Contentful Paint) or CLS (Cumulative Layout Shift) scores.

Here is what actually matters:

• Entrance animations can cause CLS issues if not implemented carefully. If a large element (like a hero image or heading) animates in after the page loads, it can shift other content as it appears. Google measures this as Cumulative Layout Shift and penalizes it in Core Web Vitals. Wix handles most animations in a way that reserves space for the element before it animates, which reduces CLS, but this isn't guaranteed for all animation types.
• Animations themselves don't hurt LCP directly. LCP measures how long it takes for the largest visible element to render. If your LCP element (usually the hero image) has an entrance animation, the animation might visually delay when it appears, which could be interpreted as a slower LCP by some measurement tools.
• The real performance risk is stacking too many animations. Each animation adds JavaScript execution overhead. On low-end devices, many simultaneous animations can cause layout thrashing, which hurts all performance metrics and makes the site feel sluggish.

Practical guidance: limit animations to 3-5 per visible screen area, avoid animating your LCP element (let it render immediately), and test your page in Google PageSpeed Insights after adding animations to check for any CLS issues.

Wix Animations Not Working: Troubleshooting Guide

If your Wix animations aren't showing up or behaving correctly, these are the most common causes and how to fix them.

Animations Not Showing in the Editor Preview

The Wix Editor doesn't always play animations during editing mode. Use the "Preview" button (the play icon in the top right of the editor) to see animations as visitors will. Never judge animation behavior from within editing mode alone.

Entrance Animations Not Triggering on Scroll

If an element's entrance animation isn't firing when you scroll to it on the live site, check two things: First, confirm the element is set to "entrance" animation and not a different trigger type. Second, check if the element is positioned above the fold on your screen -- entrance animations don't replay once they've fired, and on large monitors, some elements may load already in view, preventing the scroll trigger from activating. Try increasing the page length or repositioning elements further down the page.

Animations Showing on Desktop but Not Mobile

Some animation types, particularly parallax scroll effects, are automatically disabled on mobile by Wix for performance reasons. Hover interactions are also converted or disabled on touchscreen devices. Check the mobile preview in the editor specifically, not just the desktop view, to see what mobile visitors will experience.

Animation Removed After Saving or Publishing

If an animation disappears after you save or publish, it may have been accidentally removed during an edit to that element. Try re-adding it. If the issue persists consistently on a specific element type, it may be a known Wix bug -- check the Wix Community forums for that element type and animation combination to see if others have reported the same behavior.

Multiple Animations Playing at the Same Time on Scroll

If you have many animated elements in a section and they all trigger simultaneously when you scroll to that section, it can feel chaotic rather than polished. Use the "Delay" setting on each element to stagger them by 0.1-0.2 seconds each. The first element should have 0 delay, the second 0.1 seconds, the third 0.2 seconds, and so on. This creates a smooth cascade effect instead of everything appearing at once.

Hover Animations Affecting Page Layout

If a hover animation (like scaling an element up) causes other elements to shift or jump, it's usually because the element isn't set to overflow its bounds correctly. In the Wix Editor, make sure the element has enough surrounding space to scale into without affecting neighboring elements. Adding a small margin around the element often resolves this.

Performance Tips for Wix Animations

Animations are rendered by the visitor's browser, which means each one adds a small amount of processing work. A few well-placed animations will not hurt your site speed, but stacking too many can cause noticeable lag, especially on older devices or slower connections.

Follow these guidelines to keep your site fast:

• Limit animations to 3-5 per visible screen area. If a visitor can see eight different things animating at once, nothing stands out and the browser may stutter.
• Avoid animating large background images. Moving or scaling a full-width high-resolution image is one of the most resource-heavy operations a browser can perform.
• Keep durations short. Animations that last longer than 1 second keep the browser working longer. Most effects look best at 0.4-0.7 seconds.
• Skip animations on elements below the fold if page speed is a priority. Entrance animations only fire when the element scrolls into view, so they do not affect initial load time, but they do add to overall page weight.
• Test on a real phone. The Wix Editor's mobile preview is helpful, but nothing replaces checking your live site on an actual mobile device to feel the real performance.

Design Guidelines: When Animations Help and When They Hurt

Animations should serve a purpose. Before adding one, ask yourself: does this help the visitor understand, find, or do something? If the answer is no, skip it.

Animations help when they:

• Guide the visitor's eye to important content (like a CTA or key selling point)
• Show that an element is interactive (hover feedback on buttons and links)
• Create a sense of progression as visitors scroll through a long page
• Add polish to a portfolio or creative site where visual flair matches the brand

Animations hurt when they:

• Delay the visitor from reading content they came for
• Play on every single element, creating visual chaos
• Distract from the main message or call to action
• Make the site feel slow on mobile devices

A good test: if you can remove an animation and the page still works just as well, you probably do not need it. The best animated sites are ones where you barely notice the animations -- they just make everything feel a little smoother.

If you are looking for broader guidance on putting your site together, our guide on how to design a website with Wix covers layout, color, and structure decisions that pair well with animation choices.