Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Graphics In Motion

Advertisement

Graphics doesn’t need to be static or fixed: it can float, jump, fly, dance around and transform in different forms. Once you set visual elements in motion, you can achieve stunning results which would be far too difficult to achieve otherwise. And in fact, there are a number of stunning examples of how this can be done.

The so-called motion graphics is often used in ad spots, music videos and movies. However, sometimes it can also be used for data visualization or live installations (e.g. on buildings). In all these cases designers have a huge space to explore their creativity.

In this post we present some excellent examples of videos in which graphics are set in motion. In most videos graphics dominates, but it can also support the content.

You might want to take a closer look

  • at the category Monday Inspiration where we’ve covered some graphic motion works over the last months,
  • and particularly at the article Typography in Motion1 which describes what effects can be achieved once the letters are set in motion.

Graphics In Motion Link

Feet Want Out2 Link

Well, that’s pretty colorful. You don’t have to be shrooming to experience mind bending psychedelicalness. See what the world looks like through the perspective of a day dreaming foot. Interesting concept, excellent execution.

Feet Want Out3

Sonaka Delivery Link

That’s what can come out of a simple water drop. Stunning.

Screenshot

The War Link

“Design-infused storytelling. We wanted to portray the struggles between conformity and individuality; the games we play in our own minds; being a pawn in society. The artistry ultimately stems from taking two contrary things and making a third something from their collision.”

Screenshot

The Hours Link

So freaky, yet convenient and fascinating. Notice how the music perfectly fits into the scene. A music video production by Jonas Odel. [via MotionGraphics4]

Screenshot

Lovebirds Link

Unique, beautiful and yet so simple. A story of two birds in this advertising spot for Motley Bird.

Screenshot

We Work For Them Installation Link

A graphic motion piece prepared for the We Work For Them promo.

Screenshot

Underground Spot Link

An advertisement of a metro. Take beneath the surface.

Screenshot

Natl.tv5 Link

The “Attractive Prices” spot for British Airways. Very gentle, soft play of colors. Two 30-second spots.

Attractive Prices6

Siemens Blocks Link

Thousands of smallest blocks come up together to build the entire world. An ad spot for Siemens, by MassMarket studio.

Screenshot

Art Connects spot7 Link

Independently moving screens comprise to make one large canvas in the plaza — a commons that is the gathering place for all ages. Reflecting its context the pieces are about imagination as portrayed by art and music, core experiences that connect us all.

Superfad8

Samaritans: Vectorscope Link

The transformation effects are quite impressive. Great attention to detail.

Screenshot

LanternFish Link

A compact graphic motion reference on lantern fishes. Do you know how Ipnops Murrayi in Gulf of Mexico looks like? By Adam Gault.

Superfad

Zune Arts — Masks Link

One of the numerous Zune graphic motion movies, directed and produced by Pandapanther.

Screenshot

Guiness Dot Link

What can come out of a simple dot? A line, a drawing, a masterpiece, a world… a beer! By Psyop. [via MotionoGrapher9]

Screenshot

Smirnoff Commercial Link

Excellent use of 3D in this 60-second advertising spot for Smirnoff.

Screenshot

Rhythm of Lines10 Link

A simple and beautiful ad spot for Audi. Simple lines can sometimes suffice. By BBH.

Screenshot11

Magnetosphere Link

Probably one of the most colorful music visualizations ever created.

Screenshot

Sources and Resources Link

Mograph Wiki12

MoGraph Forum13

