x100
The x100 is a project I put together to test all the different interactions you can accomplish with Framer X. Prototyping and all the new tools that keep popping up are constantly expanding, and the skillset to be able to not only conceptualize a user experience but test it out is more important than ever.
x010
Recreated the apple music interaction. I’ve always been impressed with this interaction but recreating it in Framer x is a bit trickier then framer.js. What was a huge help is conditionals allowing for certain events to only happen in specific cases.
Click on the image to download the prototype.
x009
Tab navigation is a pretty simple thing in most prototyping tools. In this example I made use of the visible prop in the code overrides to link the different pages to the corresponding tab. The Link tool is great to get started but sooner than later the really power of these prototypes happen in React.
click on the image to download the prototype
x008
In this prototype I wanted to apply a behavior to all elements and determine how easy it would be to recreate seamless interactions across a project. Framer is powerful because of it’s re-usability allowing me to plug animations once and not have to repeat my work.
click on the image to download the prototype.
x007
Playing around with the page component. Being able to effect change based on specific events is what sets Framer apart as a prototyping tool. In this case a simple color change is enough but the application is limitless.
Click on the image to download the prototype
x006
Recreated the UberEats interaction. When you scroll down the menu a horizontal head updates based on the current section of the menu. Transitioning from framer to FramerX makes this process a little more involved.
Click on the image to download the prototype
x005
IPhone X intro animation. Recreating this animation was a bit tricky due to how the timing of the animations differs slightly. Utils.delay played a key role in making this seamless.
Click on the image to play with the prototype yourself.
x004
A simple Music Player transition. Planning on fleshing out this design and building a fully functionally music prototype in the future.
Click on the image to play with the prototype yourself.
x003
Tinder swipe feature. The key to bringing this prototype to life is the Utils.modulate feature in Framer.js, which allows you to link two different components together.
Click on the image to play with the prototype yourself.
x002
A study in scrolling events and switching states as you scroll up and down.
Click on the image to play with the prototype yourself.
x001
A simple swipe effect. Using onDrag and onDragEnd to test different interactions when you swipe past a certain point.
Click on the image to play with the prototype yourself.