Motion Effects

     Motion effects are a fantastic addition to any site. When used correctly it adds such an incredible “finishing touch” to the website. It’s important to keep in mind however that getting too over zealous with you motion effects is worst than having no motion effects at all. I’ll give some examples of these motion effects below.

Fade Ins

     I use the fade ins more than any kind of motion effect when it comes to my websites. My reasoning for this is because I feel like they are the most subtle of the motion effects. Motion effects can be a double edged sword. Used correctly they add a wonderful sense of motion to the site. Used without caution and they can completely overwhelm the user, get in the way and make every thing worst. To avoid that fades are an excellent choice. 

Fade In

Fade In Left

Fade In Right

Fade In Up

Fade In Down

Zoom Ins

     Zoom ins are much more “dramatic” then the fade in as described above. For that reason I like to use them sparingly. A good strategy is to use a series of fade ins and then use a zoom in for an element that you want to draw attention to.

Zoom In

Zoom In Left

Zoom In Right

Zoom In Down

Zoom In Up

Slide Ins

     Slide ins are my second favorite style of motion effect after the fade in. The great thing about the slide in is that they are slightly more dramatic than the dade in but I would still put them under the category of a subtle effect.

Slide In Left

Slide In Right

Slide In Down

Slide In Up

Bounce Ins

     Bounce ins are interesting one in that they come in and then continue to move for a little while even after they reach their finishing position. I like to use them if I am working on a site with a younger more youthful or even cartoony feel.

Bounce In

Bounce In Left

Bounce In Right

Bounce In Up

Bounce In Down

Rotating In

     Quite the dramatic eye catching effect here! I think that rotating effects look great when you use several of them together within a close vicinity. Rotating effects are great for creating the sense of a lot of movement. 

Rotate In

Rotate In Down Left

Rotate In Down Right

Rotate Up Left

Rotate Up Right

Additional Motion Effects

     There really is no limit to how many different kind of motion effects that you could implement on your site. In order to get your brain going on thinking of motion ideas take a look at some additional examples below.




Rubber Band


Head Shake





Light Speed In

Roll In