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"
if your ScrollComponent is called Hello, you can access the content by calling Hello.content, rather than ScrollContent
tried to set the height of scroll.content, but it doesn't affect it
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
Yes it is :)
Does anyone know how to do this?
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. :-)
Also, this example may be helpful to you - it also includes the updateContent method: http://framerjs.com/examples/preview/#swipe-n-scroll.framer#code
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 = truewhat is the "event" in function argument place ?
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)
Still don't know how to approach this 😬