Updates for the foundation plugin will appear in the WordPress backend as they become available.
When updating the plugin always back up your site prior. We test release updates thoroughly but we are humans and sometimes we miss things which can cause errors on your site. Please ensure that you have a recent backup of your site before updating.
1. Manual Update via Toast Plugins Website
2. Automatic Update via WordPress Backend
Animation Builder requires GSAP to run. GSAP is not open-source, so we cannot include it directly in the plugin. However, you can easily add it by using the recommended CDN link or by linking to a locally hosted version.
Recommended links:
If you ever want to change where this hosted from at a later date, it’s straightforward. Go to the plugin settings in the backend: Animation Builder > Settings, scroll down, and you’ll see the currently used links, which you can update as needed.
Both GSAP libraries are a requirement. The plugin will not function nor will any animations play without them.
Animation Builder offers four different ways to bring your website to life each designed to suit users with different skillsets.
1. Simple Animation Builder
A visual tool designed for creating smooth, basic transitions on selected elements. It’s quick and easy to use, though customization options are limited.
2. Advanced Timeline Builder
Where Animation Builder truly shines. This tool lets you design complex, professional-grade, multi-stage animations without writing a single line of code. Extremely powerful, but requires some understanding of timelines and animation logic.
3. Ready-to-use CSS Classes
Apply predefined CSS animations to any element instantly. This is the fastest way to add movement to individual elements without any setup—perfect for quick, eye-catching effects.
4. Legacy Activations
An older but still effective method. Elements gain a special class when they enter the viewport, allowing you to create CSS transitions between two states. Ideal for subtle, scroll-triggered transitions.
1. Go to 
> Add a new animation > Simple builder
2. Enter the “Animated Element”. This is a free-text box where you can enter the CSS selector of the element you’d like to animate. If you’re not familiar with CSS or HTML, you can simply click an element in the preview area—this will automatically populate the field with the correct CSS selector.
If you’ve selected the wrong element and you’d like to select a different element, just click the 
to reinitialise the selection tool then click on another element or manually change it via the text field.
It’s a good idea to manually verify the selector to ensure it doesn’t include dynamic classes (classes added via JavaScript), since animations can only be applied to CSS classes if they exist in the page’s initial load state.
3. After selecting an element, a “Preset Animation” button will appear. Click it to open a dropdown of common preset animations. Choosing any animation from the list will apply it to the Animated Element you selected in the previous step.
4. Once a preset animation has been selected, additional options will appear. Don’t worry—these are mostly pre-configured for you based on the preset you chose. The extra settings are just for fine-tuning, which we can skip for now. Simply click the 
button to trigger the animation and see it play. You can also scroll the element out of the viewport and back in to preview how it will animate when the page is viewed.
5. If you’re happy with the animation preview, click the Save button. The animation will then be applied. We’d recommend you then exit the builder and test your animation directly on page.
After selecting a simple animation preset, a set of customisation options will appear. With over 20 adjustable properties, you have full control over every aspect of your animation. To edit a property, simply click on its tab—then the corresponding options will be displayed for you to adjust. See additional options below;
Go to > Add a New Animation > Advanced Timeline Builder.
The Trigger Element determines when the animation should play based on the user’s scroll position.
icon, then choose another element or update the CSS selector manually.
Note: The trigger element does not have to be the element you want to animate—it simply determines the scroll position at which the animation begins.
Once a trigger element is selected, a sentence will appear describing the default behavior:
When the top of the trigger element reaches the
bottom of the viewport, run the timeline below.
Once an animated element has been entered the setting to configure the animation will appear.
A set of customisation options will appear. With over 20 adjustable properties, you have full control over every aspect of your animation. To edit a property, simply click on its tab—then the corresponding options will be displayed for you to adjust.
Once all configured all options for the stage save the stage and you’ll see a button to add additional stages or continue to step 6.
Scrub: Links the animation’s progress directly to the scroll position. When scrub is enabled, scrolling forward or backward moves the animation forward or backward in sync. With scrub turned on, Animation Builder will also show a sentence describing when the animation ends. This can be adjusted based on your needs.
Scrub Delay: Defines how long (in seconds) the animation’s playhead takes to “catch up” to the scroll position. A value for 1000 would means that animation smoothly catches up within 1 second, adding a natural easing and reducing jitter. This is especially helpful for smoothing the sync between scroll and animation.
Run Once: Prevents the animation from playing more than once during a single page load, even if the element leaves and re-enters the viewport.
Globalised: Refer to making an animation run on every page.
Disable Below: Prevents the animation from running on screens below a certain width (e.g., disable below 768px for mobile users).
Disable Above: Prevents the animation from running on screens above a certain width (e.g., disable above 1280px for desktops).
To save an animation, you must first give it a name. You can set this at the bottom of the Edit panel. Before saving, you can also preview the animation using the Preview button. Note that if scrubbing is enabled, the animation can only be previewed by scrolling.
Ready-to-use classes are really straightforward to use.
This is an older, yet still effective method for adding subtle scroll-triggered animations. When an element enters the viewport, it gains a special class, which allows you to create smooth CSS transitions between two states.
Once activated, the element will automatically receive a special class whenever it enters the viewport. You can then use CSS to define styles before and after the class is applied.
Tips:
Enabling the Globalised option on an animation makes it play on every page where its CSS selector is found. This can save time when you want the same animation across multiple pages. However, be sure to disable it for more specialised animations to prevent them from appearing on pages where they don’t belong.
‘To’ animations transition an element from its current state to the properties you specify, whereas ‘From’ animations start with the properties you define and animate back to the element’s original state. In other words, with a ‘to’ animation, you define how the element will look at the end of the animation. With a ‘from’ animation, you define how it will look at the start.
