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

What is Framer? Join the Community
Return to index
Jacek Stryk
Posted Oct 24 - Read on Facebook

Hi folks - trying to prototype an infinite scrolling set of pages where once the last page scrolls off screen it slides in at the very bottom.

I'm trying to use the Page Component to implement a simple logic of:
0 screen starts with pageOne
1 scroll pageOne off screen
2 scroll pageTwo on screen
3 move pageOne below pageTwo
4 scroll pageOne on screen
5 back to #1

What I have trouble with is:
A) not able to track the pageOne.y cause when I'm looking at it in

page.onMove ->
print "PAGE onMove"
print pageOne.y
print pageTwo.y

it constantly shows 0 (zero) even though when I mouse over pageOne in the layers panel I see its y set to -720 (once it is scrolled off scree)

B) trying to update pageOne.y to 720 to move it at the bottom of the screen does not cause the layer to change its y coordinates even after page.updateContent() is called

C) I like to know when a certain page stops scrolling and tried to listen to pageOne.onScrollEnd -> etc but it seems the scroll events are not firing upon page scroll stop so how can I listen if a page snapped into place? The page.on "change:currentPage", -> fires as soon as the pages start moving but I want to know when a particular page stopped moving.

Here's the code I have so far - appreciate any insight into how the Page Component works and how could I possible prototype an infinite scroll with repositioning AND re-useing the pages. Thanks!

4 Comments

Radek Kyselý

Jacek Stryk Here we are again :D You did great job on choosing PageComponent over former Scroll :)

I think the main problems is: Page Component doesn't handle its pages as independent Layers. Instead, it considers them as pages (so many discovery), that way you can't really handle their pageX.y positions, the moving happens somehow inside the component.
I guess that's how it works just by looking at the way you add new pages to the component—with a function, not simply setting their parent (as for Scroll).

I was able to come up with this hacking:
http://share.framerjs.com/1o9lskbqs753/

It actually works, but again, only when scrolling down. That's because addPage function doesn't allow "top" option.
The code is commented, I guess you'll understand by it :)

Also, it actually reuses already existing layers, no need to copy() them as in our previous attempts, which created tons of copies :)

Jacek Stryk

Hey, Radek Kyselý you're awesome, thanks for another great example, I think at some point we'll figure out how the Scroll and Page components work :)

Victor Nogueira

Did an example of infinite vertical pagination here: http://share.framerjs.com/txbi4csavbjg/

Victor Nogueira

The example above would imply cloning the first slide and pasting it at the end and clone the last and paste it at the beginning. The logic for making it go forever is there, but the cloning is not being done dynamically. This is how most javascript carousels that have "infinite" option work, don't know how easy it would be to clone layers in Framer... Hope it helps :D

Read the entire post on Facebook