Big White Duck

Stacks Image 830

Typer Stack Settings

Typer - Setup

  • HTML Tag Type: (select) Choose the html tag for this Typer stack text. You can over ride the size of any tag type using the Custom option in Typer Text : Style
    • Default: Paragraph Text
    • Possible Values:
      • Paragraph Text
      • h1
      • h2
      • h3
      • h4
      • h5
      • h6
  • Shrink in edit mode: (checkbox) Makes all the text in this stack 16px to save space in edit mode. The selected font size will be used for preview and publish
    • Default: false

Typer - Text Settings

  • Non Animated: (button-2) Add lead in and following text that is not part of the animation cycle
    • Default: [false, false]
  • Align: (select) Text alignment
    • Default: Left
    • Possible Values:
      • Left
      • Right
      • Center
      • Justify
  • Collapse Margins: (checkbox) Removes all margins from the text
    • Default: true

  • Text Styles: (select) The sizing and colors used for the Typer text
    • Default: Default (Theme Style)
    • Possible Values:
      • Default (Theme Style)
      • Alternate (Foundation Only)
      • Custom
  • Animated Text: (color) The color of the animated text
    • Enable: When Text Styles is set to custom
    • Allows Opacity: true
  • Non Animated: (color-2) The colors of non animated text
    • Enable: When Text Styles is set to custom
    • Allows Opacity: true
  • Highlighter: (select) The sizing and colors used for the Typer text
    • Default: Default (Inverse Colors)
    • Possible Values:
      • Default (Inverse Colors)
      • Custom Colors
  • Colors: (color-2) The colors of the lead-in and following (non animated) text
    • Enable: When Highlighter is set to custom
    • Allows Opacity: true

  • Font Size: (number-2) Define custom sizes for mobile and larger screens.
    • Enable: When Text Styles is set to custom
    • Default: [1, 1]rem
    • Min Value: 1rem
    • Max Value: 30rem
  • ****: (number-2) Define custom sizes for normal desktop and widescreen displays
    • Enable: When Text Styles is set to custom
    • Default: [1, 1]rem
    • Min Value: 1rem
    • Max Value: 30rem

  • Font Source: (select) Choose the source of the font to use.
    • Default:
    • Possible Values:
      • Theme Fonts
      • Google Fonts
      • Custom Web Font
      • Font Vault 1
      • Font Vault 2
      • Font Vault 3
      • Font Vault 4
      • Font Vault 5
      • Font Vault 6
      • Font Vault 7
      • Font Vault 8
  • Hide in Edit Mode: (button) IMPORTANT: If you do not hide Google fonts in Edit mode you will experience page jumps while editing stacks. Only de-select this button to briefly check that the font has loaded correctly and for sizing setup.
    • Enable: When Font Source is set to google-font or web-font
    • Default: [true]
  • Fallback Font: (select) Use a serif or sans-serif font face if google fonts are not available online.
    • Enable: When Font Source is set to google-font
    • Default:
    • Possible Values:
      • Serif
      • Sans-Serif
  • Font Name: (input) Ensure you type the name exactly is it appears on the Google Fonts website including spaces and numbers. Press Enter when done.
    • Enable: When Font Source is set to google-font
    • Default:
  • Italic: (checkbox) Italic variants are not available in all Google Fonts.
    • Enable: When Font Source is set to google-font
    • Default: false
  • Font Weight: (select) Font Weight: see Google Fonts Website for weights available for each font.
    • Enable: When Font Source is set to google-font
    • Default: 400 (Normal)
    • Possible Values:
      • 200 (Light)
      • 300 (Book)
      • 400 (Normal)
      • 500 (Medium)
      • 600 (Semi Bold)
      • 700 (Bold)
      • 800 (Extra Bold)
  • Font Name: (input) Enter a font family name to identify this font. You can use this name in other stacks that require this font without loading it separately again
    • Enable: When Font Source is set to custom-font
    • Default:
  • EOT File: (link) Select your EOT file
    • Enable: When Font Source is set to custom-font
    • Default:
  • TTF File: (link) Select your TTF file
    • Enable: When Font Source is set to custom-font
    • Default:
  • WOFF File: (link) Select your WOF file
    • Enable: When Font Source is set to custom-font
    • Default:
  • WOFF2 File: (link) Select your WOFF2 file
    • Enable: When Font Source is set to custom-font
    • Default:
  • SVG File: (link) Select your SVG file
    • Enable: When Font Source is set to custom-font
    • Default:
  • Info: Link each file to the URL of your font. Use all types for cross browser compatibility

Typer - Animation

  • Start When?: (select) Choose when the typer animation begins. Either immediately or when the stack comes into view in the browser.
    • Default: On Page Load
    • Possible Values:
      • On Page Load
      • When in View
      • After Delay
  • Delay: (number) The delay in millisceconds before the typer animation will begin after it enters the browser window
    • Enable: When Start When? is set to in view or delay
    • Default: 50ms
    • Min Value: 0ms
    • Max Value: 9000ms
  • Animation: (select) Choose the source of the font to use.
    • Default: Continuous (loop)
    • Possible Values:
      • Continuous (loop)
      • Once Only
      • Type Out Phrase (Typewriter Mode)
  • Cycle Time: (number) The time taken to complete each highlight and replace
    • Default: 3000ms
    • Min Value: 0ms
    • Max Value: 30000ms
  • Highlight Speed: (number) The speed at which the highlighter will select the text
    • Default: 20ms
    • Min Value: 0ms
    • Max Value: 100ms
  • Type Speed: (number) The speed at which the text will type out
    • Default: 100ms
    • Min Value: 10ms
    • Max Value: 500ms
  • Clear Delay: (number) The delay in millisceconds before the typed text will be highlighted prior to clearing
    • Default: 500ms
    • Min Value: 0ms
    • Max Value: 4000ms
  • Smart Replace: (checkbox) When enabled, all the text will be replaced on each animation cycle. When unchecked a smart replace will be performed and only the changed words or phrases will be replaced.
    • Default: true
  • Random: (checkbox) Change the words randomly rather than in the order entered.
    • Default: false

Typer - Advanced

  • Separater Char: (select) Choose the character that will divide up the phrases to animate. The default is a comma, but if you need to use a comma in your text you can change it to an alternative and so on.
    • Default: Comma (,)
    • Possible Values:
      • Comma (,)
      • Colon (:)
      • Semi-Colon (:)
      • Percernt (%)
      • Slash (/)
      • BackSlash (|)
      • Pipe - (|)