Skip to main content

Animated Heading

Animated heading highlight your text or phrase by drawing a shape on it to draw user attention.

Content Tab​

content tab

HTML tag​

Change the heading type in HTML code. This help structure the content hierarchically, both for readability and search engine optimization (SEO)

Highlight style​

highlight style

Various highlight styles to choose from the dropdown menu, you can try and select which one match your context, narrative and brand feels.

Before, Highlight and After text​

split text

Splitting your phase into 3 parts for the shape to highlight the right words. This also allows you to adjust the color of the highlighted text. However, you won't be able to break the line freely. You can work around this by using a wrapper to limit the width of the text block to break the line, or by using an Animate Heading for only highlighted text, while using regular heading elements for the remaining before and after text.

Loop​

Allows the shape to be redrawn repeatedly after finishing. Turning it off will make the shape draw only once and keep its final form after completing.

Animation duration​

The time it takes to draw the shape. The lower the value, the faster the drawing speed.

Design Tab​

design tab

Shape​

  1. Color: Color of the Shape
  2. Size: Stroke weight of the Shape, the larger the number, the thicker the stroke.
  3. Bring to front: Sometime the shape might cover the text below, this allow the shape to draw beneath the text.
  4. Rounded Edges: Rounded the corners and caps of the stroke to rounded style

shape

Animate text​

Color: Change the color of the highlight text.