30 Days of Framer X Code

Important

This project has been outdated and uses a very early version of the Framer API. If you are a Framer Web Beta user, I have recreated most of these files for the most recent version of Framer, which can be found in your dashboard in the Examples tab.

If you do not have access to the Web Beta, you can download all of the example files in this Dropbox Folder. Enjoy!

Table of Contents

• Introduction
• Download
• View Project
• Issues and Contributing

Introduction

This repository stores the code for all of my 30 Days of Framer X projects, so you can start building a similar project on your own.

Not all of the functionality was built on code alone. Please refer to the instructions below and my Medium posts for a brief overview to see how the code and design fits in together.

If you have any questions, feel free to contact me at annesohyunlee@gmail.com.

All of my work is free to use, as long as it is not used for commercial purposes.

Download

Download ZIP File

1. Click on the Clone or Download button on the top right.
2. Click on Download ZIP. Please note that if you download the ZIP file, you will not receive automatic updates to whatever changes I make. You will have to re-download all of the projects on your own.

Download via Terminal

1. Open the terminal and cd into the folder you wish to download to.
2. Run git clone https://github.com/hermy0211/framer30-code.git.

View Project

Learn how the project is put together by connecting the components and overrides I have written to the design elements on screen. Learn more about components and overrides by clicking on each link.

Viewing code files

1. Download the project.
2. Open the .framerx file.
3. Open the project folder with Option + Command + P.
4. Open the code folder to view the .tsx files that I have created.

Issues and Contributing

Known Issues

Below is a list of known issues that I will tend to in the future.

• Project 05 : The perspective and rotate3d are updated asynchronously sometimes.
• Project 07 : Color change animation is glitchy.
• Project 10 : Only works for the topmost element.
• Project 17 : Only the 'Grocery' and 'Personal' categories have corresponding lists.
• Project 19 : Only works for the lowercase and space keys. There is also no text cursor.
• Project 23 : The clipping animation transition for when the story is opened is not smooth.

If you would like to suggest an update of your own, please submit it as a pull request and I will see if it seems adequate.

Submitting a Pull Request

1. Create a feature branch: git checkout -b project-suggestion
2. Commit your changes: git commit -m "Explain Feature"
3. Push to the branch: git push origin project-suggestion
4. Submit a pull request. Please note that this only works if you have forked the repository.