Bounce and Elastic Motion Without the Keyframe Grind
SVG assets are a staple of modern web design, valued for their sharp rendering and small file size. But static vectors only reach their full potential in motion. Elastic and bounce effects, in particular, add a tactile, physical quality to interfaces that users notice. The catch has always been the effort involved: hand-tuning CSS keyframes or wrestling with JavaScript animation libraries to produce a convincing spring or rebound is slow, error-prone work. Expressive Animator aims to change that by baking these effects directly into its easing system, so a lively animation can be produced in seconds.
The core idea is simple. In Expressive Animator, elastic and bounce are not separate animation types you have to construct; they are built-in easing functions. That means you only need a start keyframe and an end keyframe. The software computes the springy or rebounding motion between them automatically, and the same easing can be applied to any animatable property — position, scale, rotation, opacity, or morph.
Building an Elastic String-and-Ball Setup
To see how this works in practice, start a new project with Ctrl/Cmd + P. Set the frame size to 1080×1080, the duration to 00:01:30, and keep the frame rate at the default 60 fps.
Create the artwork with the Pen and Ellipse tools, or paste in ready-made assets. With snapping and auto-record enabled, move the playhead to 01:00f. Snapping will align nodes precisely as you work, and auto-record will log every change as a keyframe on the timeline.
See the Pen [Effects With Expressive Animator - Artwork for Animation](https://codepen.io/smashingmag/pen/pvjmwxv).
Switch to the Node tool with the A key. Select the string object and drag its handle to the center-right point of the artboard; snapping takes care of exact placement. This bends the shape and generates keyframes for the morph animator.
Press V for the Selection tool, choose the ball, and move it to the middle of the string. Again, snapping handles the positioning and auto-record creates the keyframes. After replaying, you may notice the objects move in the wrong direction. Select all the keyframes in the timeline, right-click, and choose Reverse to fix the motion path.
Applying the Elastic Easing
With the motion set, select every keyframe in the timeline and click the Custom easing button. In the dialog, pick Elastic and set oscillations to 4 and stiffness to 2.5. Close the dialog and replay — the springy motion is now applied without any manual easing curve editing.
The result can be exported with Cmd/Ctrl + E. Available formats include vector outputs like SVG and Lottie, plus rasterized GIF and video. For SVG, you can choose the animation technology: SMIL, CSS, or JavaScript.
For this example, SMIL is a sound pick because of its broad browser support, including Safari. SMIL-based SVG files can also sit in an <img> tag or function as background images, which makes them flexible for deployment.
See the Pen [Expressive Animator - Exported SVG](https://codepen.io/smashingmag/pen/GgpaEyG).
Bounce Easing and Beyond
Bounce effects work the same way — they are another out-of-the-box easing option, applicable to any property for quick, realistic rebound motion. Expressive Animator also includes other easing presets, such as Back, Steps, and Sinc, that can give animations distinct personalities.
Cost and Availability
Expressive Animator offers a full 7-day free trial that does not require an account. After the trial, the software is available via a one-time payment with no subscription — the perpetual license covers both Windows and macOS.
To reproduce the animations covered here, the original source files are available: the “Grumpy Egg” example (.eaf) and the elastic-effect project (.eaf) from this tutorial. The official product page and the Expressive Animator documentation provide further guidance.
