refactor: configure scroll-away lead-in
123456789101112131415161718import { style } from '@vanilla-extract/css';
import { LEAD_IN } from '#/components/web/Layout/scroll-away';import { scope } from '#/components/web/Layout/ScrollAway.css';
export const container = style({ display: 'flex', flexDirection: 'column', height: '100%', overflowAnchor: 'none',});
export const scrollAway = style([ scope, { vars: { [LEAD_IN]: '0.5' }, },]);49 unmodified lines50515253545455565758181 unmodified linesExpand all49 unmodified linestype ProfileTabId = 'collections' | 'media' | 'posts';
export function ProfileScreen() { return ( <Layout.Screen className={Layout.ScrollAway.scope} noInsetTop> <Layout.Screen className={css.scrollAway} noInsetTop> <ProfileScreenInner /> </Layout.Screen> );}181 unmodified linesExpand all2 unmodified lines3456789109111211121314151615 unmodified lines2 unmodified linesexport const TIMELINE = '--scroll-away';
export const SUPPORTS = `(timeline-scope: ${TIMELINE})`;
export const LEAD_IN = '--scroll-away-lead-in';
export const OVERLAP = '--scroll-away-overlap';
const LEAD_IN = 0.25;const RANGE = `exit calc(var(${LEAD_IN}, 0) * 100% + (1 - var(${LEAD_IN}, 0)) * var(${OVERLAP}, 0px)) exit 100%`;
const RANGE = `exit calc(${LEAD_IN * 100}% + ${1 - LEAD_IN} * var(${OVERLAP}, 0px)) exit 100%`;
/** * creates a scroll-driven animation rule with a static fallback. * * @param animation keyframes15 unmodified lines