Typed.js

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS INIT function of the plugin.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

            
              <script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of text animation (typing)
                  var typed = new Typed(".u-text-animation.u-text-animation--typing", {
                    strings: ["more professional.", "perfect in every way.", "astonishing."],
                    typeSpeed: 60,
                    loop: true,
                    backSpeed: 25,
                    backDelay: 1500
                  });
                });
              </script>

Your company will look

                  
                    <p>
                      Your company will look
                      <strong class="u-text-animation u-text-animation--typing"></strong>
                    </p>

Example #1

Your company will look
Attract more visitors, and win more business with Front template.

                  
                    <p>
                      Your company will look
                      <span class="text-primary">
                        <strong class="u-text-animation-v1 u-text-animation-v1--typing"></strong>
                      </span>
                      <br>
                      Attract more visitors, and win more business with Front template.
                    </p>

                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of text animation (typing)
                        var typed = new Typed(".u-text-animation-v1.u-text-animation-v1--typing", {
                          strings: ["more professional.", "perfect in every way.", "astonishing."],
                          typeSpeed: 60,
                          loop: true,
                          backSpeed: 25,
                          backDelay: 1500
                        });
                      });
                    </script>

Example #2

We help

                  
                    <div class="bg-primary p-3">
                      <h2 class="text-white font-weight-normal">
                        We help<br>
                        <span class="text-warning">
                          <span class="u-text-animation-v2 u-text-animation-v2--typing"></span>
                        </span>
                      </h2>
                    </div>

                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of text animation (typing)
                        var typed = new Typed(".u-text-animation-v2.u-text-animation-v2--typing", {
                          strings: ["building brands.", "dealing with complexity.", "win more business."],
                          typeSpeed: 60,
                          loop: true,
                          backSpeed: 25,
                          backDelay: 1500
                        });
                      });
                    </script>

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="".