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.

Here you can decide what content your scroll-based animation will be applied to. The Contents mode will apply the animation to the Wizardry tool, and its contents. When using Class mode you will provide a unique class name as an ID. You'll then apply this class name to another element on your page. This links that element to the Wizardry tool allowing it to animate that page element.

These two drop downs will determine where within the browser window that the animation will begin and end. These locations are relative to the browser window.

These two drop downs will determine what location on your content that will trigger the animation's start and stop. When the Item Start location passes the browser's start position the animation begins. When the Item End location passes the browser's end position the animation stops. The Item Start and End settings are relative to the item being animated.

Allows you to add opacity start and end values to your animation.

Here you set the values for your element's opacity for the Start and End of the animation. These values are a percentage of 100.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

Allows you to add scale start and end values to your animation.

Here you set the values for your element's scale for the Start and End of the animation. These values are a multiplier. In other words 0.5 would be equal to 50% of the items original size, 1.0 would be equal to 100% of its original size and 1.5 would be equal to 150% of the elements original size.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

Allows you to add rotation start and end values to your animation.

Here you set the values for your element's rotation around its center point for the Start and End of the animation. These values are measured in degrees. These values can be a positive or negative number and can exceed 360° in either the positive or negative.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

Allows you to add rotation start and end values to your animation along the items x-axis.

Here you set the values for your element's rotation along its X-axis for the Start and End of the animation. These values are measured in degrees. These values can be a positive or negative number and can exceed 360° in either the positive or negative.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

Allows you to add rotation start and end values to your animation along the items y-axis.

Here you set the values for your element's rotation along its Y-axis for the Start and End of the animation. These values are measured in degrees. These values can be a positive or negative number and can exceed 360° in either the positive or negative.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

Allows you to add translate start and end values to your animation. Translate values allow you to move an element horizontally or vertically depending on the axis in question. The X-axis is horitontal.

Here you set the values for your element's Start and End positions along the X-axis for the animation. The values can be either a positive or negative value.

Allows you to select the unit of measure for the movement along the X-axis. You can choose from Pixels (px), RootEM (rem), View Width (vw) or Percent (%). The percentage value is a percentage of the widht of the element itself -- so if your element is 300 px wide, 50% would be a movement of 150px.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

Allows you to add translate start and end values to your animation. Translate values allow you to move an element horizontally or vertically depending on the axis in question. The Y-axis is vertical.

Here you set the values for your element's Start and End positions along the Y-axis for the animation. The values can be either a positive or negative value.

Allows you to select the unit of measure for the movement along the Y-axis. You can choose from Pixels (px), RootEM (rem), View Width (vw) or Percent (%). The percentage value is a percentage of the widht of the element itself -- so if your element is 300 px wide, 50% would be a movement of 150px.

Easing can be applied to this property to give it a different look and feel. Easing with scroll-based animation is much more subtle in some instances than with other CSS based animation. Generally the Linear setting will be good for most animations.

This tool also allows you to add animatable filters to your page elements. Like the other settings through out, you can add a start and end value for each filter. Unlike the above settings the filters do not have easing settings. The available, animatable filters are as follows:

Allows you to add a start and end value for animating the border radius, or rounded corners of an item, with your animation. These values are measured in Pixels (px). This setting is most often used in conjuction with Class Mode for the tool's Apply To setting.

When enabled you're given the ability to set start and end values for the skewing of the content within the Wizardry tool. The skew of the contents can be set seprately along both the X- and Y-axis.

Enabling this setting allows you to animated the padding applied to the Wizardry tool. This is especially useful when Wizardry's APPLY TO setting is set to Class, as this allows us to animate the padding applied to a class name, which we can assign to other elements throughout Foundry.

Allows you to select the unit of measure for the padding applied to the Wizardry tool or class. You can choose from Pixels (px) or RootEM (rem) for this setting.

Here you can choose between displaying your animated element inline with other content using Relative mode or set an absolute position, which can overlap content, using Absolute mode.

Lets you assign a CSS display property of either Block or Inline-Block to the animated item. Most often Inline Block will be preferable, but this setting offers you the ability to quickly change it if needed.

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 child item. 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.