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

What is Framer? Join the Community
Return to index
Matthew Mang
Posted Aug 11 - Read on Facebook

Hey everyone,

I'm currently trying to use a page component where one of the pages is a long scrolling page. However, when I do that, instead of snapping to the top of the page and being able to scroll normally, it snaps to the middle of the long page and doesn't let me freely scroll.

I tried changing the long page to a scroll component, but then it totally conflicts with the page component. Any help would be appreciated!

3 Comments

Andrew Nalband

Hi, Matthew Mang! There are probably a few ways to tackle this, but here's one: https://framer.cloud/dDLfH

I did a few things here:

1. Instead of adding page2 as another page, I created a scrollComponent called "page2Holder" and gave it that same dimensions as your cover page. I added page2 to the content of this scrollComponent, and added this scrollComponent as the bottom page. This gets us part of the way there. We are now getting page2 snapping to the top of the page and we can scroll up when we hit it.

2. This created a new issue. When you scroll in the direction of your cover, Framer thinks you want to scroll both the scrollComponent and the pageComponent. We can solve this by setting propagteEvents to false on our scrollCompoment.

3. Now we have a new issue :). We can get to page2, and we can scroll it, but now we never get back to the cover. Crap! Last step is to listen to our scrollComponent's scroll event and animate back to the cover it the value is negative.

This feels like the behavior you're expecting. Let me know if you had a different intention! :)

Matthew Mang

Hi Andrew, yes, this is exactly what I was expecting :) Thank you! I had got as far as step 3, but couldn't figure out the fix for the last step. Forgot that I could use snapToPage with animation combined with onScroll

Andrew Nalband

Great! Glad it's working!

Read the entire post on Facebook