Learning Framer 03: Joel on Demand

After three short months, I can safely say I love Framer JS. Its powerful front-end capabilities have reignited my curiosity about animation and motion design, two skills I look forward to augmenting as I continue using this wonderful tool. I also appreciate Framer's ability to make me feel like a builder. When I make something with Framer, I feel as I do when I craft paper or build models. I feel the rush of discovery and wonder as I bring something to life. I feel the push to make it better with each iteration. And I feel the connection to others when they see and interact with my work. 

Building with Framer, a code-based tool, has unexpectedly revived my efforts to strengthen my programming skills. I want my prototypes to be even more functional than they have been. This can help with communicating my vision to others, accommodating various use cases, and robustly testing with real users. With all this in mind, I took a small step to add more complexity to a Framer prototype. In this this quick prototype, I aimed to (a) read text inputs and (b) complete specific actions based on the text written.

As the backdrop to this experiment, I chose to put my love of Billy Joel on display. The concept is called "Joel on Demand," an imagined app that allows a user to search for and play any Billy Joel song his or her heart desires. 

You can try (and download) the interactive Framer prototype here. 

---

CODE NOTE:  Gratefully, this exercise forced me to dive deeper into CoffeeScript, the language on which FramerJS is based. I also used Modules, an advanced feature, for the first time. These allowed me to integrate open-source code directly into my prototype, freeing me to focus on marrying the functionality to the user goals and interaction design I imagined. 

The Module used for this prototype is called "Input-Framer" by Adria Jimenez.