Typed.js Create type writer effect in your app!

Hey all,

Just thought I would share something I adapted to create a typing effect in my app. Just add the code to an HTML element and click the iFrame button. Take a look here Typed.js Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.6/typed.min.js"></script>
<script>
	$(function(){
		$(".element").typed({
			strings: [ "Notarize Your Documents Online", "Submit, Review and Schedule To Sign From Anywhere!", "With a Registered Private Notary It's Easy and Secure"],
			typeSpeed: Math.floor(Math.random() * (50 - 35)) + 35,  // typing speed can be set as a number or in this formula to randamize 'Math.floor(Math.random() * (max - min)) + min' 
			backDelay: 2500, // pause before backspacing
            loop: true, // loop on or off (true or false)
			loopCount: false, // number of loops, false = infinite
		});
	});
</script>
<style>
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
body {
  font-family: "Open Sans";
  background-color: transparent;
  color: #252525;
  font-weight: 300;
  font-size: 38px;
  overflow: hidden;
  text-align: center;
  }
</style>

<span class="element"></span>

@emmanuel would be nice if this is supported natively within the text element! Just an Idea

6 Likes

Love it. I actually saw this in a Bubble showcase app and I was wondering how they did it.
Thanks!

What would be great is to convert this into a plugin. That’s the whole point of opening the platform…

1 Like

Would love to but don’t really know how. Waiting for someone to pitch in and at least provide a tutorial or something

Hey @AliFarahat and @emmanuel… I had a go at doing that. I just added this post to the forum:

Let me know what you think.

3 Likes

The demo app wouldn’t work for me… gives error “missing element”

Great spot… fixed :slight_smile:

Hey! works great now! Impressive response time :crazy_face:

I would love to see how you built the plugin and/or source code… i’d like to create a similar plugin but for RSVP (Rapid Serial Visual Presentation) text display for a speed reader app, based on javscript code like this: https://github.com/lordvon/SpeedyReader

This was my first plugin and definitely not one to follow. Although it gets the job done, the coding is really bad. I did not understand the plugin editor when I created this, and was pretty new to JS. But you can see the code here.

My advice if you want to build out a plugin is to first of all get it working in CodePen or something similar. From there you can simplify it ready for Bubble, and make a plan for moving the code across into the pre-defined blocks (Initialise, Update etc.)

I started this off for you at the link below. The JS code was using jQuery to grab the text and settings from HTML input elements… in Bubble you will want the text and settings to be available through fields or exposed states… so I have cleared them out of both the HTML and JS and just put random values in for now.

https://codepen.io/edbutcher/pen/GyjbBv

Can maybe take a further look at this in the new year for you. Have a play and see how you get on. Remember you can see the code that sits behind all free plugins on this page … find a couple of popular, non-API plugins (they won’t help), and take a look at:

  1. how they use instance.canvas to push things to the page
  2. how they pull in Bubble user data, and settings from the property editor using properties.random_field_name
  3. how they store values in the instance.data object, instead of creating ad-hoc variables

Once you’ve got your head around those things you’re 90% of the way there.

Ed

2 Likes

how can I use it on a multi line editor?

I think You need to add loop control in it also.