Animated Heading Layer

This layer is available since 3.3.8 PRO. If you are using an older version please update.

Animated Heading Layer

The Animated Heading Layers are texts which is able to change a specific part of the text to another one from a list.

Animated Heading Layer Example


These are the available text replacing animations.

Animated Heading Layer Types

Auto width

You can choose to make your Animated text automatically adjust its width each time the text changes or to make it as long always as much space the longest text in the Animated text list requires.

Animated Heading Layer - Auto width

Before text

The text that appears before the animated text.

Animated text

Each line represents a single state. These texts will keep changing each other over time.

After text

The text that appears after the animated text.


By default, the animation will be played only once, meaning that the animation will stop on the last line of the Animated text field. By enabling the Loop option, your texts will constantly keep changing each other!


A start delay can be set, so the animation will only start when this time has passed.


This is how fast the text replacing animation is executed. The bigger the number the faster the animation.

Show duration

Each line of the Animated text field will be shown for the given time.


You can add an url, or pick from the given  link options, where you can find lightbox or slide switching options. Also you can choose if you want to open up your link in a new page or in the current one. And there are rel attribute options too.


These are what kind of h tag your text will be (from <h1> to <h6>).

Custom CSS classes Expert

You can add a custom css class, that will be on the h tag.

Layer window → Design tab

There are separate design settings for the animated text in the Design tab.

Animated Heading Layer - Design Settings