Transition

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.

Examples

No Example

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.

I guess you guys aren't ready for that yet. But your kids are gonna love it.

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.

Settings

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.

Animation

Page Animation

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.

  • Fade In
  • Fade In Up
  • Fade In Left
  • Fade In Right
  • Fade In Bottom Left
  • Fade In Bottom Right
  • Subtle Fade In Top
  • Subtle Fade In Bottom
  • Subtle Fade In Left
  • Subtle Fade In Right
  • Scale In Top
  • Scale In Bottom
  • Scale In Left
  • Scale In Right
  • Puff In
  • Zoom Out
  • Bounce In Top
  • Bounce In Bottom
  • Bounce In Left
  • Bounce In Right
  • Bounce In Forward
  • Bounce In Back
  • Subtle Bounce In Top
  • Subtle Bounce In Bottom
  • Subtle Bounce In Left
  • Subtle Bounce In Right
Duration

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.

Easing

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.

Loading Indicator

Indicator Type

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.

Size

Here you can customize how large you'd like the loading indicator to appear.

Size Units

Choose the unit of measure you'd like to use to adjust the sizing of the indicator.

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.

Overlay

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.

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.

Custom

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

CSS

Classes

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.