Framer Hacks

Typically on Sunday mornings or when I get extra free time I'll spend it messing around in Framer.JS, often experimenting to see what the prototyping tool is capable of. Below is a collection of hacks I have done.

"3D" Rotation

A few of my friends in the Framer community have built little projects that use the phones sensors to be able to manipulate things on screen. I realized that this could be an interesting way to manipulate GIFs. While searching through Google Images I saw GIFs of people and objects captured in "bullet-time" way and that's when I got the idea to "scrub" through the perspective with touch or with the phone. 

If you are wondering how this was accomplished, like many of my friends in the Framer community, I broke out the GIFs into their single images and stacked them like a deck of cards on the screen. As I rotate the device or swipe back and for with my finger I have a hidden layer over them and I am seeing how far or back the layer is. I then map those values to the images, showing and hiding them as I slide the hidden layer.

Stereoscope

Back when we lived in Maine, my wife and I ventured to Peaks Island, which was right off the coast across from Portland. There was a small antique store with a large collection of stereoscopic images. I spent so much time going through them and thinking how fascinating such a simple technology could be so entertaining. And a few weeks ago I bought Mattel's new ViewMaster for VR and thought it would be great to view some old stereoscopic images I could find on the internet. 

In Sketch I created the the layer to divide the two images (shown in black) added a series of these stereoscopic images I could find on the internet. Mattel's ViewMaster actually has a button that would be detected as a tap on the screen so I created a function to detect the taps to allow me to cycle through the images.