Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

The Mode selector gives the ability to switch between using Alchemy's preset animations or creating your own animations based on a series of start and end values.

We've created over 60 different premade CSS-based animations for you to choose from. These are some of the most popular, and most often used animations, saving you the time of creating them yourself.

Used to delay the animation. The delay period begins when the animation would normally be triggered. This setting is often used to stagger the animation of several items. The Delay setting allows you to set a Delay for both the animate In and animate Out events. In delays the time it takes for the animation to begin coming into view and the Out value delays the time until the animation goes in reverse when leaving the view point. The latter of the two values will rarely need to be changed from 0 (zero).

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

When enabled the animation will occur only the first time the element would be triggered. After that if the visitor scrolls past the element on the page again it will remain visible and will not trigger the animation again. When disabled the animation will trigger whenever the element comes within view and meets the tigeering offset requirements.

Here you can opt to have an animation repeat itself once triggered. You can choose whether you would like it to repeat infinitely or provide a custom number of times for it to repeat. By default though this preference is set to None, meaning the preset animation will play through just once.

When Count is chosen you'll be provided with a field to indicate how many times it should repeat.

When choosing a Custom animation you're provided a set of trasformations you can apply to your page element. You can alter the start and end settings for the animation and Alchemy fills in everything in-between. These settings are available only when using the custom animation setting:

Specify whether you'd like your custom animation to be triggered when is scrolls into view within the browser window, or when the visitor hovers over the page element with their mouse.

Sets the start and end opacity values for your animated page element. You can choose to set the opacity from 0% to 100%.

Allows you to adjust the scale of your animated item at both the start and end of the animation.

Specifies the start and end roation of your animated element. The values can be either positive or negative whole numbers. Positive values rotate the item clockwise while negative values go in the counter-clockwise direction. The roataion can exceed 360° in either the positive or negative direction.

These two settings allow you to adjust the start and end positions of your animated item. These positions are calculated from the elements intial position on the page. You can use positive or negative whole numbers for any of these four values. These translate positions are meausres in Pixels (px).

These two settings allow you to adjust the start and end positions values for the blur of your animated elements. A common use is to set a blur for the start value and have it clear up to a sharp focus once the animation ends. The amount of blur is measured in Pixels (px).

This is the distance, from the edge of the browser window, where the animation will be triggered and begin. If a delay is applied this is where the delay will start and then trigger the animation.

Allows you to specify the unit of measure for the offset's distance value. You can choose from Pixels (px) or a Percentage (%). The default and recommended units for this offset value is Pixels (px).

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.