flukeout luke pacholski's design & illustration

I was learning how the Javascript behind multi-touch gestures works on the iPhone and created the Mystical Door of Random GIF. Pinch open the door to see the GIF and shake your phone to load up a new one. It can’t get a new one when you’re watching, so close the door first.

It’s grabbing from a list of 20 or so hand-curated GIFS.

On your iPhone? Try it out! Or scan the QR code above.

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.