of X :  Three

30 prototypes created with Framer X and React.js

Day 15 : Music Player Interaction

Download on Github

Through this prototyping exercise, I am not only learning a lot about code, but also starting to understand how micro interactions are built.

This prototype is a replica of Apple Music’s song player, and although it did not require a lot of advanced code, it was still fun to break it apart and try to perfect it detail-wise.

Day 16 : Open Menu on Tap

Download on Github

After discovering that you could get the x, y coordinates of the mouse pointer by passing a parameter into onTap (e.g. event) and accessing it by using event.point.x / event.point.y in the function, I thought it might be fun to try out something that animated differently based on the mouse position.

I ended up with this long tap menu interaction. The three menu buttons open up differently based on whether you are tapping the left, center, or right.

Day 17 : To-Do List

Download on Github

This day was monumental because I found out how to change pages with code. You can find a little snippet of what I learned right here.

I took the category on the top, and changed the content below based on which category I had chosen.

I took this knowledge and went even further with it on Day 20.

Day 18 : Splash Screen BG Animation

Download on Github

I felt like I wanted to do something more challenging this day, so I went ahead and created an animation in pure CSS and React.

The stars you see in the back are randomly positioned and float around. I reckon it could be used for a splash screen animation.

You can see the origin Codepen project I took inspiration from here.

Day 19 : Working Keyboard

Download on Github

On day 19, I created a working keyboard component for Framer X. I don’t think there’s an easy way to create a text field in Framer X yet, so I went ahead and created my own.

Getting it to work was pretty easy. I had already made a keyboard component on Day 01, so I took that and accessed the key’s value with props.text.

I then took that value, pushed it into an array of typed letters, and rendered it onto the page with Array.prototype.join().

Right now this only works for lowercase letters, but I would love to come back to this one and add more functionality such as capitals and symbols.

Day 20: Music Player with Dynamic BG

Download on Github

For Day 20, I created another music player. Ever since Day 17 I had been itching to write more code with the Pages API.

By taking the album art and adding an onChangePage event to it, I was able to get the current page and sync the background and song name / artist along with it.

I also found an easy way to create a blurry background with the CSS filter: blur() function.

Day 21: Animate on Load

Download on Github

After seeing Ji Young Min’s awesome solution to load animations right after a page had loaded, I had to give it a try.

Apparently overrides are applied only after the components have been loaded on to the screen, which means that any code that comes before ‘return’ will be executed before it has completely loaded. Cool trick, huh?



Project Archive

30 Days of Framer X

Project Instagram

Anne Lee (@coding.designer.__) * Instagram photos and videos


30 Days of Framer X : Week Three was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link https://uxplanet.org/30-days-of-framer-x-week-three-fe72d64ceac8?source=rss—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here