Using npm package with $w

Ask the community
,
1

Hi, I have an id $w(‘text9’) on my Home page and want to use this npm package that I can’t link to, so here’s how the code looks like with DOM:

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
});

typewriter
  .pauseFor(2500)
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .deleteChars(10)
  .pauseFor(1000)
  .start();

However, I’m having trouble figuring out how to do this with $w instead of DOM.

I was thinking of doing something like:

import Typewriter from 'typewriter-effect/dist/core';

$w.onReady(function () {
    // Write your JavaScript here

    // To select an element by ID use: $w("#elementID")

    // Click "Preview" to run your code
    
    var app = $w('#text9')

    var typewriter = new Typewriter(app, {
    loop: true,
    delay: 75,
    });

    typewriter
        .pauseFor(2500)
        .typeString($w('#text9')).text
        .pauseFor(300)
        .deleteChars(10)
        .pauseFor(1000)
        .start();
});

Options:

1146×1410 243 KB

Methods:

1174×932 180 KB

2

Try adding something to the end of your text element so that it returns a string.

Something like this -

var app= $w('#text9').text
3

I don’t think you can use this NPM because it needs to manipulate the DOM. You can use this NPM if you use a custom element.