Creating the simplest of SimpleTweens

To begin my tutorials of the SimpleAnimation library I thought I’d start off with SimpleTween. It’s the workhorse of the bunch, for now ;)

You can view the result here: http://noel.tibbles.ca/demos/tutorials/01.sliding_beer/

You can download the files here,
but it’s STRONGLY recommended to download them from github as they’ll be the latest version: https://github.com/ntibbles/SimpleAnimation

It’s job is to move an element. Simple enough. So here’s how we do it:

  1. Create the basic template for SimpleTween
  2. Learn the basic styles for the tweened element
  3. Code a SimpleTween with the least syntax

Let’s Code!

First thing that’s needed to tween is an HTML file with all the assets required to tween an element.
In the index.html you’ll notice a couple of key areas I’ve added comments to. They are:

  • Styles in the head
  • Included scripts
  • Javascript syntax to instanciate a SimpleTween

Styles

The most important part for the style of the element is that it MUST be positioned either absolutely or relatively.

If it’s not positioned, it won’t work. period.

In the index.html you’ll notice the following code:

img { position: absolute; top:20px; left:20px; }

This simply positions the image absolutely and adds 20px of padding.

Scripts

The scripts that are REQUIRED are the SimpleSynchro and SimpleTween.

The SimpleSynchro is used to create a global timer all SimpleScripts march to. If you accidentally leave in a page, don’t worry, it doesn’t initialize until a tween or timeline is added to the page.

Here’s the code that required:

<script type="text/javascript" src="libs/SimpleSynchro.js"></script>
<script type="text/javascript" src="libs/SimpleTween.js"></script>

Make sure the paths are set for your directory structure.

Syntax

Here’s the most basic syntax you’ll need to get up and running:

SimpleTween.to(document.getElementById("slidingBeer"), 2, { left:500 });

Here’s the breakdown of what’s happening.

  1. Get the element we want to tween: document.getElementById(“slidingBeer”)
  2. How long do we want to take to move it: 2
  3. How far do we want to move it: { left:500 }

That’s it!

Check out the demos on GitHub for more complex examples.

This entry was posted in JS projects, Javascript, tutorials. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>