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

What is Framer? Join the Community
Return to index
Josh Davis
Posted Jun 12 - Read on Facebook

Quick questions: I am using a new PageComponent set to a width of Screen.width and a height of Screen.height to swipe right to see the next image. A few issues:
1. The next image is longer than the first (because I want a scroll effect on it). Unfortunately, this causes the first screen to gain the ability to move around even though it's mean to just fill out the screen, no vertical scroll. Because they're both attached to the same PageComponent, if I do scrollVertical: false it doesn't allow the second image to scroll any longer (it's a vertical scroll). Any way around this?
2. When I scroll to the next screen, instead of seeing the next image, it's a white screen. Any clue why? My image path is correct and you can see it under the white page if you try moving the white page.
3. When I do a new PageComponent it overrides my very first image which is a simple loading screen. Why is it doing that (is it a weird z index?) and any clues on how to fix it?

Sorry for the questions. I'm new to Framer and still finding my way around. This seemed like the best community to ask. Thanks for any help!

3 Comments

Nils Hoenson

Hey Josh! The first issue is pretty easy to fix. Simply wrap the second page (the one you want to scroll vertically) in a ScrollComponent and add the ScrollComponent as a page to the PageComponent. The ScrollComponent will behave just like a ‘regular’ page. :)

http://share.framerjs.com/3axnivef764m/

The second & third issue are hard to solve without context. Could you attach the Framer file in the post?

Hope this helps!

Josh Davis

Hey Nils Hoenson! Thank you so much for your help. I'm playing around with your example to try to replicate it. Two more questions based on it:
1. How do I create a new layer with an image if my images are imported from Sketch? Assigning a variable and trying to use that method didn't work.
2. In your example, when I swipe to the scrollable screen, I can still move that scrollable screen all over the place. Whereas in the Medium example on the Framer site, even though you move to the next screen, you can't move it horizontally, only vertically. How do I make that screen "stuck" to the screen width like in the Medium example?

The project I'm working on is a little sensitive so I can't create a shareable file. Perhaps I can create dummy images and upload those. Thank you so much for your help. Means a lot!

Josh Davis

Nils Hoenson here's a basic version of what I'm trying to do: http://share.framerjs.com/v6fwo09r4nnl/

I'm lost.
1. When I swipe to the right the second view doesn't start at the top. It starts off midway down.
3. My second view doesn't scroll up and down. I tried wrapping it in my scroll component but that didn't work.
2. When I swipe right to my third view, it does an awkward movement up instead of it being smooth like the Medium example on the Framer site.

I feel like I have the pieces. I just don't know how to assemble them... Thanks for any ideas!

Read the entire post on Facebook