My first 'lets try Framer' project has got a bit out of hand, but so has the length of my code..
I tried to make my app design interactive with transitions and all, and also always being able to update the design with help of import.
Unfortunately my script is now way to complex and long.. Can anyone give tips to optimize/shorten it?
First of all, your prototype looks awesome! 💪
But it isn't recommended to build a complete app or every function of a complex interface with Framer. I think you can split it into 3 or 4 prototypes. This would give you more freedom to try new ideas on each screen without breaking the other screens.
Thanks Riza! :) but I guess then you can't show transitions between pages and stuff, which I think is important. Maybe that is something to develop when you're really gonna build the app..(?)
I don't per se agree with Rıza, but the beauty of code is that you can use it however you prefer, without much limitation, but I do feel we can do a lot better job here.
Some things that you could do now:
- I notice you initialize a lot of opacity states where most of them are 0. Why not add all those states in a loop with 0 and then update the ones you like to be 1.
- You set a home state with the original positions often, Framer automatically adds a default state with the same, you don't have to set it up.
- You have a lot of "for el in [a, b, c] ..." you could make that a reusable function.
Ultimately, this is what is happening, I think. 80% of your code are nice declarative states, basically setup code. The last 20% is where you wire it together, the interesting stuff.
This is something we like to solve badly with Framer but I don't really have anything to show yet. A little bit more patience :-)
But thanks, because your prototype is (next to beautiful) a great validation for some of the ideas we have.
Alright! Thank you Koen, I'll try to use your suggestions to make it as small as possible (be a nice exercise hehe).
Also Fabian, try the beta and you'll see a nice ~4x speedup while editing.