Horizon Settings


Horizon Container

  • Start Position: (slider) The starting position of the scroll
    • Default: 0%
    • Min Value: 0%
    • Max Value: 100%

  • Enable Scroll Hint?: (checkbox) Enable a snazzy scroll hint to make it easier for users to know that they can scroll horizontally. The scroll hint will disappear when/if Horizon starts to animate.
    • Default: true
  • Hint Text: (input) The text that is inside of the hint container
    • Enable: When Enable Scroll Hint? is set to true
    • Default: scroll me

  • Collapse Edit Mode?: (checkbox) collapse the child stacks in edit mode
    • Default: false

Horizon Scrollbar

  • Scrollbar: (select) The scrollbar style
    • Default: Hide Scrollbar
    • Possible Values:
      • Default Scrollbar
      • Hide Scrollbar
      • Styled Scrollbar
  • Show on Hover?: (checkbox) This will only show the scrollbar on hover
    • Enable: When Scrollbar is set to styled-scrollbar
    • Default: false
  • Scrollbar Height: (number-2) The sizing and gap of the scrollbar
    • Enable: When Scrollbar is set to styled-scrollbar
    • Default: [12, 4]px
    • Min Value: 4px
    • Max Value: px
  • Scrollbar Colors: (color-2) The scrollbar colors
    • Enable: When Scrollbar is set to styled-scrollbar
    • Allows Opacity: true

Horizon Cards

  • Height: (button-3) height logic for the card
    • Default: [true, false, false]
  • Height: (number) The height of the item
    • Enable: When Height is set to true
    • Default: 200px
    • Min Value: 0px
    • Max Value: px
  • Height: (slider) The height of horizon relative to the browser height
    • Enable: When Height is set to true
    • Default: 25%
    • Min Value: 0%
    • Max Value: 100%
  • Min/Max: (number-2) The min and max height of horizon
    • Enable: When Height is set to true
    • Default: [200, 800]px
    • Min Value: 0px
    • Max Value: px
  • Scale Images to Height?: (checkbox) Scale the images inside of each horizon item to match the height setting
    • Enable: When Height is set to false
    • Default: true

  • Width: (button-3) Width logic for the card
    • Default: [true, false, false]
  • Width: (number) The width of the item
    • Enable: When Width is set to true
    • Default: 200px
    • Min Value: 0px
    • Max Value: px
  • Width: (slider) The width of the item
    • Enable: When Width is set to true
    • Default: 50%
    • Min Value: 0%
    • Max Value: 100%
  • Min/Max: (number-2) The min and max width of the item
    • Enable: When Width is set to true
    • Default: [200, 800]px
    • Min Value: 0px
    • Max Value: px

  • Margin: (slider) Margin around each horizon item
    • Enable: When ** is set to false
    • Default: 0px
    • Min Value: 0px
    • Max Value: 20px
  • Margin: (number-4) Detailed margin around each horizon item
    • Enable: When ** is set to true
    • Default: [0, 0, 0, 0]px
    • Min Value: 0px
    • Max Value: px

  • Padding: (slider) Padding around each horizon item
    • Enable: When ** is set to false
    • Default: 0px
    • Min Value: 0px
    • Max Value: 20px
  • Padding: (number-4) Detailed padding around each horizon item
    • Enable: When ** is set to true
    • Default: [0, 0, 0, 0]px
    • Min Value: 0px
    • Max Value: px

Animation

  • Animation: (select) The type of animation to use
    • Default: None
    • Possible Values:
      • None
      • On Page Scroll
      • Loop (pause on hover)
      • Loop on Hover
  • Speed Factor: (slider) The speed multiplier comnpared to how fast the user is scrolling the page
    • Enable: When Animation is set to scroll
    • Default: 1
    • Min Value: 0
    • Max Value: 2
  • Timing Curve: (button-3) The easing timing curve to use. Out starts fast, finishes slow. In starts slow, finishes fast. In-Out starts and finishes slow but is fast in the middle.
    • Enable: When Animation is set to loop
    • Default: [false, true, false]
  • Effect: (select) Select the easing timing function to use on the transition. You can visually see all of the timing functions at https://greensock.com/docs/Easing
    • Enable: When Animation is set to loop
    • Default: Quad (Power1)
    • Possible Values:
      • Linear (Power0)
      • Quad (Power1)
      • Cubic (Power2)
      • Quart (Power3)
      • Quint (Power4)
      • -
      • Back
      • Bounce
      • Circ
      • Elastic
      • Expo
      • Sine
      • SlowMo
      • Stepped
  • Timing: (number-3) The timing of the loop animation. The timing is how long it takes to go form the beginning to the end. The delay time is the time that the animation will pause before it reverses direction.
    • Enable: When Animation is set to loop
    • Default: [10, 10, 2]s
    • Min Value: 0s
    • Max Value: s