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

What is Framer? Join the Community
Return to index
Fabian Buijing
Posted Sep 03 - Read on Facebook

I have multiple content layers (one for each page in my design) that I put in the same ScrollComponent. When I click and show a new page I then change opacity of the content of that page.

But.. the content of the second page has a larger height than the first page. So now first page scrolls too far for it's content (screencaps).

So I'd like to set the height of ScrollContent for every page, but I get a "ReferenceError: Can't find variable: ScrollContent"

10 Comments

Katie Wu

if your ScrollComponent is called Hello, you can access the content by calling Hello.content, rather than ScrollContent

Fabian Buijing

tried to set the height of scroll.content, but it doesn't affect it

Văn Công Bằng

i think the normal layer tree for a scroll is this: scroll - ScrollContent (scroll.content) - layerA. you can change the layerA.height, i think. Sorry, not using laptop at the moment to check if i'm right

Fabian Buijing

Yes it is :)

Fabian Buijing

Does anyone know how to do this?

Benjamin Den Boer

Hey Fabian Buijing - there's a couple of ways to go about this. Are your ScrollComponents stored within PageComponents? In any case, if you could attach the .framer example I'd love to take a look for you. You could loop over all of your layers and update the height of the layers, and then you could use the scroll.updateContent() method to dynamically re-calculate the height and contentInset. :-)

Benjamin Den Boer

Also, this example may be helpful to you - it also includes the updateContent method: http://framerjs.com/examples/preview/#swipe-n-scroll.framer#code

Văn Công Bằng

Benjamin Den Boer, in your example, i notice:
scroll.content.draggable.on Events.DirectionLockDidStart, (event) ->
for layer in allLayers
if event.x then layer.draggable.enabled = false
if event.y then layer.draggable.enabled = true
what is the "event" in function argument place ?

Fabian Buijing

Here's an example :)
http://share.framerjs.com/isj92nlr8ww8/

I'd rather only update only one component's height (ScrollContent) than three (page1, page2, page3)

Fabian Buijing

Still don't know how to approach this 😬

Read the entire post on Facebook