FramerJS - the vertical scrolling for content on the pages with swiping

Question

Is it real to use in FramerJS - the vertical scrolling for content on the pages with swiping? For example: 1. I have 2 groups in Sketch with mask. 2. The groups are imported to FramerJS 3. Each of groups wrapped in framer an vertical scrolling is added 4. Can I use these layers with wrapping groups for pages with horizontal swipe??

Is it possible to have vertical scroll for content on the page with horizontal swipe?

Does anyone has an example? :(

Answer 1

Yes, it's possible. You can wrap ScrollComponent layers in a PageComponent. Here is some example code to get you started:

# This page component holds the horizontally aligned pages
pageComponent = new PageComponent
    y: sketch.navigationBar.height
    height: Screen.height - sketch.navigationBar.height
    width: Screen.width
    # The scroll direction is restricted to only allow for horizontal scrolling
    scrollVertical: false
    # The direction lock is enabled to only allow either horizontal or vertical scrolling
    directionLock: true

for pageIndex in [0...3]

    # A scroll component is created
    scrollComponent = new ScrollComponent
        size: pageComponent.size
        x: pageIndex * pageComponent.width
        contentInset: bottom: 40
        # Only vertical scrolling is allowed and the direction is locked
        scrollHorizontal: false
        directionLock: true

This is from the Medium app example in the Framer JS website Gallery:

http://framerjs.com/gallery/preview/#medium-app.framer