Reveal Pro

Thunder Pack addon stack

Take your animations to the next level. Create advanced, custom animations through a series of controls instead of having to rely on pre-built animation styles.

  • Build custom animations.
  • Set animation style.
  • Allow reverable animations.
  • Trigger animations on scroll, hover or page load.
  • Repeat animations.

Example

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

Using Reveal Pro

Animation

Trigger On Hover
Animations are normally triggered when the visitor scrolls down your page, or automatically when the page loads. Enabling the Trigger on Hover feature instead causes your animation to trigger when the visitor hovers over the Reveal Pro stack.

Trigger on Scroll
Causes the animation to occur when the stack scrolls into view. By default the animation will occur as soon as any part of the stack enters the viewport.

Trigger at Center of Browser
Causes the animation to take place as the stack scrolls into view. This feature tells the animation to wait to occur until the stack has reached roughly the center of the browser window’s viewport.

Duration
The time, is seconds, it takes for the animation to occur. The long the time duration the slower the animation will appear.

Delay
The time you wish to have the stack wait before the animation begins.

Start Opacity
The opacity of the contents of the stack before the animation begins.

End Opacity
The opacity of the contents of the stack after the animation has completed.

Start Scale
The scale, or how "zoomed in" or "zoomed out" an object appears, before the animation begins.

End Scale
The scale, or how "zoomed in" or "zoomed out" an object appears, after the animation has completed.

Start Y Position
The vertical position of the stack’s content before the animation begins. This value can be either a positive or negative number. The End position will always be the content’s original location on the page.

Start X Position
The horizontal position of the stack’s content before the animation begins. This value can be either a positive or negative number. The End position will always be the content’s original location on the page.

Start Rotation
The angle at which the stack’s contents are rotated before the animation begins. This value can be either positive or negative number. The End rotation will always be 0.

Start Y Rotation
The angle around the Y-Axis (or vertical axis) at which the stack’s contents are rotated before the animation begins. This value can be either positive or negative number. The End rotation will always be 0.

Start X Rotation
The angle around the X-Axis (or horizontal axis) at which the stack’s contents are rotated before the animation begins. This value can be either positive or negative number. The End rotation will always be 0.

Ease
Choose what animation style you wish to use to reveal the contents of the stack.

Repeat Animation
Enable this feature to allow your animation to repeat itself a set number of times, which you configure using the Repeat Count setting. You are also able to set a Repeat Delay which determines how long the animation will pause between repeats.

Yo-Yo Animation
Allows the animation to reverse itself during its repeats. Only available when Repeat Animation is enabled.

  • Please Note: Animations are disabled on mobile devices to ensure good performance of your pages.

Advanced

Allow Animations to Reverse
Enabling this feature allows the animation to "undo" itself once it leaves the browser’s viewport. When the animation reenters the viewport the animation will occur again.

Contain Animations
Some animations overflow the bounds of the stack. If you wish to contain the animation, keeping it to the confines of its stack you can enable the Contain Animations feature. This can be used in conjunction with other stacks where the parent stack needs to have its overflowing content hidden.

Insight
Scrollability

The Reveal Pro 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 Pro stack's animations. So keep this in mind when building your pages — Reveal Pro will not work within the Partitions stack.