Typed.js

Decorate your website with Typed.js is a library that types, allowing to showcase more texts in a sentence.

How to use?

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

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

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

              
                <script src="./assets/js/hs.typed.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 = $.HSCore.components.HSTyped.init(".js-text-animation");
                  });
                </script>
              
            

Basic example

                    
                      <p>
                        Your company will look
                        <span class="js-text-animation"
                            data-hs-typed-options='{
                              "strings": ["more professional.", "perfect in every way.", "astonishing."],
                              "typeSpeed": 60,
                              "loop": true,
                              "backSpeed": 25,
                              "backDelay": 1500
                            }'></span>
                      </p>
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/typed.js/