Reveal

Base Foundry stack

Create stylish, fun animations for your page elements that are triggered as your visitors scroll down your page.

  • Choose from over 30 different animation styles
  • Set the delay the preceeds the animation
  • Set animation duration
  • Choose the offset distance from bottom of browser window

Example

Since the Documentation pages are built using our new Partitions stack, which is a fixed position style stack, Reveal does not trigger its animations while scrolling within this page. To show off some of the great animations for Reveal we've built a simple examples page separate from this documentation page.

Using Reveal

Animation

Animation Type
Choose what animation style you wish to use to reveal your page elements that you’ve placed within the Reveal stack.

Duration
The amount of time it takes for the animation process to take place. The shorted the amount of time the faster the animation will occur.

Delay
The amount of time it takes after the Reveal stack comes into view in the browser before the animation itself begins. Setting it to zero means the animation will occur as soon as the reveal stack enters the viewport of the browser window.

Offset
The distance up from the bottom of the browser window where the Reveal stack will be triggered. This trigger point is considered to be the entry point into the browser window.

  • Please Note: Animations occur at the desktop breakpoint and are disabled on mobile devices to ensure good compatibility and proper display of content.

Animate on Mobile Breakpoint v2
By default Reveal disables animations on mobile devices in order to make sure things run smoothly and have no problems for your mobile visitors. If you're adventurous though you can enable this feature to include the animations on mobile devices.

Insight
Scrollability

The Reveal stack's slick animations are trigger off of the browser window's contents scrolling. Stacks like the Partitions stack, which don't allow the browser itself to scroll, but instead its inner contents scroll by itself, will not trigger the Reveal stack's animations. So keep this in mind when building your pages — Reveal will not work within the Partitions stack.