jQuery pendulum. Animation around a pivot point

12 August, 2012 by Tom Elliott

If you want to get straight to a working demo showing animation around a pivot point, view the jQuery pendulum animation here

The key to rotating an object element around a pivot point, such as a basic pendulum, is to setup your object (DIV element, or multiple DIVS) within a container element. The container acts as the pivot object that we animate and the child element(s) are offset to the location of the pivot centre. In this example I’ve used a single image as the child object – the ball and string – and absolutely positioned the top part of the pendulum to the centre of the container DIV.

The HTML and CSS setup for pendulum setup are as follows:

#pendulum-child {
	width:105px;
	height:623px;
	background-image:url(pendulum.png);
	position:absolute;
	left:-41px;
	top:10px;
}

#pendulum-parent {
	width:22px;
	height:22px;
	background-image:url(pendulum-pivot.png);
}

 

<div id="demo-container">
	<div id="pendulum-parent">
    	<div id="pendulum-child"></div>
    </div>
</div>

As you can see the layout is very simple; two divs for the pendulum object – one acting as the object itself and a container div acting as the pivot point.

Next we create the animation in jQuery and all we need are three jQuery files. jQuery (obviously), ‘jquery css transform’ which allows us to do basic CSS3 transforms including translate, rotate and scale and the ‘css transform animation’ which, as the name suggests, allows for these transformations to be animated:

1. jQuery
2. jQuery css transform plugin
3. jQuery css transform animation plugin

Using the regular jQuery ‘animate’ command, combined with the ‘rotate’ property, we can animate and rotate a html element as follows:

$('#divname').animate({rotate: 20},2000, "swing");

Where “20” is the degrees to rotate the div by (positive or negative), “2000” is the time in milliseconds and “swing” is the easing mode. jQuery has two animation easing modes. Linear and Swing, with swing being the default. Swing easing – or “slow fast slow” – is ideal for pendulum motion. The pendulum starts moving slow at the start of its swing, is fastest halfway through and slows down towards the end of the swing.

The full jQuery code for the pendulum animation is below and only a few lines are required.

<script type="text/javascript">
(function($) {
        $(document).ready(function() {
			var rotation = 30;
			var swingtime = 1600;

			function init() {
				$('#pendulum-parent').animate({rotate: rotation}, 0, function () {
					$('#pendulum-parent').css("display", "block");
					rotation *= -1;
					pendulumswing();
				});
			}

			function pendulumswing() {
				$('#pendulum-parent').animate({rotate: rotation},swingtime, "swing", function(){
					 rotation *= -1;
					 pendulumswing();
				});
			}

			init();
	});
})(jQuery);
</script>

There’s two variables; ‘rotation’ which sets how high the pendulum should swing and ‘swingtime’ which is the length it takes to complete one swing. The init function sets the initial position of the pendulum by instantly rotating it to it’s start position (before displaying it) and the swing function which is called at the start of each swing, reversing the direction of the rotation as it does so.

Important to note that the rotation transformation is not compatible with Internet Explorer 8 and below or really old versions of Safari and FireFox. As these older browsers are declining in market share, I’m seeing more of these kinds of transformations being used. One of the best examples for pivot point animation is how Apple use CSS3 transformations on their iPhone page to create great transitions, which uses plenty of images rotating around pivot points. If you try this in IE 8 however, a standard slider appears instead.

Update: FireFox 16 handles JS transformations differently, so if your jQuery animated rotations are greatly exaggerated, you should try updating to the latest version of the plugin: https://github.com/zachstronaut/jquery-animate-css-rotate-scale

Update 2: A strange bug has sometimes been causing the pendulum to freeze occasionally mid-swing. This can be fixed by changing the ‘swningtime’ variable to an odd number – e.g. 1603 instead of 1600. Not 100% sure why this occurs but probably has something to do with the rotational calculations being set to zero between the positive and negative rotational swing.

Update 3: Added a ‘swings’ variable to get the pendulum to come to a rest after a certain number of swings.

---

---