This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Stefanos Kofopoulos
Posted Aug 17 - Read on Facebook

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?

6 Comments

Koen Bok

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!

Mudit Mittal

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?

Stefanos Kofopoulos

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.

Mudit Mittal

Cool!!!

Mudit Mittal

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?

Mudit Mittal

I think I found partial answer here: http://share.framerjs.com/4zv0ygk1nno0/ Stefanos, if you know of a better, simpler way, please share.

Read the entire post on Facebook