Text Animation

is a package of add-ons for Concrete CMS that allows you to create typewriter effects on your website. Utilizing the Typed.js library under the MIT license, Text Animation offers dynamic animations that add interactivity and appeal to your content.

Typed.js is a library that simulates typing. Enter any string, and see how the text is typed at the speed you've set, backspacing what has been typed, and starting a new sentence for each string you've defined. With Text Animation, you can easily customize these effects to suit your needs, adding a unique style and dynamism to the content on your site.

Use Text Animation to enrich your website with dynamic text animations that capture visitors' attention and make your content stand out.

Installation Instructions

• Unzip this file in your site's packages/ directory.
• Login to your site as an administrator.
• Find the "Extend concrete5" page in your dashboard.
• Find this package in the list of packages awaiting installation.
• Click the "install" button.

Text Animation Block Settings

Content type selection:

Choose the type of content you want to use for typewriter animation. You have two options:
- Text strings: Enter text strings you want to animate. Separate them with commas.
- Strings from static HTML (SEO friendly): Place static HTML, and the animation will be generated based on the content of the div tag with a unique identifier ("typed-strings"). Make sure such a div tag exists in your HTML.

Animation settings:

- Typing Speed: Enter the typing speed in milliseconds. The lower the value, the faster the typing.
- Back Speed: Enter the backspacing speed in milliseconds. The lower the value, the faster the backspacing.
- Start Delay: Enter the delay before typing begins in milliseconds.
- Back Delay: Enter the delay before backspacing in milliseconds.
- Loop: Check this box if you want the animation to loop.
- Fade Out: Check this box if you want the text to fade out instead of being backspaced.
- Show Cursor: Check this box if you want the cursor to be visible.
- Cursor Character: Enter the character you want to use as a cursor.
- Smart Backspace: Check this box if you want backspacing to occur only for different characters.
- Shuffle: Check this box if you want the strings to be animated in random order.

Preview and HTML output:

After configuring the animation parameters, you can see the animation preview in the right panel.

Save and publish:

After finishing the configuration, click "Save" to apply the changes.

Demo