Last week, I started a project called “30 Days of Framer X”, an experimental project in which I create 30 Framer X prototypes within 30 days.
Project Archive :
Project Instagram :
Here’s what I learned through creating the first 7 prototypes.
Day 01 : Password Check Interaction
If you are a beginner like me, and your goals is to create working prototypes, not all functionality has to be done by code.
For the first day, I decided to start out easy by practicing creating overrides, Framer’s basic animation function (Learn more about them for free here).
The loading bar in this prototype is actually just a long bar that is continually being pushed to the left when the submit button is pressed. The icons are also just images that change opacity to show up accordingly to the current status.
Day 02 : Save Card Interaction
Update : This project now has full dragging functionality.
By dissecting the code from the ‘Bottom Sheet’ component from the store, I was able to create a ‘drag to save’ interaction.
The Framer library is full of cool APIs that haven’t been documented yet. This prototype actually uses one of them called ‘Draggable’.
If you’re familiar with libraries in Javascript though, you can figure out how to use these for yourself by looking at the framer.d.ts file in the node_modules > framer > build folder.
Day 03 : Circular Menu Animation
This animation was easy to code, but tricky to find out interaction-wise. In order to get the full ‘turning’ experience, you need to rotate each icon in the other direction along with the panel, so the icons stay in place. Try unlinking the iconAnimation code from each icon to see what it looks like without it.
The gray background looks tricky, but it’s actually just a hidden layer behind the button that scales up and down.
Day 04 : Live Stream Heart Animation
This one is where I got really serious with code. I started out with this demo for Framer classic, but ended up having to figure out how to do it the ‘React way’ and created something original.
Firstly, I took my knowledge from Day 02 to create a custom SVG heart component with a class. Then I created a function to animate my hearts, selected all of my hearts with querySelector(), and looped through them, adding the animation function to each heart. I took the index value of the hearts and used it in setTimeout, so the hearts would start coming up at slightly different times instead of all at the same time.
Currently you have to wait 5 seconds or so between button presses to get the full effect. If anyone knows how to fix this, feel free to upload a pull request.
Day 05 : Safari Switch Tabs Interaction
I pushed myself a bit more this day to do something I had never done before : rotating elements with CSS.
It turns out the perspective attribute and the rotate3d() function comes in handy for that.
I also made use of this.props.children so I didn’t have to design everything with CSS. The design for each page (the search bar and icon placeholders) were designed within the program, then connected with the page component. If you’ve used Framer X, it’s similar to how you can connect a frame to a ‘Scroll’ component.
Day 06 : Align Text Animation
Day 04 and Day 05 took a lot of energy, so I went back to something a bit more design oriented for this day. By this point, animating with overrides was a piece of cake. You can imagine how confused I was when my simple, apparently bug-free code did not work.
It turns out Framer X ‘snaps’ the component, or fixes the position of the component in relation to the parent element, by default. Everything worked well once I unsnapped the element. I made a mental note to always check if everything had been unsnapped first, before spending hours pouring over my code trying to find out what had gone wrong.
Day 07 : Sticky Header Animation
I took another leap this day and decided to take a component from the store and recreate it. I believe you can learn a lot from just reading someone else’s code.
For this day, I took the code for the Sticky headers in the store and played around with it to create something that worked for me. The code was quite advanced for me, and it took a while to decipher everything. I added comments in the .tsx file explaining every line of code, so anyone viewing did not have to go through the same process as me.
Once I got the sticky headers working, it was another challenge to change the styles of the headers once they got ‘stuck’. After a lot of tests with console.log, I found out you could access the children within the element and get their ‘top’ position values. I then created a function to check if each header had reached the top, and changed the styles accordingly.
Other Lessons Learned
Throughout my first week, I learned many more lessons other than those related to code.
Firstly, I learned that you should never be scared of sharing. When I posted my first project in the Framer facebook group, I was overwhelmed by the attention that I got. I was both excited and terrified when people started to dig up my source code, which I did not feel was ‘good enough’ to share with the group at that time.
However, after a while, I realized that everyone was on the same page as I am — struggling to work out how to create prototypes on this program. People were not trying to judge me, but trying to learn from my experiences. I learned to change my perspective from “I have to provide perfect solutions.” to “I can provide a starting point to the community”.
I also learned the importance of prioritizing. When I started out, my archive website was pretty broken. The images were not optimized, the scroll was buggy…there is still a ton of other things I would like to change once I get the time to work on it.
However, I learned that sometimes you need to actively set a good break point in order to get on with the other stuff. Once I got the basic functionality working, I stopped lingering on my website and moved on to the real project itself. If I had hung on to it, I don’t think I would have ever gotten the project started, because there would always be something that I would want to change.
By prioritizing my project over my website, I was able to get going while I was still in a good mood, and fixing the website has also become a better experience, since I only have to fix a few things per day.