Footnotes Link

  1. 1 /2007/11/19/monday-inspiration-typography-in-motion/
  2. 2 http://threeleggedlegs.com/repertoire/havaianas/
  3. 3 http://threeleggedlegs.com/repertoire/havaianas/
  4. 4 http://motionographer.com/2007/06/19/jonas-odell-the-hours/
  5. 5 http://www.natl.tv/
  6. 6 http://www.natl.tv/
  7. 7 http://superfad.com/player.php?project=25&item=68
  8. 8 http://superfad.com/player.php?project=25&item=68
  9. 9 http://motionographer.com/2008/01/11/guinness-dot/
  10. 10 http://www.beam.tv/beamreels/reel_player.php?jqbvsptxVy&resize=1
  11. 11 http://www.beam.tv/beamreels/reel_player.php?jqbvsptxVy&resize=1
  12. 12 http://www.mographwiki.net
  13. 13 http://mograph.net/board/index.php?s=03fa4e25236eb34c205ba0605b701d2e&showtopic=14279
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Really cool post! The War is so cool! and the Smirnoff commercials, too.

    -1
  2. 2

    The British Airways spots are really cool and nice.

    0
  3. 3

    Magentosphere is stunning! Thanks for another great list.

    0
  4. 4

    Christopher Hill

    January 28, 2008 2:30 am

    Some pretty cool animations there.

    0
  5. 5

    Raj from BlogHash.com

    January 28, 2008 2:48 am

    Very nice post! How do you collect such good things for your post?

    0
  6. 6

    Nice Collection. Fantastic work. Expecting lot from u

    0
  7. 7

    Chris Vincent

    January 28, 2008 4:28 am

    Looks like we’ve got another kicker of a post… It seems as though these guys have way too much time on their hands to sort through a good collection of info the bring out the best :D

    0
  8. 8

    Great stuff as usual.

    Love quirky animations, will have to get round to updating my portfolio with some soon.

    cheers

    0
  9. 9

    This is one of the best post of your blog posts, i like it very much. You have nicely designed your website with user friendly nature. Its very nice to read it. Thanx for the post.

    website designing

    0
  10. 10

    Once again you’ve come up with high quality goods! Thanks!

    0
  11. 11

    I love monday inspirationnnnnnnnnnnnnnnnnnnnnn

    0
  12. 12
  13. 13

    Awesome stuff in deed :D

    0
  14. 14

    wow!

    0
  15. 15

    Beatiful list! thanks…

    0
  16. 16

    I love your site, it is one of my top inspirations of all-time, but the English major in me needs very badly to point out that:

    In this post we present some excellent examples of videos in which graphics is set in motion.

    Should be:

    In this post we present some excellent examples of videos in which graphics ARE set in motion.

    0
  17. 17

    Vitaly Friedman & Sven Lennartz

    January 28, 2008 3:11 pm

    @Angela: thank you, we’ve fixed it.

    0
  18. 18

    Thank you very much for this awesome post! You made my monday…I`m looking forward for the next Monday Inspiration!

    0
  19. 19

    Thank you for another inspiration, one way it is good that we have less motion nowadays thou… man there used to be a time when a 1 minute flash intro in full motion used to welcome every major site. Somebody remember the old balthasers.com?

    0
  20. 20

    wow…its a great stuff as usual you did. Amazing monday inspiration!

    0
  21. 21

    You got to check http://www.snyvo.com
    the video is better than the music but it’s nice to watch

    0
  22. 22

    cool animation here.the author has great inspiration

    0
  23. 23

    for the first time i found sthg not v interesting on sm !

    0
  24. 24

    Bookmarked. Thanks.

    0
  25. 25

    Miracle studios -- web design company

    June 12, 2008 9:00 pm

    Great motion graphics

    i am impressed

    Take a glimpse at our award winning web design : http://www.miraclestudios.in

    0
  26. 26

    Dave Wirken

    June 13, 2008 9:00 pm

    Greetings,
    Any ideas to record these amazing videos for personal purposes ? A software perhaps?
    TQ

    0
  27. 27

    If you want inspiration for video backgrounds and themes, take a look at Anistock, http://www.anistock.com

    0
  28. 28

    David Henderson

    February 24, 2009 9:04 am

    LOVE the Guiness Dot! and the smirnoff advert!

    0
  29. 29

    hi really i check this 1st time but its very nice and helpfull.

    0
  30. 30

    “feet want out ” is wonderful!

    0
  31. 31

    Dedicated Minders

    August 6, 2009 6:03 am

    Very impressed..web design company India

    0
  32. 32

    Simplify Solutions

    November 12, 2009 9:10 pm

    Yes… Indeed an excellent resource for designing…
    I will surely add this information on web designing and development to our web site – Simplify Solutions

    0
  33. 33

    Jack Kerouac

    June 25, 2010 6:43 am

    Here’s a good motion graphics spot in Atlanta.

    0
  34. 34

    I understand the 2worry.I am very r happy to hear that you got your Supra fixed; I remember reading about some of your questions2x !.

    0

↑ Back to top