Typer - Stack Settings

Big White Duck

Home

Settings

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 - (|)