Animated Heading

Content Controls

Content

These controls allow you to manipulate the text elements within the animated heading, from prepending and appending static text to defining dynamic changing text in between.

• Before Text – Define the static text that appears before the animated portion.
• Changing Text – Set up the text that changes dynamically within the heading.
  • Text – Specify individual text strings to be animated within the changing text.
• After Text – Specify the static text that appears after the animated portion.
• Tag – Choose the HTML tag for the animated heading (e.g., h1, h2, div, etc.) from a dropdown.

Design Controls

Effect

Adjust the animations and visual effects that bring your heading to life.

• Type – Select the animation effect type from a dropdown list.
• Typing – Configure the typing animation settings. (Note: This control is available only when the effect type is set to “typing”)
  • Type Speed – Control how fast each character is typed.
  • Start Delay – Set a delay before the typing starts.
  • Back Speed – Determine the speed at which characters are deleted during the typing animation.
  • Back Delay – Set a delay before the deleting action begins.
  • Shuffle – Toggle whether to randomly shuffle the order of the changing text.
  • Disable Loop – Toggle to stop the animation from looping.
  • Hide Cursor – Decide if you want to hide the typing cursor during the animation.
  • Cursor – Define the character to be used as a typing cursor. (Note: This control is only available when the “Hide Cursor” option is not enabled.)
  • Cursor Style – Customize the appearance of the typing cursor.
  • Typography – Adjust the typography settings of the typing text.
  • Background – Choose a background color for the typing text section.
  • Spacing – Modify the space around the typing text.
    • Padding – Adjust the internal spacing of the typing text section.
• Rotating – Adjust the settings for rotating text animations. (Note: This control is available only when the effect type is set to “rotating”)
  • Duration – Control how long each rotation animation lasts.
  • Delay – Set a delay before the rotation starts.
  • Easing In – Choose the acceleration curve for the animation’s start.
  • Easing Out – Select the deceleration curve for the animation’s end.
  • Transform origin – Define the pivot point around which the rotation happens.
  • Effect – Choose the animation effect used for transitioning between strings.
  • Background – Choose a background color for the rotating text section.
  • Spacing – Modify the space around the rotating text.
    • Padding – Adjust the internal spacing of the rotating text section.

Size

Define the dimensions for your animated heading, allowing you to fit it perfectly within your design.

• Width – Adjust the width of the animated heading element.

Typography

Customize the font, size, style, and other typographic properties to make your animated heading stand out.

Spacing

Control the space around your animated heading to ensure it aligns well with other elements and maintains a balanced look.

• Margin Top – Adjust the space above your animated heading.
• Margin Bottom – Define the space below your animated heading.