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

What is Framer? Join the Community
Return to index
Joshua Bradley
Posted Feb 20 - Read on Facebook

Hi framing humans!

I wonder if you could help me with directionLock. I've got a horizontally scrolling pageComponent nested within a vertically scrolling scrollComponent which itself was automatically generated by a flowComponent.

How can I stop the vertical scrollComponent from picking up drag events on the pageComponent which start horizontal but then move vertically or diagonally?

I've managed to do the opposite (stop the pageComponent from responding to drag events which start vertical but then become horizontal) using:

myPageComponent = new PageComponent
directionLock: true

But I don't seem to be able to use the same technique on the scrollComponent (which is generated on the fly by the flowComponent, as I mentioned). A separate but related question: how can I target this auto-generated scrollComponent? 'myFlowComponent.scrollComponent' evaluates to 'undefined', as it doesn't exist at the beginning of the flow, so I'm not sure how to get at it.

Any pointers much appreciated! Thanks :D

3 Comments

Joshua Bradley

In case anybody comes across this, the only way I could solve it was by not allowing the flowComponent to generate a scrollComponent, instead initiating one manually, then putting the pageComponent inside that. In my case this also meant defining custom transitions to make the flowComponent look OK.

Still interested to know if anyone knows how you would target a scrollComponent that has been automatically generated by a flowComponent. myFlowcomponent.scrollComponent... etc didn't work for me.

Andreas Wahlström

Hm. You can probably target it by name using a sublayer search.

Joshua Bradley

Interesting- do you mean using your layers or find modules, or using a function like https://framer.com/docs/#layer.childrenWithName then going back up the tree somehow?

Read the entire post on Facebook