The Transition tool allows you to animate your entire page into place with a beautiful animation when a visitor loads a specific page on your site.
To keep uniformity of our documentation pages we've opted to skip the example for this page. You can see it in action in the tutorial video however.
In previous versions of Foundry the Transition tool would also animate when a visitor left a page as well. We found this confused many users and caused some non-Foundry addons to struggle when paired with Transition. We modified it to work only with page loads, but to do it much more efficently.
TIP. When using Transition with the Partitions tool, be sure that Transition is placed on the page above Partitions and not within it.
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'll choose the animation effect that will be applied to the page as it loads. We've kept the list pared down to those that look good with page loads and are not too jarring.
Controls the length of your page loading 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.
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.
Choose whether you'd like to have the page's loading indicator be a spinner or pulse. Both have a minimal and clean styling to them. The indicator is placed in the center of the page to make sure it is visible to the visitor right away.
Here you can customize how large you'd like the loading indicator to appear.
Choose the unit of measure you'd like to use to adjust the sizing of the indicator.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the indicator color. You're also provided an option to choose a custom one-off color as well.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the overlay background that is added to the page between the indicator and the page itself. You're also provided an option to choose a custom one-off color as well.
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.