Animated Heading Layer

You can find the Animated Heading layer in the Slide Editor.

☝️ Note: This layer is only available in the Pro version of Smart Slider 3.

The Animated Heading Layers are texts which is able to change a specific part of the text to another one from a list. To be able to make the layer work, you need to have at least two lines of texts in the Animated Text field.

⚠️ Warning: This layer does not support any HTML codes inside. If you write any HTML codes, they can mess up your layer.



Before text

The text that appears before the animated text.

Animated text

These texts will keep changing each other over time. Each line represents a single state. If you want to create an empty line, use either of these HTML characters:



⚠️ Warning: The Animated Heading layer can't wrap the Animated Text into more lines. So if you write long texts, they can be cut off on small screens.

After text

The text that appears after the animated text.



You can put a link on the layer. Learn more about the link options at the Link documentation.

Target window

Specifies where to open the linked document.


The rel attribute specifies the relationship between the current document and the linked document.



These are the available text replacing animations.

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.


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.



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

CSS Class

You can add a custom CSS class, that will be on the h or div tag.


Use the state switcher, to change the style of the animated/normal text.


Learn more about the styling options at the Layer Typography & Design and Layer Style documentation.


Learn about the animations at the Animation documentation.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.