Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

QUICK TIP

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Typewriter Add-On, first add the "revolutions-addons" folder into your production site:

Next, add the Typewriter stylesheet and script. The script should placed below all other scripts on the page.

<!-- TYPEWRITER STYLESHEET -->
<link rel="stylesheet" type="text/css" href="revolution-addons/typewriter/css/typewriter.css" />

<!-- TYPEWRITER SCRIPT -->
<script type="text/javascript" src="revolution-addons/typewriter/js/revolution.addon.typewriter.min.js"></script>

Next, assign a variable to your slider's main settings script, and then call the Typewriter Add-On as shown in the following example.

var slider = jQuery('#rev_slider_1').show().revolution({
 
    /* **************************** */
    /* REGULAR SLIDER SETTINGS HERE */
    /* **************************** */
 
});
 
/*
    Instantiate the Typewriter AddOn
    Args: jQuery reference, slider reference (assigned above)
*/
RsTypewriterAddOn(jQuery, slider);

Finally, add the "data-typewriter" attribute to your text-based Layer.

Text and Line-Breaks Only

Nested HTML is not supported, but <br> tags can be included with your text.

blinking
  • on
  • off
Activate's the blinking cursor.
blinking_speed
    The cursor's blinking speed in milliseconds.
    cursor_type
    • one
    • two
    Use "one" for the " _ " character, and "two" for the " | " character.
    hide_cursor
    • on
    • off
    Stop/hide the blinking cursor when/if typing completes.
    speed
      The typing speed in milliseconds.
      looped
      • on
      • off
      Continuously repeat the typing sequence(s).
      start_delay
        A delay in milliseconds before the typing officially begins.
        linebreak_delay
          A delay in milliseconds each time an included <br> tag is reached.
          background
          • on
          • off
          Set to "on" if the Layer includes a background color. Otherwise leave at "off".
          word_delay
          • on
          • off
          Activates the word-delay pattern option.
          delays
            Word delay patterns, written as: "for each x words, delay by x milliseconds".
            sequenced
            • on
            • off
            Activates the sequenced lines option.
            deletion_delay
              A delay in milliseconds before the current line is deleted.
              deletion_speed
                The deletion speed in milliseconds.
                newline_delay
                  The delay before each new line is typed.
                  lines
                    Additional lines of text that will be typed sequentially (set "sequenced" above to off for no sequenced lines).

                    <!-- TYPEWRITER EXAMPLE W/ SEQUENCED LINES -->
                    <div class="tp-caption tp-resizeme Sports-DisplayFat"
                     
                         data-x="100"
                         data-y="100"
                         data-frames='[{"delay": 0, "speed": 300, "frame": "0",
                                        "from": "opacity: 0;", "to": "o:1;",
                                        "ease": "Power3.easeInOut"},
                                       {"delay": "wait", "speed": 300, "frame": "999",
                                        "to": "auto: auto;",
                                        "ease": "Power3.easeInOut"}]'
                     
                        data-typewriter='{
                     
                            "blinking": "on",
                            "blinking_speed": "500",
                            "cursor_type": "one",
                            "hide_cursor": "off",
                     
                            "speed": "30",
                            "looped": "on",
                            "start_delay": "1000",
                     
                            "linebreak_delay": "60",
                            "background": "off"
                     
                            "word_delay": "on",
                            "delays": "2|250, 4|500",
                     
                            "sequenced": "on",
                            "deletion_delay": "1000",
                            "deletion_speed": "20",
                            "newline_delay": "1000",
                            "lines": "Line Number Two Text, Line Number Three Text",
                     
                        }'
                     
                    >Line Number One Text</div>

                    Popular Solutions

                    [ess_grid alias="wp-popular-solutions"]
                    Impressum | Datenschutz