How to embed an animated typewriter effect from CodePen without changing my SquareSpace template CSS

Site URL: https://codepen.io/hi-im-si/pen/DHoup

I've tried copying this codepen to my SquareSpace website without success. I want to embed a typewriter effect into a paragraph on my "Nolan" template site, without changing the CSS (colors and font) for that template. In the attached screen shot of my site, I want to change the highlighted word "space" to an animated typewriter effect that will type and then delete the names of various types of spaces (i.e. event venue, restaurant, retail space, etc.). 

Where do I paste the HTML versus the JS? Do I need to I need to copy and paste CSS to match my template site, or will SquareSpace automatically do that for me?

Additionally, while trying to figure out where to paste the JS, a syntax error kept popping up for line 1 of this script: 

var TxtType = function(el, toRotate, period) {

Can anyone spot the error here?

Thank you so much for any help you can provide! I'm a newb with a vision, but no know-how yet.

On 1/9/2021 at 1:51 AM, alaynee said:

Site URL: https://codepen.io/hi-im-si/pen/DHoup

I've tried copying this codepen to my SquareSpace website without success. I want to embed a typewriter effect into a paragraph on my "Nolan" template site, without changing the CSS (colors and font) for that template. In the attached screen shot of my site, I want to change the highlighted word "space" to an animated typewriter effect that will type and then delete the names of various types of spaces (i.e. event venue, restaurant, retail space, etc.). 

 

Where do I paste the HTML versus the JS? Do I need to I need to copy and paste CSS to match my template site, or will SquareSpace automatically do that for me?

 

Additionally, while trying to figure out where to paste the JS, a syntax error kept popping up for line 1 of this script: 

var TxtType = function(el, toRotate, period) {

Can anyone spot the error here?

 

Thank you so much for any help you can provide! I'm a newb with a vision, but no know-how yet.

Use this extension, is has an extra type writing block with detail steps that help

Squarespace Ninja Kit Extension - Chrome Web Store (google.com)

You can also remove the extension after created the block to save the computer resource

Add a Code Block > Paste this Codepen code

<h1>
  <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Si.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'>
    <span class="wrap"></span>
  </a>
</h1>
<style>
 .ttype * { color:#fff; text-decoration: none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };
</script>

Did you get it to work? I am having the same problem. 

Yes, the Ninja kit required more editing to match the aesthetic of my site, but the CodePen from tuanphan worked perfectly! Now, I'm just trying to figure out how either insert the typewriter effect code block into my static text block, or at least bump the code block right up against the static text block so that the typewriter effect looks integrated into the paragraph. Tuanphan, any ideas? Thank you so much!

On 1/23/2021 at 3:10 AM, alaynee said:

Yes, the Ninja kit required more editing to match the aesthetic of my site, but the CodePen from tuanphan worked perfectly! Now, I'm just trying to figure out how either insert the typewriter effect code block into my static text block, or at least bump the code block right up against the static text block so that the typewriter effect looks integrated into the paragraph. Tuanphan, any ideas? Thank you so much!

Hi dear,
Did you solve your problem?
If it's not fixed please contact me via DM to check and help you!

Best,
Leopold

Hi,

I am having trouble getting the typing effect to work properly for one of my sentences on my squarespace.

I am using this:

#block-843f29506fbf61187921 {
  overflow: hidden
    ; 
  border-right: .15em solid pink ; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: pink
    ; }
}

And it seems to be pushing the words to the left side of the screen and the cursor is simply moving to the right side of the screen in a typing motion to give space for the sentence to go on one line. It is not revealing the "types sentence" letter by letter, but rather just pushing and  moving to the right. How do I get the typing effect to type the sentence letter-by-letter and actually hide the letters that havent yet been "typed"?

Thank you in advance,

Brianne

brianne.alexis113@gmail.com

On 2/24/2021 at 12:57 PM, Brianne_113 said:

Hi,

I am having trouble getting the typing effect to work properly for one of my sentences on my squarespace.

I am using this:

 

#block-843f29506fbf61187921 {
  overflow: hidden
    ; 
  border-right: .15em solid pink ; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: pink
    ; }
}

 

And it seems to be pushing the words to the left side of the screen and the cursor is simply moving to the right side of the screen in a typing motion to give space for the sentence to go on one line. It is not revealing the "types sentence" letter by letter, but rather just pushing and  moving to the right. How do I get the typing effect to type the sentence letter-by-letter and actually hide the letters that havent yet been "typed"?

Thank you in advance,

Brianne

brianne.alexis113@gmail.com

Have you solved this yet?