Integrating the Typed.js Code Library in a Rails Application
This guide examines how to integrate typed animations into a Rails application by implementing and leveraging the Typed.js code library.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

It looks like the Typed Gem is deprecated, however this is such a small library we really don't need a gem for it. The steps for implementing the Typed.js library are as follows:

You can access the Github page and grab the raw JavaScript code here.

Once you have that, you can create a new file in the application, such as:

touch app/assets/javascripts/lib/typed.js

If you haven't already created a lib directory, you can do that by running:

mkdir app/assets/javascripts/lib

Copy the raw JavaScript code from the Typed.js repo into the new typed.js file. And then call it from the application.js file, like this:

//= require lib/typed

Now let's create some some coffeescript code file, we'll call it typed-implementation.coffee that will perform the 'typing':

ready = ->
  Typed.new '.element',
    strings: [
      'Software development is the closest concept we have to magic.'
      'It\'s my goal to ensure that anyone with a passion for coding can become a true programming artisan.'
    ]
    typeSpeed: 0
  return
$(document).ready ready
$(document).on 'turbolinks:load', ready

And then call it right below the call to the typed.js library in the application.js file:

//= require lib/typed
//= require lib/typed-implementation

Now, all we have to do it add a new span tag that contains the element class that our Coffeescript code is looking for:

<div class="inner cover">
  <h1 class="cover-heading">Welcome to my online home.</h1>
  <p class="lead">
    <span class='element'></span>
  </p>
  <p class="lead">
    <%= link_to "About Me", about_me_path, class: "btn btn-lg btn-secondary" %>
  </p>
</div>

And you should now have a great looking 'typed' element on your site!

Resources