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 18 - Read on Facebook

Trying to figure out the ScrollComponent and scroll the content off the screen with scroll.scrollY set to height of the content layer + screen height to make the content go off screen.

Looks like the scrollToPoint can scroll up the content height not past it. Any ideas how to scroll the content layer (layer A below) completely off screen?



Radek Kyselý

As you said: the ScrollComponent automatically sets its content height to... the height of content, obviously :D
You actually need to add contentInset at the bottom (or top if you want) of the scroll height :)

PS: I added a fancy picture of Shakespeare so that I can see how the layer is moving :) :D

Jacek Stryk

Radek Kyselý thanks, that works.

The way I want to use it though is to build a continuous, looping scroll of few picutures so as the scroll reaches the content bottom I want the top picture re-appear and scroll in at the very bottom. See movie below.

Now if I use the inset that separates the scrolling elements and I'm a bit stuck.

Maybe I'm thinking it wrong about using a scroll component to create a never ending continuous scroll of a finite set of elements?

Jacek Stryk

and I like the carousel to work both up and down. Any ideas how you'd approach building something like that?

Radek Kyselý

Jacek Stryk Well, that's quite different situation :D Anyway, I was able to hack this together:

But it has many faults. First of all, I don't know why, but it seems you cannot add objects to scrolling content with negative y value. Because of that, it only works when scrolling down.

Also, when you let go and content scrolls itself (momentum), it pauses at the value of calling copying function. It's fine when you're actually dragging over that point though :)

Maybe you can iterate from this? You'll get probably much better help when you post it as a new question here in the group :)

Jacek Stryk

Radek Kyselý hey this is awesome, thanks for the example!

Read the entire post on Facebook