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,
    }
}

This doesn't work for me. I created an App.tsx in the code panel, and copied and pasted this code exactly. Connected the AppBar Override to a header at the top, and connected the TrackScroll to a scroll component containing some vertical list items. Nothing happens to the header on scroll besides the scroll. anything I am doing wrong?

Oh I figured it out. It looks like it doesn't work with the Sticky Scroll component.

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...

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.