Tag Archives: effects

CoolIris type thing in 30 lines

Mercedes Bend – Physics based banner animation

I don’t usually make banners, but made an exception in this case because it involved doing some challenging code-driven animation. The result is quite nice and won some awards appparently, including NMA Capmaign of the Month.

The line dynamics itself is just Hooke’s law stuff – basic physics. Took some experimentation to get a smooth curve drawn through a series of points (basicaly, the control points of your previous and next points need to be in line).

The cars follow one of the line’s points with differing elasticity and damping, but the real pain in the backside was drawing the dashed line.

Luckily there were some tutorials about this and I found by moving the first drawing point up-screen it creates the animated effect – job done! Check it out on Bannerblog.