Create an app from scratch using FramerX
My aim here to test FramerX — can I create an app design and interactions from scratch without any other tools? So I didn’t prepare any materials or even any thoughts on what I’ll do and I’m writing this article as a diary — during my explorations.
What I definitely know is that it will be an iOS app.
And first of all, we need the status bar for iPhoneX. You can download this package for iPhoneX
or create a design component, like I did, because I don’t need a real data here only a placeholder. Framer allows us to copy and paste components directly from Sketch what I did
If you used to have a grid you can install this package. Unfortunately, it doesn’t have snap options because is not integrated with Framer from within, so it could be a good opportunity to FramerX to make Grid option native, an integral part of the app.
I didn't have any idea how my application will look like, but I new the topic — classic horror movies.
To pick up the right style for the application I started from the basic cards component.
Classic horrors, their posters, style, the atmosphere will tell me the way — a design, how the app should look like. And I decided that horror posters will be my mood board.
“Movies of the Day” module
And the very first component which I’ll do is “Movies of the Day” module — a simple cards carousel component with a dotPagination component.
For this component, I made a master component and three instances of it
then I added PageComponent, a common header and the dot pagination (which is in fact triangle pagination)
Everything is okay but our dot-pagination component at the left-bottom corner not connected to the pageComponent and, also, not interactive. Let’s fix it.
Here is a good tutorial by Jay Stakelon:
Unfortunately, I can’t change the color of graphic (vector) elements in FramerX so far. But we can change their color if we will use filters (like brightness, contrast, hue; if we change these parameters we can achieve the same effect).
Or if we will create our dotPagination component as a code-component. In a code component, we don’t have any boundaries and can use and manage anything we need — including SVG and all possible properties for it.
I’ll prefer the second way because we will need to manage less data which will save time for us in the future. Here is a code of the component:
The main thing here is activeItem prop. Through this property, we’ll be able to override the current active item. So far we have a neat component:
Now the final part. Let’s connect dotPagination and PageComponent. To do so we need to create two overrides MovieOfTheDayPageComp and DotPagination
Now you need to connect these overrides. you can do that by “code” section here:
The logic behind is really simple — we watch for the page index of the PageComponent by onChangePage() function and when it changes we pass the current index into data.currentPage and because we use the same variable in DotPagination override, the current dot also changes.
Now we can wrap up all parts of the movieOfTheDay component inside the frame element and even create a new design component from it. Which I did to have an ability to reuse it later.
“New releases” module
The next thing which could be interesting for me are new movie releases. The first module will tell us about proved and solid cult movies and the second one if we want to watch something new.
One of the simplest modules due to it consists of framer native components without any coding requirements. We will use here scrollComponent and stackComponent. Design for the module I also made completely in FramerX.
“Horror Reviews” module
Another important section could be articles dedicated to horror movies. I took content from the most prominent bloody-disgusting.com
And this component is even simpler than our previous one. No code required.
All components that I create I divide into categories and place them on different artboards. So far it looks like that:
“Watch Online” module
The last module for today is “Watch Online” where you can buy and watch the most famous and classic horror movies on affordable price.
This module based on PageComponent. It will be trickier than others in terms of transitions. So, we will use almost the same method as in Jay Stakelon’s video. But if Jay in his code alternate segmentOpacity value from 0.2 to 1 without any animation — just switching.
We will animate three objects — card itself, its title and the content block.
Let’s write a code piece for the card animation as an example. Each time when we swipe to a new card the previous card should fade to an opacity value 0.2 and the current card to an opacity value 1.
First, we need to create a data object where we’ll store ids for the current and previous cards. Set them to null as the initial value.
Now let’s create an override function for the PageComponent where we will grab the previous and the current page ids and place this data to dataWatchCard object.
Then let’s create an override function CardOpacity for the card, where we will use values from dataWatchCard object.
First things Inside this function will be two constants states and time. In states we’ll have start and end keys. We are using constant object here because we will declare the start opacity value and the end opacity value in several places. By the same reason, we also using const for the animation duration.
Then we need to create cardOpacity variable, it should have an animatable value otherwise we won’t have a smooth transition between states.
let cardOpacity = Animatable(states.opacity.start);Then theif/else part where we are checking → if any id of our cards is equal to currentCardId we animate cardsOpacity from states.opacity.start to states.opacity.end and → if any id is equal to prevCardId (previous card) we rewrite cardOpacity variable to the end value (because each time scenario will start from the initial value states.opacity.start) and then animate it to the start value.
Everything works fine but the initial state still not defined, its opacity should be equal to 1. To solve this we need to add another if/else rule.
Now we can apply the same algorithm to other card elements like — header, content and the play button and our component is ready.
This is the final part and here we need to combine all our component together on one page with Stack and Scroll components. And I found a problem when I did that— flickering. This is because scrollComponent on each tap triggers Overrides. Framer guys said that they will fix this issue soon…
I think we can finish our prototype here.
Also, Framer came up with a new beta version with “playground” section and now they, also, support functional components 🥳
Download this project here 👈👈👈 or download it on Github repo — https://github.com/PavelLaptev/VIDEODROME-FramerX/tree/master
