MooTools Fun with Fx.Shake

By  on  

Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter MooTools JavaScript and Aaron Newton's Fx.Shake effect.


<div id="shaker">
	<a href=""><img src="/demo/mootools-shake.png" alt="David Walsh Blog" /></a>

Just a DIV with my "call out" image and link inside.


#shaker		{ position:fixed; top:10px; right:10px; width:299px; height:253px; display:none; }

I want to position the code in the top right corner of the page so it's always visible.

The MooTools JavaScript

/* shake baby! */
window.addEvent('domready',function() {
	var shaker = $('shaker');
		opacity: 0,
		display: 'block'
	/* event */
	window.addEvent('load',function() {
		/* fade in */
		var x = function() { shaker.fade('in');};
		/* shake */
		var y = function() { shaker.shake('margin',5,3); };

Once the page loads, I wait 1 second before fading in the element. I then create a function that periodically shakes the element 5 pixels in distance 3 times. That's it!

It's important not to make your image too large or shake too much. There's a fine line between a solid attention-getting element and an annoying disturbance that makes users run for the hills. I should also mention that this class will need to be updated for MooTools 2.0.

As always, MooTools is shaking up the web!

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    MooTools Zoomer Plugin

    I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is...

  • By
    MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...


  1. S4l1h

    Nice work

  2. I think you should stop shaking after 1 or 2 times, is getting annoying, and you only get that effect that makes me close the god damn site because of the too much yelling for attention :)

  3. rpflo

    Sweet. I can pick this apart and see how the real developers do it.

    I made something similar a while back for authenticating users:

  4. rpflo

    @ rborn

    It’s just a demo. I’m sure we all agree with you :)

    There are plenty of smart ways to use this effect.

  5. christian


    that’s great work! But I use jQuery, so I is there the option to make the same effect with this framework?

    Best Wishes from Germany,


  6. peter

    If you like this I know a <blink> tag that you’d love!

  7. @christian: Come back tomorrow.. :)

  8. @peter: I would disagree…because isn’t cross-browser compatible. :) In all honestly though, I think this is a touch classier.

  9. Note that MooTools 2.0 will just have a shake equation, so you’ll just use Fx.Morph without having to have a separate effect… That’s why I never released this really…

  10. I made my own version of the shake effect, not as fancy as Aaron’s code, but it’s also kinda cool, more random motion, which would be better discribed with ‘vibrate’

  11. eli

    this is a nice,

    im not sure if this is the right place to ask this but:

    can someone let me know how i can download the full mootools library, the core and the more together, as i started reading the mootools book and it does recommend to get the full library – though im not sure how

    once more (i understand this may not be the right place for this question) so im really sorry

  12. If you look in the book, there are instructions on page 2 and 3 with screenshots and everything. Just visit and download away. Note that at present you can’t get the core and -more together in one single file from the site. You’ll have to download two and include them in your page.

  13. eli

    thanks Aaron Newton,

    the thing that confused me what that i thought there was a all in one file download,

    thanks again

  14. Good thing. I could have used this. but its breaking in IE6. try it out….


  15. It’s posssible with this demo, build this effect?
    How can I made the movement of the background? the boat…

    and almost the same effect…
    with the cloudy sky!!???

    Any idea??

  16. 404 Page that doesn’t exist.

    Note: This site using david’s script extensively.
    Thanks a lot.

  17. Steven Schrab

    This reminds me of the OS X bouncing dock icons when you launch them. I think I’ll add something like this to the U2U Mail icon on the forum I run.

  18. andrea


    Thanks David, for your interesting articles!!

    I found you while I was searching about shake effects. Concretely, I’m searching how to make the window object shakes!

    All codes I found were so odd that didn’t work properly cross-browser, you know … I’m so exhausted of testing ancient code!

    If someone knows how to do this effect, I’d like you share it with all of us!

    Thanks a lot!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!