Animated letters
shortcode

Show information letter by letter with great animation. The most unusual way to present text.
Read documentation
Usage frequency
60%
Preset amount
68%
Customizability
89%

Available options

Default code: [dfd_letter_effects module_animation="transition.slideUpBigIn"]

Style – Choose between 8 preset styles;

Alignment – Specify the alignment for animated letters shortcode;

Animation – Choose between 14 preset animation effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Content – Set text string which should be animated. You can add as many strings as you need;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family;

Responsive – Specify the font size, line height and letter spacing for different screen resolutions.

Default styles

Samples of preset styles without custom changes
Jump Up style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Fade Away style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Slide Left Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Jump Down Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Letter's Flip Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Word's Flip Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Vertical Flip Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.

Colored Line Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam suscipit posuere dui. Proin vehicula neque purus.

Phasellus nulla leo, congue id hendrerit eu, rhoncus id.