Features

  • 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

Below we’ve created a few different iterations of the Animated divider stack to showcase its different alignment, styling and animation settings.

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.

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.


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.

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.


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.

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.


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.

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