Mobile Slingshot

Leave a comment

I mentioned in a previous post that one of the products I work on at Vibes allows people at concerts or other venues to text messages to a big screen for everyone to see. Texting’s great and all, but we want to come up with cooler, more interactive ways for people to send messages to the screen.

Enter the slingshot, it lets people type out a message and then aim it at a target. The message would appear on the big screen according to where it was aimed. This would allow people to shoot over other people’s messages, or to combine their message with an existing one for potential comedy gold.

Try out the Prototype Type a message and launch it with the mouse!

How is it built?

The prototype is built using HTML/CSS + jQuery + CSS animations. I made another version that works on mobile devices via jQuery Mobile. On the iPhone pure jQuery animations are quite slow, but mobile Webkit’s hardware-accelerated CSS transitions came to the rescue.

CSS animations got the job done, but I can’t say I’m a fan. Most of the slingshot animations are triggered by adding a class to some DOM element via jQuery, which then causes the corresponding CSS animation to trigger, seems clunky.

Leave a Comment