David Foreman

Aaron Jones

Toast Plugins

<h3>Animation Builder – Complex scroll-triggered animation with no coding required.</h3>
Animation Builder lets you craft everything from subtle transitions to complex, multi-stage scroll-triggered animations — all within a modern, familiar interface.
With intuitive controls and powerful features, you can build animations that respond to triggers, follow logical rules, and combine seamlessly to create a rich, interactive experience on your website — all with a fraction of the effort typically required.
<h3>Features</h3>
Scroll triggered – All animations respond to your scrolling, activating only when visible in the browser to ensure nothing is missed and performance remains smooth. 
Lightweight & performant — Minimal footprint, optimized for fast, smooth animations. 
Powered by GSAP Animation Framework — Built on the industry-standard animation engine for reliable, high-performance animations. 
Zero-config defaults — works straight out of the box. 
Beginner-friendly — no coding knowledge required.
<h3>The 4 types of animation included within Animation Builder</h3>
Animation Builder is designed to make animations effortless for everyone — whether you’re a seasoned developer or someone who has never touched JavaScript. With multiple ways to create and trigger animations, you have complete freedom to choose the approach that works best for you.
1. Simple Animation Builder 
A clean, visual interface for creating smooth, single-step transitions. Ideal for quick enhancements when you need movement without complexity.
2. Advanced Timeline Builder 
The heart of Animation Builder — a full-fledged timeline editor that lets you design professional, multi-stage animations with precision and control. No coding required, just creativity and a bit of animation logic.
3. Ready-to-Use CSS Classes 
Instantly add motion to any element with our library of predefined CSS animations. Perfect for quick effects that grab attention — no setup required.
4. Legacy Activations 
A tried-and-true method for scroll-based effects. Elements activate as they enter the viewport, enabling elegant CSS transitions between states — great for subtle, performance-friendly animations.
<h3>Benefits</h3>
Attract Users to Key Areas – Apply animations strategically to highlight the sections that matter most. 
Improves engagement – studies show that web animations can improve “time on page” by up to 15%. 
Increase Credibility – Polished, purposeful animations can make your website appear more credible.
Full documentation can be found <a href="https://www.toastplugins.co.uk/docs/animation-builder/" rel="nofollow ugc">here</a>

Animation Builder – An interface for adding scroll-triggered animations

Complex scroll-triggered animations. No coding required.

Nick Halsey

This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their normal and hover states. CSS3 Transitions are supported by the most recent version of every major browser (Chrome, Internet Explorer 10, Firefox, Opera, Safari); browsers without support will continue to render everything as they had before. This plugin adds the transitions (eye candy) to all <code><a></code> (link), <code><li></code> (list item, usually used in navigation menus), <code><img></code> (image), and <code><input></code> (form field and button) tags that have a hover or focus state defined (for example, if links change color when the mouse hovers over them). Other “buttons”, form elements, and WordPress-specific selectors are also targeted. Transitions are between .2 and .3 seconds in duration, so they shouldn’t cross the line between nice and distracting; however, depending on the colors used in your theme, the transitions may not be noticeable.
Also, please note that image sprites simply don’t work well with blanket css3 transitions. If you see wierd animations where images scroll between their normal and hover states, they’re using sprites. Depending on where the sprites are used, there are various ways to prevent the behavior on those elements, while retaining transitions where desired. One method is to add an inline style attribute to those elements: <code>style="transition: none; -webkit-transition: none;"</code>. Adding the css to your theme will override the plugin’s css as long as you target the elements using sprites by class or id.
Please feel free to offer any feature suggestions you might have and I will consider them for future releases.
<h4>CSS3 Transitions UX Theory</h4>
Because of the way our brains process images, in simple terms, instant/sudden changes are generally not as well perceived as more gradual ones. In the physical space, we never see instant changes, like slides changing with no animation in a PowerPoint, but with digital technology this is a very common practice. When websites make use of hover states, for example, if a link changes color when the mouse hovers over it, they exhibit small, but instant visual changes. Adding the css3 transitions makes these changes more gradual, and therefore easier on the eye. For this same reason, operating systems now tend to make use of a lot of animations. There’s a lot of neuroscience behind these concepts, but I’m not well versed in that. Basically, slight animations generally look better than instant changes. Some people will argue that things aren’t as “snappy” or seem slugish with transitions, but if that’s the case, it’s only a matter of adjusting the animation timing function and duration.

CSS3 Transitions

This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their norma …

Animation Builder – An interface for adding scroll-triggered animations vs CSS3 Transitions