Transform the height of a layer as you scroll in Framer X

AppBar.tsx

import { Override, motionValue, useTransform } from "framer"

const contentOffsetY = motionValue(0)

// Apply this override to your scroll component
export function TrackScroll(): Override {
    return { contentOffsetY: contentOffsetY }
}

// Apply this override to your app bar
export function AppBar(): Override {
    
    const height = useTransform(contentOffsetY, [0, -52, -52], [140, 88, 88], {
        clamp: false,
    })

    return {
        height: height,
    }
}

Hmm strange, the Shrink nav doesn’t work if the scroll is a stickyScroll. See my project, you will see a hidden regular scroll element that does work, just beneath your stickyScroll. http://djwldo.com/mymelo/BrokenFramer/ScrollTest.framerx best, Bill

…

On Jun 4, 2019, 1:53 AM -0700, Giles Perry ***@***.***>, wrote: Hey William. It should work fine, and can be used together with my Sticky Headers component from the Framer Store. Here's a demo file. https://www.dropbox.com/s/dagepzjfl1vxxt8/scroll%20interactions%20demo.framerx?dl=0 and take a look at my blog article: https://www.framer.com/blog/posts/mastering-scrolling/ I think I spotted you on Slack so will see if I can help out there... — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

I took a look at your file... You had the wrong override applied to the StickyScroll component. You need to use TrackScroll.

Ah works now! Thank you! best, Bill

…

On Jun 5, 2019, 12:29 AM -0700, Giles Perry ***@***.***>, wrote: I took a look at your file... You had the wrong override applied to the StickyScroll component. You need to use TrackScroll. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.