0

I have tried to add on typed text animation in my Magento 2 cms page. I am using typed.js

Does anyone have an idea of how to use typed.js in Magento2?

7
  • Hi Bharat , please check my way & let me know if you face any issue – MR.R DNATH Jun 5 '20 at 6:43
  • Hi, I did as you suggested but seems not working. in console shows an error. prntscr.com/suarmp – Bharat Sevra Jun 5 '20 at 10:56
  • I think you have made some mistake in require-config.js file – MR.R DNATH Jun 5 '20 at 11:12
  • can you share requirejs-config.js file – MR.R DNATH Jun 5 '20 at 11:33
  • var config = { 'paths': { "typejs":'node_modules/typed.js/lib/typed', } }; placed in Magento_Theme folder in the child theme – Bharat Sevra Jun 5 '20 at 11:39
1

Here is the example to use typed.js.

create requirejs-config.js inder Magento_Cms module or theme root path like

app/design/frontend/Packagename/themename/requirejs-config.js

var config = {
    'paths': {
        "typejs":'node_modules/typed.js/lib/typed',
    }
};

That means your's node module location will be lib/web/node_modules

Next step to add html and script into your cms page. --> This is for demo purpose, you should use script into phtml file.

<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
<script>// <![CDATA[
    require([
        'typejs',
        'jquery'
    ], function (Typed,$) {
            $(document).ready(function(){
            var options = {
                     stringsElement: '#typed-strings',
                    typeSpeed: 40
                   }
             var typed = new Typed("#typed", options);
        });
    });
    // ]]>
</script>

enter image description here

1
  • Worked like a charm! thanks :) – Bharat Sevra Jun 8 '20 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.