Fork me on GitHub


A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content.


Dynamo is the simple way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage. It was created by this guy and can be found on GitHub.


Implementing dynamo with your content involves little setup. Wrap your text in a container, specify the lines you want to cycle through, and start the engine with $('#target').dynamo(). Dynamo works with the help of jQuery. For example:

<p>I wish I could change the text here.</p>

I wish I could change the text here.

<p>I wish I could <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span> the text here.</p>

I wish I could change the text here.

<p>This element is <span class="dynamo" data-lines="not paused." data-pause="true">paused</span></p>

This element is paused.

<p><span id="manual_example" class="dynamo" data-pause="true" data-lines="[click again!],[and again!],[once more!]">[click here!]</span></p>

[click here!]

Later on we have the following...
<script type="text/javascript">
  $('#manual_example').click(function() {
And launch it with... (this is done automatically for you if your include tag is at the end of </body>, but you can use .dynamo() on any target)
<script type="text/javascript">
$(function() {
View our source (it's chock full of examples)


You can customize dynamo using data attributes:

Alternatively, you can pass an options hash - which takes precedence over data attributes - when calling .dynamo() like so:

    delay: 1000,
    lines: ['next text', 'after that', 'even later'],
    callback: function() { console.log('All items have been shown') }

IMPORTANT: Since dynamo automatically initializes DOM elements with class .dynamo, you will not be able to pass options to these elements (data attributes will still work, though). This is because dynamo prevents the user from initializing a dynamo container more than once.

© 2013 Jordan Scales | MIT Licensed | GitHub