Hey guys. I put together a tutorial for Page Component using two real world examples from Snapchat like app. Very easy to follow. Simple and clean.
It covers Page Component both ways. Using a for loop and custom layers.
This is a beginners guide. All the Pros will find it boring but i will appreciate your feedback for writing and presentation. Will it help the Framer JS community to grow and mature?
Great tutorial! Thanks so much! For everyone: we're working on a resource page on the site where we can list all these, plus books and courses with dibs to the makers. If you like to get linked, write a nice tutorial in a way you think it will help people. Different people learn in different ways and finding a tutorial with a style that connects to how you think makes all the difference!
This is really helpful! Does the process of adding pages manually remain same even if each individual page is not the same width as the phone screen?
Mudit yes of course. I kept the layers "full screen" so to speak to simulate the way Snapchat works with its filters. The layers exist in the Page Component. That's the super layer.
Stefanos, I'm trying to find a prototype an experience where you can horizontally swipe a series of cards on home screen, and when you tap on a card, you see card details. So basically, same target area needs to have two events: Scroll/Drag governed by Page Component, and a manual Click event that I'm trying to add. My problem is that both events get registered when I'm trying to scroll. Is there any way I can resolve this issue?
I think I found partial answer here: http://share.framerjs.com/4zv0ygk1nno0/ Stefanos, if you know of a better, simpler way, please share.