Create stylish, fun animations for your page elements that are triggered as your visitors scroll down your page. Choose from preset animations, tweaking them to your liking, or build your own custom animations.


Easy Presets

Alchemy comes packed with over 60 preset animations that are triggered by the visitor when scrolling through your page. We can't possibly show off every animation preset, so be sure to play with each to see how they work for yourself. That said, let's look at a few of these presets below:

Subtle Fade In Left
(Ease Out Quart)

Subtle Fade In Bottom
(Ease In Out Expo)

Subtle Fade In Top
(Ease Out Circ)

Subtle Fade In Right
(Ease Out Back)

Scale In Center
(Ease Out Back)

Rotate In Top
(Ease Out Quint)

Puff In
(Ease In Quart)

Bounce In Bottom
(Ease Out Quad)

Custom Animations

Custom animations are easy to build using Alchemy. Provide it with a few starting and ending values and Alchemy animates everything in between. There's no way we could possibly show off every itteration and combination, as they're nearly infinite, so be sure to play with each to see how they can work for your situation. That said, let's look at a few of custom animations:

Opacity & Translate
(Ease Out Quart)

Opacity, Scale, Rotate, Translate & Blur
(Ease In Out Expo)

Opacity & Translate
(Ease Out Back)

Opacity, Scale, Rotate & Translate
(Ease Out Back)

Animate on Hover
Scale & Translate
(Ease Out Circ)

Animate on Hover
Scale & Rotate
(Ease Out Back)

Animate on Hover
Scale, Rotate & Translate
(Ease Out Back)

Animate on Hover
Scale & Rotate
(Ease Out Back)

Fortune and glory, kid. Fortune and glory.

Alchemy combines both Foundry v2's Reveal and Reveal Pro tools, as well as introduces many new features including a more robust set of CSS animation presets and animations that work in more situtations than the previous tools combined.


Edit Mode

Edit Mode Title

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.

Easy Preset

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.


Controls the length of your animation. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker animation. When using Custom Animations you can set a duration for the animation process both as it animates in and as it animates out.


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.

Animate On Scroll Once

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.

Loop Animation

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.

Custom Animations

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.

Translate X-Axis & Translate Y-Axis

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).


Offset Value

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).

HTML Comment

HTML Comment

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.