Call us on 01494 614600 Client Login

Javascript animation and motion equations

> View all blog entries

Published | 16.08, 8th of August 2008, by Jay Vincent | Technical

Recently, I've been looking at the way I can improve and optimise my javascript animations.

A good example would be the 'Apply for job' scroll down on - clicking the apply for job scrolls a hidden form into view - the scroll is a continuous motion with no acceleration, no deceleration, not even a time parameter. I simply increment the height of the element until it reaches its DOM scrollHeight property.

I've always wanted to script a smooth accelerate/decelerate toggle function, so in a little bit of free time I got to work. I started by reading the research of one Scott Schiller, who's javascript animation tutorial raises some very interesting points on CPU-usage and the most efficient methods for animation looping.

I decided to use the setInterval method with a 25 millisecond time parameter, essentially creating a framerate of 40 frames per second for the animation.

For the motion, I used the trigonometric function Math.sin(x) between -90 and 90 degrees, which gives a smooth trough to peak curve - I extracted the y value, and manipulated it to be within a set range, instead of -1 and 1. (I set the range from 0 to 200 in my example). I then applied this value to an objects attribute.

Perhaps best to view the example, the red box is following the sine curve, the blue box is following the cosine curve, and out of curiousity - I've set the green box to follow the tan curve.

I see quite a lot of potential in this - smooth colour fades, toggle scripts, bounce effects - I even decided to have a play with gravity effects using Math.exp(-x) (example) - bit this needs a bit more attention I feel.

Sure wish I could remember more of my A level maths...

1 comment | Make a comment (Average rating | none)


Replied | Jay Vincent - 15.57, 29th of August 2008

The first use of this stuff - click about on the links and watch the scroll motion of the content.

Post a comment

Your name *
Your email *
(will not be published)
Your comment *

Blog Entries

Blog Topics

Business (15)
Design (19)
Marketing (10)
Random (22)
SEO (15)
Technical (9)




Featured Case Studies

Hampstead and Highgate Festival

Hampstead and Highgate Festival

Working with the team to deliver a re-brand in keeping with the event's heritage.

> View case study

Invest in Bucks

Invest in Bucks

A council-backed inward investment website for Buckinghamshire, by the Bucks Economic & Learning Partnership.

> View case study

now! microsite for Beadle & Crome

now! microsite for Beadle & Crome

A microsite showcasing specialist hulsta furniture for retailer, Beadle and Crome.

> View case study


Share this page

If you found this page useful, perhaps you'd like to bookmark it or share it with the world!

FavouritesAdd to Favourites EmailEmail page to a friend

DiggitDigg it FacebookFacebook MyspaceMySpace GoogleGoogle

Latest News RSS Feed

> Haywards project launched

Published | 16th of July 2010

> Invest in Bucks launched

Published | 8th of July 2010

> Boycott website completed

Published | 17th of June 2010

Artlines Media a full service creative design agency based in High Wycombe.

We specialise in branding & identity design, website design, development & production, e-commerce, content management systems, search engine optimisation, print design and email marketing campaigns.

Get in touch

From exciting start-ups to corporate brands, our team is always eager to work on the best projects with the best clients.

Artlines Media Ltd
69 Cressex Enterprise Centre
Cressex Business Park
Lincoln Road
High Wycombe
HP12 3RL

Telephone: 01494 614600
Fax: 01494 980243