Tuesday, August 17th, 2010

Glimmer: Visual Builder for JQuery Animations

Category: jQuery, Library

From Tim Aidlin over at Microsoft comes a tutorial on using JQuery to do animation. The tutorial is focused on using a new library they have designed called Glimmer that allows designers and developers to create interactive elements and animations on web pages using JQuery. Using Glimmer you setup your HTML and CSS and then use the visual Glimmer tool to create animations and other effects:

The Glimmer tool then generates JQuery JavaScript automatically that you can pull into your page. An example snippet:


  1. jQuery(function($) {
  2. var timer;
  3. function clear_canvas(event)
  4. {
  5. clearTimeout(timer);
  6. timer = setTimeout(eval("big_guy_in"),"600");$("#slide1text").css("left","-800px");$("#slide1text").animate({"left":0},600, "easeOutElastic", null);$("#bigGuyPointing").css("left","600px");
  7. $("#bigGuyPointing").animate({"left":600},1000, "linear", null);
  8. $("#slide1").css("display","block");
  9. $("#bigGuyPointing").animate({"left":600},1000, "linear", null);
  10. }

Posted by Brad Neuberg at 5:00 am

3 rating from 8 votes


Comments feed TrackBack URI

Really weird usage of eval().

Comment by Malde — August 17, 2010

We will see many of these with HTML5/CSS3 not only jQuery.

Comment by CharliePops — August 17, 2010

From the looks of this example snippet, this doesn’t exactly produce *performant* jQuery…eep.

Comment by ajpiano — August 17, 2010

Yeah, it’s not utilizing chaining or caching at all. Why is it even using eval()?

Comment by cancelbubble — August 17, 2010

This is at least two years old.

Comment by eberon — August 17, 2010

(Note: please forgive the critical commentary.)

This is one reason why I’m not a fan of Microsoft supporting jQuery. Microsoft is still antiquated in their ways, and it shows immensely here. I hope this is not an indication of what’s to come.

Big questions:

1. Why is it not a web app? “Download now” is why everyone on Windows has a virus or bug of some kind. Hasn’t Microsoft learned that by now??

2. What’s with the code output? Auto-generated code by MS has always been a red flag, and this situation is no different. As others pointed out, the actual code output is lacking in terms of performance and organization.

3. This is just a personal one, but.. the video is…unbelievably cheesy, and in a clearly unintentional way. It says “CORPORATE” all over it.

Comment by Jona — August 18, 2010

javascript for drop-down menus? are we back to 2001?

Comment by gonchuki — August 20, 2010

Greetings all – I’m the lead developer of Glimmer and wanted to address some of the comments/concerns raised.

First, regarding the eval() code: I remember adding that eval() code and not liking it one bit, but I had to do it in order for Glimmer to be able to “round trip” — the ability for Glimmer to “save” an animation and open it back up in the design view. I ultimately justified the decision because the use of eval() in this case does not pose a security risk as it is always just the name of the method in quotes that is passed in the setTimeout call.

Second, regarding the overall issue of tools that generate code: Tools will never be able to generate code that is as elegant or as optimized as experienced developers can write. (This is good for our job security, no?) But, I believe there is a place for tools that generate code. The main reason for this is to enable people who don’t write code to do things that they couldn’t otherwise. And you can rest assured that the Glimmer code itself is quite elegant. :)

As far as why is this not a web app — we really wanted to make this a web app, but the architecture got so complicated as compared to a desktop app that it made more sense to go desktop. I don’t really see your point about viruses — that’s hyperbole and a red herring.

As far as its age — yes, it is a bit “old” — about a year and a half. I’d love to return to Glimmer and do version 2. Since version 1, I know jQuery better, jQuery itself has gotten better and better patterns have emerged as far as how to do animation. There’s tons I’d love to improve, fix, etc. However, I’ll stand beside Glimmer version 1 as a lab from Mix Online that allows designers to create animations in Javascript without learning jQuery.

Oh, and yeah, I really regret how the video came out. Every other video for labs I’ve been involved in, I did in my office with Camtasia (http://visitmix.com/labs) and with this one we took a (small) budget and had a vendor produce it. Lesson learned. :(

Comment by irhetoric — August 23, 2010

Leave a comment

You must be logged in to post a comment.