No code animations
product design — wix studio
In 2023, Wix Studio introduced a new animation system built around five core triggers — Entrance, Hover, Click, Scroll, and Loop — enabling creators to design expressive, high-impact motion without writing a single line of code. The system was crafted to support the full spectrum of users: from non-technical DIY creators to professional designers who expect precision, control, and visual consistency.
As the product designer, I drove the content-driven research that defined the behavior, logic, and aesthetic direction of each trigger. We mapped animation trends, identified user friction points, and translated complex motion principles into intuitive, accessible tools. Our goal: deliver a motion system that feels powerful yet approachable — supporting creativity without introducing unnecessary complexity.
Old animation panels
Hover presets and 'Custom mode'
Entrance animations
The problems
01 | Inconsistent animation experience
Inconsistent UI and control levels made animation triggers hard to understand and use.
02 | Misaligned customization levels
Presets were too limited for professionals, while the custom mode was too open-ended and unclear, even for advanced users.
03 | Missing triggers & behaviors
Key behaviors like loop and scroll were missing, limiting users’ ability to create modern, dynamic websites.
The Goals
-
Make animations easy to use, yet powerful enough for professionals.
-
Support a wide range of triggers - entrance, hover, click, scroll, loop - to match modern motion trends.
-
Create a unified, intuitive experience across all animation types.
The new animation system
Hypothesis
We believed that a unified, no-code animation system, with richer triggers and adjustable presets, would empower both professional designers and non-technical users to bring expressive motion to their websites effortlessly.
By making complex interactions accessible, we could unlock new levels of creativity and raise the visual bar across Wix Studio sites.
Solution highlights
01_new presets
We revamped the existing Entrance, Hover, and Click presets, and introduced two entirely new libraries- Loop and Scroll, grounded in extensive animation trend research. Usage data showed that 67% of animations were created using presets, confirming that this path was more engaging and approachable for most users. This insight guided our decision to invest in a richer, more flexible preset experience.
The result: a unified system of five distinct preset libraries, offering over 50 adjustable, ready-to-use animations.
ENTRANCE
Reveal
ENTRANCE
Bounce
ENTRANCE
Expand
ENTRANCE
Turn
ENTRANCE
Blur
ENTRANCE
Arc
ENTRANCE
Shape
ENTRANCE
Wink
ENTRANCE
Flap
Entrance preset librariy
LOOP
Breathe
LOOP
Pulse
LOOP
Jello
LOOP
Wiggle
LOOP
Bounce
LOOP
Swing
LOOP
Flip
LOOP
Rubber
LOOP
Flap
Loop preset librariy
SCROLL
Fade
SCROLL
Move
SCROLL
Slide
SCROLL
Shape
SCROLL
Flip
SCROLL
Reveal
SCROLL
3D spin
SCROLL
Expand
SCROLL
Blur
Scroll preset library
02_ADJUST PANEL
Designed a visual UI for properties like Easing, Direction, and Intensity- making abstract motion concepts tangible for users.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
03_INTENSITY ADJUSTMENTS
We transformed the vague concept of “animation power” into a structured, intuitive control that offers clarity and flexibility for all user levels.
LOOP
Rubber
LOOP
Rubber
SCROLL
Move to
SCROLL
Move from
04_SCROLL ADJUSTMENTS
We introduced two intuitive controls:
Animation type - animate from or to the designed state.
Animation area - define when the animation starts and ends while scrolling.
This gave users precise control over scroll timing and direction.
05_MultiPLE AnimationS
We enabled multiple animations on a single element- whether across different triggers or stacked within the same one. Some triggers, like Entrance, support only one animation. Others, like Hover, Click, and Scroll, are interaction-based and require a clear connection between the trigger and the animated element.
It was important to keep single animations simple, without adding unnecessary interaction complexity.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Singel animation
Interactions
06_THUMBNAILS visual language
I defined the visual language for the preset thumbnails—starting from abstract motion sketches and refining them with the illustrator and animator.
Flip
Cross
Spin
Jello
Rubber
Poke
Breathe
Flash
DVD
Bounce
Swing
Wiggle
Pulse
Flap
3D Spin
Turn
Shape
Reveal
Expland
Slide
Move
Expand
Flap
Shrink
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Thumbnails evolution
Research highlights
Trend-driven insights
A core part of my design process was grounded in deep visual research—mapping, analyzing, and extracting patterns from a wide range of animation references. I translated abstract visual styles and motion behaviors into concrete system definitions, interaction models, and UI controls.
This ability to turn visual content into structured, actionable insights helped shape a system that feels both trend-aware and functionally robust.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Entrance
Hover & Click
Scrub
Loop
Animation type on templates | competitors research
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·
Animation type | trend research from site inspire
The Impact
User Adoption
The new system delivered an immediate lift in the quality and consistency of motion across Wix Studio sites. Designers began producing more polished, expressive animations with noticeably less friction, and workflows that previously felt limited or unclear became significantly more streamlined. Adoption grew naturally as creators integrated the tools into their daily work, and the overall standard of motion design on the platform showed clear, noticeable improvement.
During the project, we also identified meaningful opportunities we hoped to pursue — including full timeline control for precise sequencing and themed animations tailored to different component types. These directions ultimately fell outside the initial scope, but they remain strong candidates for future evolution of the animation system.
