A few months ago a client came to me with a high-end WooCommerce build. They wanted “personality.” Nothing dramatic: a subtle bounce on the cart icons, and an elastic stretch when someone hovered a featured product category. After 14 years of WordPress work, my instinct was to hand-code the CSS keyframes. How hard can an SVG animation workflow be, I thought.
Three hours went into cubic-bezier functions and manual keyframe timing, and the result looked okay. Okay does not cut it at premium rates. It was stiff, and every time I adjusted the duration the bounce lost its “weight.” The mistake was trying to simulate physics with static values, which is not something you can eyeball in a text editor.
A saner SVG animation workflow
So I stopped and opened Expressive Animator, which I had seen mentioned at Smashing Magazine in an article on creating elastic bounce effects. It gives you easing functions built around oscillation and stiffness instead of raw math. You set a start point and an end point, and the software works out the springiness in between.
It exports clean SMIL or CSS. On WordPress I usually pick SMIL, because the animation logic then lives inside the SVG file. Your theme’s style.css does not collect hundreds of lines of animation code that only fire on one page. Once a site passes 20 pages, that separation is what keeps it maintainable.
/**
* Safely enqueuing an animated SVG in a WordPress template
* Prefixing everything with bbioon to avoid namespace collisions.
*/
function bbioon_render_animated_icon( $icon_name ) {
$svg_path = get_template_directory_uri() . '/assets/svg/' . $icon_name . '.svg';
// Using an object tag to ensure SMIL animations execute correctly
return sprintf(
'<object type="image/svg+xml" data="%s" class="bbioon-animated-icon"></object>',
esc_url( $svg_path )
);
}
Why easing functions beat manual keyframes
In Expressive Animator you adjust variables like “stiffness” and “oscillations” rather than positions. A client says the bounce is too aggressive, you change a ‘4’ to a ‘2.5’, and that is the edit. You never go back to recalculate keyframe percentages at 12.5%, 25% and 37.8%. What used to be a technical chore turns into a quick creative decision, and it is faster without costing you any quality.
I delivered that WooCommerce project three days early. The icons had “weight” to them and they felt premium. The client never asked how it was done. They saw that it worked and that it looked better than their competitors, and that was the point.
How I would set this up next time
- Keep the animation with the asset. SMIL exports tie the logic to the SVG rather than to your global CSS.
- Stop hand-tuning Bezier curves. Manual curves are for masochists. Use a tool that understands physics.
- Watch the weight. A lightweight SVG with internal animation outperforms a heavy JS library for simple UI feedback.
This gets complicated fast. If you are tired of debugging someone else’s mess, or trying to make a site feel “modern” without wrecking the speed score, drop my team a line. We have probably seen it before and the fix is usually ready.
If you are still hand-coding UI transitions, I would be curious what keeps you there.
