Frequently asked questions

Yes, Animation Tokens are planned (GitHub issue 5254). They will let you define reusable named animation groups (similar to Style Tokens) instead of manually copy/pasting animations between groups.

Yes, you can add Spline or any other 3D animations to Webstudio using HTML Embed. Use the same technique as background videos: create a container with position relative, then an inner div with position absolute, all sides set to 0, and z-index -1. Inside that inner div, place your Spline animation HTML embed code. This creates a full-background 3D animation effect.

Yes, you can create modern templates with animations and submit them to the Webstudio marketplace. If you create templates similar to Framer's modern designs with nice animations, contact the Webstudio team (ping Oleg in DM) for review and approval. This would help attract more users to Webstudio and expand the template library.

Yes, the Animation Engine works when self-hosted—use the latest version and reinstall deps. If they fail only on Docker: update images, run install, clear caches, ensure no CSP blocks animation scripts. If none run at all, verify OS/browser reduced-motion isn’t forcing a skip (see separate reduced-motion FAQ).

Currently manual: create a Stagger Animation container, copy over style tokens + advanced CSS from original element, then move children. Requested feature would add a context action to auto-wrap/preserve styles. Until then:

1. Duplicate the original element (backup)
2. Create the stagger container with identical layout props (flex/grid/etc.)
3. Move child elements into the stagger container
4. Reassign any animation subjects / triggers

This minimizes losing complex layout tokens.

Currently, there's no direct 'Replace With Stagger Animation' action in the context menu. When converting elements to stagger animations, you must manually copy all style tokens and advanced CSS from the original element to the stagger animation container. This is particularly tedious for flex or grid containers. This workflow improvement has been requested for future updates.

To update the Animation Engine on self-hosted Webstudio, you need to use the latest Webstudio version and run npm install to update all packages. The Animation Engine works fine on Webstudio-hosted sites and in the builder, but self-hosted containers may need updates to ensure animations work properly on the live site.

To create a looping marquee effect in Webstudio, you can use Animation Groups or HTML Embed with CSS animations. For Animation Groups, add your scroll items and set the animation to loop continuously. If using HTML Embed, you can create custom CSS keyframe animations for smooth looping. Note that you cannot directly link to SVG icons from Webstudio's media manager in HTML embeds, so you'll need to use external URLs or embed the SVG code directly. Community members often share working examples of marquee implementations that you can reference.

Currently, there's no 'Replace with Stagger Animation' action in the context menu.

When converting elements to stagger animations, you must manually copy all style tokens and advanced CSS from the original element to the stagger animation. This is particularly tedious for containers like flex elements or grids. This feature has been requested for the action menu.

If animations aren't working, try these troubleshooting steps:

1. Check if you're using the latest animation engine - older JavaScript-based animations may not work properly.
2. For self-hosted Docker containers, ensure you've updated to the latest Webstudio version and run 'npm install' to update all packages.
3. Verify your animations work in the Webstudio builder first.
4. Check if Safe Mode is enabled, which disables animations.
5. Make sure your trigger conditions are properly set up.

Often caused by OS/browser reduced-motion preference. Disable reduced motion in system accessibility settings if you expect animations.

If new animations aren't working in Webstudio, the most likely cause is having 'reduced motion' enabled in your operating system settings. Check your OS accessibility settings: on Windows, go to Accessibility > Visual Effects > Animations and make sure animations are enabled. On other systems, look for similar reduced motion or animation preferences in accessibility settings.

This usually happens when animations are accidentally disabled for specific breakpoints. Check the eye icon buttons in the animations list on the right panel - you may have turned off animations for desktop breakpoints while keeping them enabled for mobile. Also check if the animation subject is set correctly for each breakpoint.

For animations to work in self-hosted Docker deployments, ensure you're using the latest Webstudio version and run 'npm install' to update all packages after deployment. The Animation Engine should work in self-hosted setups, but version compatibility and missing dependencies can cause issues. If animations work in the cloud builder but not in your Docker container, it's likely a version or dependency issue.

Webstudio encourages community-created templates rather than building them internally. Modern templates with animations (similar to Framer Templates) would attract more users and are welcomed. If you create high-quality templates, you can submit them to the marketplace - contact the team via DM for review and approval. The focus is on empowering the community to build and share professional templates.

Yes, Animation Tokens (named animations) are planned for Webstudio (GitHub issue 5254). This will work similar to Style Tokens, allowing you to create standardized animation combinations that sync across a project. Currently, you need to copy animations from one Animation Group and paste them to other groups, which is inefficient for reusing the same animations multiple times.