Features

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

Example

Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


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.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2018 Elixir Graphics | Contact Us