Delete and write text animation - can this be done?

Design help Animations & Interactions
1

Hi all,

Is it possible to do something like this on Webflow? https://joshglucas.com/

I’m looking specifically at the text that changes from: Interaction → Product → Visual → UX, as if the text is being deleted and written again.

I found this: JavaScript Animated Typing with Typed.js | by Matt Boldt

Thanks for your help, everyone.

/Rasmus

2

Hey, @RasmusDesign this is not possible to achieve natively on webflow however you can add custom code to do that.

You can clone this and just replace strings: ["Hello, my name is John.", "Hello, my name is Lisa.", "Hello, my name is Beetlejuice."], to your desired strings.

Hope it helps :peace_symbol:

1 Like
3

Hi Sachin,

I actually solved it myself just looking at the documentation on the typed.js GitHub documentation. Check it out: rasmusdesign.webflow.com

Thanks though.

4

I’m glad that you resolved it, All the best for your future endeavors :peace_symbol:

5

Awesome!

Would you be able to post your solution? or a read-only link?

6

Hi @Dave_Birnie. Of course. :slight_smile:

Here’s a read-only link to my site: Webflow - Rasmus' Portfolio Site

Here’s the custom code I added to the Footer code:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

    <script>
    	var typed = new Typed('.typed-text', {
        strings: ['pixel-perfect', 'product', 'interaction', 'UX', 'digital', 'UI'],
        typeSpeed: 45,
        backSpeed: 20,
        loop: true,
        showCursor: true,
        cursorChar: '|',
        backDelay: 1300,
        startDelay: 0
      });
    </script>

In the above code “.typed-text” is a reference to the class called “typed-text” located in the Hero Content Div as seen in the below picture. The “typed-text” class is actually just a span inside the paragraph subtitle, in which I deleted all the text, so that no text is present before the script starts running.

image
image1278×706 49.1 KB

I have no idea why, but for some reason there seems to be a bug in which it skips the first string in the array. As you can see on rasmusdesign.webflow.io, ‘pixel-perfect’ is not present on the site. Also, it is worth noting that you have to publish the site to see it in action. Preview doesn’t work for this.

Hope this helps.

PS. If anyone knows why it’s skipping the first string, please let me know.

/Rasmus

2 Likes
7

@RasmusDesign very cool. I have never injected code before, so I am not exactly sure where to navigate to read everything… but for some reason whatever is calling your script is starting the array at 1. Arrays start at 0, so if you do have a call imbedded somewhere, does it show what is being called first?

Either it’s initializing it at 1, or it’s going through the loop prior to typing the first word (this is often due to a while statement instead of an if statement).

8

I don’t think this is the issue… but I wonder if it’s because you nest the function script in the footer vs header. In his example site, he has it sitting in the header, where as yours is in the footer.

Footer is better for HTML rendering though… and your site is loading very fast… so if it slows it down too much, I would just rearrange your array (put the last word you want at the beginning of the array and first word in position 2 of array [technically 1])