Animated Divider
Add divider lines to your page that animate into place, expanding to fill in their designated space. You can adjust their start and end size, how they animate, their alignment and more.
- Adjustable start and end widths
- Set divider height
- Choose custom duration and delay values for animation
- Choose between a solid color or gradient for your divider
- Align divider to the left, center or right`
Example
Since the Documentation pages are built using our new Partitions stack, which is a fixed position style stack, the Animated Divider stack does not trigger its animations while scrolling within this page. To show off the Animated Divider stack we've built a simple examples page separate from this documentation page.
Using Animated Divider
General
Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Zoom stack.
Alignment
Allows you to set whether you’d like the divider to be aligned to the left, center or right.
Height
Adjust the height of the divider line itself, making it either thicker or thinner.
Width Style
Allows you to choose between using pixel (default) or percentage based widths for your Start and Final width values, below)
Width
Allows you to set the start and final width of the divider. The divider will animate from the start width to the end width.
Style
Divider Style
Choose whether you’d like the divider to be a solid color or a gradient. After choosing you’ll be given the appropriate color pickers to set the look of your divider line.
Animation
Start Delay
The amount of time to delay before animating the divider line. The delay starts as soon as the divider line enters view within the browser window.
Duration
The time that is will take for the animation to complete, after any delay you may have applied above.
Ease
The style of animation that will be applied to the divider.