├── .yarnignore ├── metadata ├── icon.png └── artwork.png ├── .gitignore ├── code ├── canvas.tsx ├── NotConnected.tsx ├── StickyElement.tsx └── StickyScroll.tsx ├── .yarnrc ├── tsconfig.json ├── package.json ├── README.md ├── yarn.lock └── dist └── index.js /.yarnignore: -------------------------------------------------------------------------------- 1 | /build 2 | .DS_Store 3 | Icon\r 4 | .cache 5 | .config.json 6 | .backups 7 | -------------------------------------------------------------------------------- /metadata/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perrysmotors/sticky-headers.framerfx/HEAD/metadata/icon.png -------------------------------------------------------------------------------- /metadata/artwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/perrysmotors/sticky-headers.framerfx/HEAD/metadata/artwork.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # General 2 | .DS_Store 3 | Icon\r 4 | 5 | # Framer 6 | .cache 7 | .backups 8 | .config.json 9 | yarn-error.log 10 | build 11 | node_modules 12 | .npmrc 13 | *.framerxproj -------------------------------------------------------------------------------- /code/canvas.tsx: -------------------------------------------------------------------------------- 1 | // WARNING: this file is auto generated, any changes will be lost 2 | import { createDesignComponent, CanvasStore } from "framer" 3 | const canvas = CanvasStore.shared(); // CANVAS_DATA; 4 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | 2 | --link-folder "/Users/gilesperry/Library/Application Support/Framer/yarn-link-folder" 3 | disable-self-update-check true 4 | yarn-path "/Applications/Framer.app/Contents/Resources/Server/lib/framerYarn.js" 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "lib": ["es2015", "dom"], 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "outDir": "build", 8 | "sourceMap": false, 9 | "declaration": false 10 | }, 11 | "exclude": ["node_modules", "build"] 12 | } 13 | -------------------------------------------------------------------------------- /code/NotConnected.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const style: React.CSSProperties = { 4 | height: "100%", 5 | display: "flex", 6 | alignItems: "center", 7 | justifyContent: "center", 8 | textAlign: "center", 9 | color: "#8855FF", 10 | background: "rgba(136, 85, 255, 0.1)", 11 | overflow: "hidden", 12 | } 13 | 14 | function Component(props) { 15 | const { prompt = "Connect to content" } = props 16 | return
{prompt} →
17 | } 18 | 19 | export const NotConnected = Component 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/index.js", 3 | "license": "MIT", 4 | "devDependencies": { 5 | "@types/react": "^16.4.16" 6 | }, 7 | "peerDependencies": { 8 | "framer": "^0.10.5 || ^1", 9 | "react": "^16.3.0", 10 | "react-dom": "^16.3.0" 11 | }, 12 | "framer": { 13 | "id": "5f4411f5-e210-4355-ad08-d04613afe3a1", 14 | "displayName": "Sticky Headers" 15 | }, 16 | "author": "Giles Perry", 17 | "dependencies": { 18 | "@framer/framer.default": "^1.71.0", 19 | "framer-motion": "^0.15.1" 20 | }, 21 | "name": "@framer/perrysmotors.sticky-headers", 22 | "version": "2.7.0" 23 | } 24 | -------------------------------------------------------------------------------- /code/StickyElement.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Frame, useTransform } from "framer" 3 | import { NotConnected } from "./NotConnected" 4 | import { ScrollContext } from "./StickyScroll" 5 | 6 | export function StickyElement(props) { 7 | const { children, ...restProps } = props 8 | const { contentOffsetY, origin, positions, dispatch } = React.useContext( 9 | ScrollContext 10 | ) 11 | 12 | const responsiveChildren = React.Children.map(children, (child) => 13 | React.cloneElement(child, { width: "100%" }) 14 | ) 15 | 16 | const [top, setTop] = React.useState(0) 17 | 18 | // Get the y position of the element, 19 | // store it in state, 20 | // and send it to the context provider where it will be added to an ordered array of positions 21 | const ref = React.useCallback((node) => { 22 | if (node !== null) { 23 | const { y } = node.getBoundingClientRect() 24 | setTop(y) 25 | dispatch({ payload: y }) 26 | } 27 | }, []) 28 | 29 | // Find where this element is in the positions list so that we can get the position of the next element 30 | const index = positions.indexOf(top) 31 | const isLast = index === positions.length - 1 32 | 33 | const yStick = top - origin 34 | 35 | let yRelease 36 | if (index === -1) { 37 | // Not found 38 | yRelease = yStick 39 | } else if (isLast) { 40 | yRelease = yStick * 2 41 | } else { 42 | yRelease = positions[index + 1] - props.height - origin 43 | } 44 | 45 | const y = useTransform( 46 | contentOffsetY, 47 | [0, -yStick, -yRelease], 48 | [0, 0, yRelease - yStick], 49 | { clamp: !isLast } 50 | ) 51 | 52 | if (React.Children.count(children) === 0) { 53 | return 54 | } else { 55 | return ( 56 | 65 | {responsiveChildren} 66 | 67 | ) 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sticky Headers 2 | 3 | _Inspired by 'Sticky' by Ismael Martínez and 'Parallax' by Linton Ye_ 4 | 5 | This package lets you add headers that stick to the top of the screen when you scroll. 6 | 7 | [View the code on Github](https://github.com/perrysmotors/sticky-headers.framerfx) 8 | 9 | ## Features: 10 | 11 | - **New in version 2.5** – Place StickyElements anywhere in the scroll content including inside stacks and frames 12 | - Only supports vertical scrolling 13 | 14 | ## Usage 15 | 16 | After you install this package you will see two components: `StickyScroll` and `StickyElement`. 17 | 18 | `StickyScroll` works like a native Scroll component. 19 | `StickyElement` should be placed inside your scroll content and connected to another canvas element. This will make the connected content appear inside the scroll content and stick when you scroll past the top of the scroll component. 20 | 21 | You can use multiple StickyElements in your scroll content. Each StickyElement reaching the top **pushes** the StickyElement above it up and off the top of scroll component. 22 | 23 | ### Property Controls for `StickyScroll` Component 24 | 25 | | Property | Type | Description | Default | 26 | | --- | --- | --- | --- | 27 | | Offset | `number` | Makes elements stick at a set distance below the top of the scroll component | `0` | 28 | | Lock | `boolean` | Controls whether the Scroll should ignore dragging in its opposite direction while scrolling | `1 Axis` | 29 | | Drag scroll | `boolean` | Controls whether the Scroll should respond to drag interactions | `On` | 30 | | Wheel scroll | `boolean` | Controls whether the Scroll should respond to scroll interactions | `On` | 31 | | Fill | `color` | Show or hide, and set the fill color | `Hide` | 32 | 33 | ![Screen Recording (Framer X)](https://user-images.githubusercontent.com/12557727/54369321-a3808800-466d-11e9-8b50-4f245ac8075b.gif) 34 | 35 | ## How to use with overrides 36 | 37 | You can do stuff based on the scroll position by adding an override to the your StickyScroll component that sets an `onScroll` event handler: 38 | 39 | ``` 40 | import { Override } from "framer" 41 | 42 | // Apply this override to your scroll component 43 | export const StickyScroll: Override = () => { 44 | return { 45 | onScroll: info => { 46 | console.log(info.point.y) 47 | }, 48 | } 49 | } 50 | ``` 51 | 52 | ... or you can track changes to the scroll position using a `MotionValue`. Here's how you could use this approach to add a parallax effect: 53 | 54 | ``` 55 | import { Override, motionValue, useTransform } from "framer" 56 | 57 | const contentOffsetY = motionValue(0) 58 | 59 | // Apply this override to your scroll component 60 | export function StickyScroll(): Override { 61 | return { contentOffsetY: contentOffsetY } 62 | } 63 | 64 | // Apply this override to your parallax layer 65 | export function ParallaxLayer(): Override { 66 | const y = useTransform(contentOffsetY, [0, -100], [0, 50], { 67 | clamp: false, 68 | }) 69 | return { 70 | y: y, 71 | } 72 | } 73 | ``` 74 | 75 | ## Changelog 76 | 77 | - **2.7.0** — Minor refactor 78 | - **2.6.0** — Fix issue where StickyElements break when overriding `contentOffsetY` using a number. 79 | - **2.5.0** — Rewrite to allow StickyElements to be placed anywhere in scroll content including inside stacks. 80 | - **2.4.0** — Add standard scroll component property controls and support for responsive StickyElements. 81 | - **2.3.0** — Fix bug where StickyElement would not stick if positioned at top of scroll content. 82 | - **2.2.0** — Add support for responsive scroll content width. 83 | - **2.0.0** — Complete rewrite to use new API. 84 | - **1.14.0** — Update artwork 85 | - **1.13.0** — Bug fix 86 | - **1.12.0** — Bug fix 87 | - **1.11.0** — Fix for StickyElements that are not pinned to the top 88 | - **1.9.0** — Remove left over debugging code 89 | - **1.8.0** — Patch to avoid console errors 90 | - **1.7.0** — Complete rewrite to improve performance 91 | - **1.5.0** — Initial release -------------------------------------------------------------------------------- /code/StickyScroll.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { 3 | addPropertyControls, 4 | ControlType, 5 | Scroll, 6 | MotionValue, 7 | motionValue, 8 | useMotionValue, 9 | } from "framer" 10 | import { NotConnected } from "./NotConnected" 11 | 12 | interface ScrollContext { 13 | contentOffsetY: MotionValue 14 | origin: number 15 | positions: number[] 16 | dispatch: React.Dispatch 17 | } 18 | 19 | export const ScrollContext = React.createContext({ 20 | contentOffsetY: motionValue(0), 21 | origin: 0, 22 | positions: [], 23 | dispatch: () => null, 24 | }) 25 | 26 | interface State { 27 | positions: number[] 28 | } 29 | 30 | // Receive the context consumer's position to build an ordered array listing the position of every StickElement 31 | const reducer = (state: State, action) => ({ 32 | positions: [...state.positions, action.payload].sort((a, b) => a - b), 33 | }) 34 | 35 | const initialState: State = { 36 | positions: [], 37 | } 38 | 39 | // Take either a MotionValue or a number and always return MotionValue 40 | function useMotionValueGenerator(value) { 41 | const isMotionValue = value instanceof MotionValue 42 | const initialValue = Number(value) === NaN ? 0 : Number(value) 43 | const newMotionValue = useMotionValue(initialValue) 44 | 45 | if (isMotionValue) { 46 | return value 47 | } else { 48 | return newMotionValue 49 | } 50 | } 51 | 52 | export function StickyScroll(props) { 53 | const { 54 | offset, 55 | fill, 56 | background, 57 | children, 58 | contentOffsetY, 59 | ...restProps 60 | } = props 61 | 62 | if (React.Children.count(children) === 0) { 63 | return 64 | } else { 65 | const contentOffsetYmotionValue = useMotionValueGenerator( 66 | contentOffsetY 67 | ) 68 | 69 | let [state, dispatch] = React.useReducer(reducer, initialState) 70 | 71 | // We need to know the position of the top of the scroll to calculate stick and release positions 72 | const [scrollTop, setScrollTop] = React.useState(0) 73 | 74 | const ref = React.useCallback((node) => { 75 | if (node !== null) { 76 | setScrollTop(node.getBoundingClientRect().y) 77 | } 78 | }, []) 79 | 80 | let value = { 81 | contentOffsetY: contentOffsetYmotionValue, 82 | origin: scrollTop + offset, 83 | positions: state.positions, 84 | dispatch: dispatch, 85 | } 86 | 87 | return ( 88 | 89 |
90 | 97 | {children} 98 | 99 |
100 | 101 | ) 102 | } 103 | } 104 | 105 | StickyScroll.defaultProps = { 106 | offset: 0, 107 | direction: "vertical", 108 | directionLock: true, 109 | dragEnabled: true, 110 | wheelEnabled: true, 111 | fill: false, 112 | background: "#fff", 113 | contentOffsetY: 0, 114 | onScroll: () => null, 115 | } 116 | 117 | addPropertyControls(StickyScroll, { 118 | offset: { 119 | type: ControlType.Number, 120 | title: "Offset", 121 | min: 0, 122 | }, 123 | directionLock: { 124 | type: ControlType.Boolean, 125 | title: "Lock", 126 | defaultValue: true, 127 | enabledTitle: "1 Axis", 128 | disabledTitle: "Off", 129 | }, 130 | dragEnabled: { 131 | type: ControlType.Boolean, 132 | title: "Drag scroll", 133 | defaultValue: true, 134 | enabledTitle: "On", 135 | disabledTitle: "Off", 136 | }, 137 | wheelEnabled: { 138 | type: ControlType.Boolean, 139 | title: "Wheel scroll", 140 | defaultValue: true, 141 | enabledTitle: "On", 142 | disabledTitle: "Off", 143 | }, 144 | fill: { 145 | type: ControlType.Boolean, 146 | title: "Fill", 147 | defaultValue: false, 148 | enabledTitle: "Show", 149 | disabledTitle: "Hide", 150 | }, 151 | background: { 152 | type: ControlType.Color, 153 | title: "Fill Color", 154 | defaultValue: "#fff", 155 | hidden(props) { 156 | return props.fill === false 157 | }, 158 | }, 159 | }) 160 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@emotion/is-prop-valid@^0.7.3": 6 | version "0.7.3" 7 | resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc" 8 | integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA== 9 | dependencies: 10 | "@emotion/memoize" "0.7.1" 11 | 12 | "@emotion/memoize@0.7.1": 13 | version "0.7.1" 14 | resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" 15 | integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== 16 | 17 | "@framer/framer.default@^1.71.0": 18 | version "1.71.0" 19 | resolved "https://registry.framer.com/@framer/framer.default/-/@framer/framer.default-1.71.0.tgz#b9686541c57222025cfc7d582578c9fabe4419ee" 20 | integrity sha512-W0WKtDLtRUpVX9saVbwhCOv0nu6OGhQg7B5MWflXzsADLavhLkLjKWYgUCmICGE7xfqXdP5yeiMJJacXYgYlAA== 21 | dependencies: 22 | react-feather "^2.0.3" 23 | 24 | "@popmotion/easing@^1.0.1": 25 | version "1.0.2" 26 | resolved "https://registry.yarnpkg.com/@popmotion/easing/-/easing-1.0.2.tgz#17d925c45b4bf44189e5a38038d149df42d8c0b4" 27 | integrity sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw== 28 | 29 | "@popmotion/popcorn@^0.3.6": 30 | version "0.3.6" 31 | resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.3.6.tgz#eb4e3a04dd45c9516cc55b3350760ff47d7d55da" 32 | integrity sha512-B8Hdk4LOjCHTIiUd9KfD+9PgLR2iSe9T/X5G9IAl055KY2iAqodIEtTlO6EBpjP8tQWVfI3C4A/fEf0RqYqPPw== 33 | dependencies: 34 | "@popmotion/easing" "^1.0.1" 35 | framesync "^4.0.1" 36 | hey-listen "^1.0.5" 37 | style-value-types "^3.1.0" 38 | 39 | "@types/prop-types@*": 40 | version "15.7.0" 41 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.0.tgz#4c48fed958d6dcf9487195a0ef6456d5f6e0163a" 42 | integrity sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg== 43 | 44 | "@types/react@^16.4.16": 45 | version "16.8.13" 46 | resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.13.tgz#a82b15aad9ab91c40edca0d6889b7745ae24f053" 47 | integrity sha512-otJ4ntMuHGrvm67CdDJMAls4WqotmAmW0g3HmWi9LCjSWXrxoXY/nHXrtmMfvPEEmGFNm6NdgMsJmnfH820Qaw== 48 | dependencies: 49 | "@types/prop-types" "*" 50 | csstype "^2.2.0" 51 | 52 | csstype@^2.2.0: 53 | version "2.6.3" 54 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.3.tgz#b701e5968245bf9b08d54ac83d00b624e622a9fa" 55 | integrity sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg== 56 | 57 | framer-motion@^0.15.1: 58 | version "0.15.1" 59 | resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-0.15.1.tgz#0f226880627f372c95fb81f1cf818219224d8d66" 60 | integrity sha512-c78XYBHy+dVMmtuX1cimL8FQ+Nw+AXPvPAO5v4qUPIdRpML2s8Y9VImvWVJ3hJhuLcY3e1vPffhpwpsP55QzmA== 61 | dependencies: 62 | "@emotion/is-prop-valid" "^0.7.3" 63 | "@popmotion/popcorn" "^0.3.6" 64 | framesync "^4.0.2" 65 | hey-listen "^1.0.8" 66 | popmotion "^8.6.8" 67 | style-value-types "^3.1.0" 68 | stylefire "^4.1.0" 69 | 70 | framesync@^4.0.0, framesync@^4.0.1, framesync@^4.0.2: 71 | version "4.0.2" 72 | resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.0.2.tgz#b03b62852f12b0d80086b60834b089718f03cda5" 73 | integrity sha512-hQLD5NURHmzB4Symo6JJ5HDw2TWwhr6T3gw9aChNMsZvkxcD8U8Gcz/hllAOOMGE+HO3ScpRPahpXDQRgF19JQ== 74 | dependencies: 75 | hey-listen "^1.0.5" 76 | 77 | hey-listen@^1.0.4, hey-listen@^1.0.5, hey-listen@^1.0.8: 78 | version "1.0.8" 79 | resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" 80 | integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== 81 | 82 | "js-tokens@^3.0.0 || ^4.0.0": 83 | version "4.0.0" 84 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 85 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 86 | 87 | loose-envify@^1.4.0: 88 | version "1.4.0" 89 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 90 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 91 | dependencies: 92 | js-tokens "^3.0.0 || ^4.0.0" 93 | 94 | object-assign@^4.1.1: 95 | version "4.1.1" 96 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 97 | integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= 98 | 99 | popmotion@^8.6.8: 100 | version "8.6.8" 101 | resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-8.6.8.tgz#ccc1eaf1613f0611ba6b48d8171c25a518a1e917" 102 | integrity sha512-BRzdgEHLqicl18RH2+gev/gVAQsU6OJD2eXii+J8Jabvw//fTNdkKIi+o8YM1cFU2QH+bnAAr0PEC3eiXMPJ1w== 103 | dependencies: 104 | "@popmotion/easing" "^1.0.1" 105 | "@popmotion/popcorn" "^0.3.6" 106 | framesync "^4.0.0" 107 | hey-listen "^1.0.5" 108 | style-value-types "^3.1.0" 109 | stylefire "2.4.3" 110 | tslib "^1.9.1" 111 | 112 | prop-types@^15.7.2: 113 | version "15.7.2" 114 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" 115 | integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== 116 | dependencies: 117 | loose-envify "^1.4.0" 118 | object-assign "^4.1.1" 119 | react-is "^16.8.1" 120 | 121 | react-feather@^2.0.3: 122 | version "2.0.8" 123 | resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.8.tgz#455baf1470f756a57e2ad6c72545444ce5925781" 124 | integrity sha512-J0dCEOvOxpovHeOVj3+8mAhN3/UERTfX6rSxnV6x4E+0s+STY536jhSjRfpSvTQA0SSFjYr4KrpPfdsLmK+zZg== 125 | dependencies: 126 | prop-types "^15.7.2" 127 | 128 | react-is@^16.8.1: 129 | version "16.13.1" 130 | resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" 131 | integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== 132 | 133 | style-value-types@3.1.0, style-value-types@^3.0.6, style-value-types@^3.1.0: 134 | version "3.1.0" 135 | resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.0.tgz#07e06090e7581adff4c7955d544c1029d0663795" 136 | integrity sha512-7eaMZ8RKWIQUKHPQK7qv3zLYmvZNb2pCmO4WguXdVFymd2Qj9xqSUoo7LQ8Wd8eiLuoSd+uqzsvcodyvD8nn6Q== 137 | 138 | stylefire@2.4.3: 139 | version "2.4.3" 140 | resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-2.4.3.tgz#1b39847251000bda86ebf82fa2bb4be7dafe6bc4" 141 | integrity sha512-8rckFzuDlVWSyrkmnyTg8avadQavk2t6YkFKUUocsXoj/8NScOjb+/avbB4nrmoPtzD0kN7IyuhKq8jimIBTBQ== 142 | dependencies: 143 | framesync "^4.0.0" 144 | hey-listen "^1.0.4" 145 | style-value-types "^3.0.6" 146 | 147 | stylefire@^4.1.0: 148 | version "4.1.0" 149 | resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-4.1.0.tgz#859da6d98955e1e7e567be2305567819720d3b65" 150 | integrity sha512-DzrFVxqZ89QZt2qwNiMoEYPWPixtDdv48bCjDVHgokKAG7ZLK4YWjpDG3+AYD6tnIKpYCKjUXk0HcJFL8fl3Kw== 151 | dependencies: 152 | "@popmotion/popcorn" "^0.3.6" 153 | framesync "^4.0.0" 154 | hey-listen "^1.0.4" 155 | style-value-types "3.1.0" 156 | 157 | tslib@^1.9.1: 158 | version "1.9.3" 159 | resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" 160 | integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ== 161 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("framer"), (function webpackLoadOptionalExternalModule() { try { return require("framer-package-loader!@framer/framer.default"); } catch(e) {} }()), require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["framer", "framer-package-loader!@framer/framer.default", "react"], factory); 6 | else { 7 | var a = typeof exports === 'object' ? factory(require("framer"), (function webpackLoadOptionalExternalModule() { try { return require("framer-package-loader!@framer/framer.default"); } catch(e) {} }()), require("react")) : factory(root["Framer"], root["framer-package-loader!@framer/framer.default"], root["React"]); 8 | for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; 9 | } 10 | })(window, function(__WEBPACK_EXTERNAL_MODULE_framer__, __WEBPACK_EXTERNAL_MODULE_framer_package_loader_framer_framer_default__, __WEBPACK_EXTERNAL_MODULE_react__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ try { modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); } catch (error) { module.exports = { error } } 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 50 | /******/ } 51 | /******/ }; 52 | /******/ 53 | /******/ // define __esModule on exports 54 | /******/ __webpack_require__.r = function(exports) { 55 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 56 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 57 | /******/ } 58 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 59 | /******/ }; 60 | /******/ 61 | /******/ // create a fake namespace object 62 | /******/ // mode & 1: value is a module id, require it 63 | /******/ // mode & 2: merge all properties of value into the ns 64 | /******/ // mode & 4: return value when already ns object 65 | /******/ // mode & 8|1: behave like require 66 | /******/ __webpack_require__.t = function(value, mode) { 67 | /******/ if(mode & 1) value = __webpack_require__(value); 68 | /******/ if(mode & 8) return value; 69 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 70 | /******/ var ns = Object.create(null); 71 | /******/ __webpack_require__.r(ns); 72 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 73 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 74 | /******/ return ns; 75 | /******/ }; 76 | /******/ 77 | /******/ // getDefaultExport function for compatibility with non-harmony modules 78 | /******/ __webpack_require__.n = function(module) { 79 | /******/ var getter = module && module.__esModule ? 80 | /******/ function getDefault() { return module['default']; } : 81 | /******/ function getModuleExports() { return module; }; 82 | /******/ __webpack_require__.d(getter, 'a', getter); 83 | /******/ return getter; 84 | /******/ }; 85 | /******/ 86 | /******/ // Object.prototype.hasOwnProperty.call 87 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 88 | /******/ 89 | /******/ // __webpack_public_path__ 90 | /******/ __webpack_require__.p = ""; 91 | /******/ 92 | /******/ // asset url 93 | /******/ var __module_i = eval("typeof module !== 'undefined' ? module.i : ''"); 94 | /******/ var __framer_package = (/(node_modules\/.*)\/(?:build|dist)\/index\.js$/.exec(__module_i) || [])[1]; 95 | /******/ function __asset_url__(src) { return __WEBPACK_EXTERNAL_MODULE_framer__.serverURL(__framer_package, src) }; 96 | /******/ installedModules['framer/resource'] = { i: 'framer/resource', l: true, exports: { url: __asset_url__ } }; 97 | /******/ 98 | /******/ 99 | /******/ 100 | /******/ // Load entry module and return exports 101 | /******/ return __webpack_require__(__webpack_require__.s = "./entry.js"); 102 | /******/ }) 103 | /************************************************************************/ 104 | /******/ ({ 105 | 106 | /***/ "./code sync recursive \\.(t|j)s(x?)|\\.css$": 107 | /*!***************************************!*\ 108 | !*** ./code sync \.(t|j)s(x?)|\.css$ ***! 109 | \***************************************/ 110 | /*! no static exports found */ 111 | /***/ (function(module, exports, __webpack_require__) { 112 | 113 | var map = { 114 | "./NotConnected.tsx": "./code/NotConnected.tsx", 115 | "./StickyElement.tsx": "./code/StickyElement.tsx", 116 | "./StickyScroll.tsx": "./code/StickyScroll.tsx", 117 | "./canvas.tsx": "./code/canvas.tsx" 118 | }; 119 | 120 | 121 | function webpackContext(req) { 122 | var id = webpackContextResolve(req); 123 | return __webpack_require__(id); 124 | } 125 | function webpackContextResolve(req) { 126 | if(!__webpack_require__.o(map, req)) { 127 | var e = new Error("Cannot find module '" + req + "'"); 128 | e.code = 'MODULE_NOT_FOUND'; 129 | throw e; 130 | } 131 | return map[req]; 132 | } 133 | webpackContext.keys = function webpackContextKeys() { 134 | return Object.keys(map); 135 | }; 136 | webpackContext.resolve = webpackContextResolve; 137 | module.exports = webpackContext; 138 | webpackContext.id = "./code sync recursive \\.(t|j)s(x?)|\\.css$"; 139 | 140 | /***/ }), 141 | 142 | /***/ "./code/NotConnected.tsx": 143 | /*!*******************************!*\ 144 | !*** ./code/NotConnected.tsx ***! 145 | \*******************************/ 146 | /*! no static exports found */ 147 | /***/ (function(module, exports, __webpack_require__) { 148 | 149 | "use strict"; 150 | 151 | //# framerSourceMap=eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTm90Q29ubmVjdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vY29kZS9Ob3RDb25uZWN0ZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLCtCQUE4QjtBQUU5QixNQUFNLEtBQUssR0FBd0I7SUFDL0IsTUFBTSxFQUFFLE1BQU07SUFDZCxPQUFPLEVBQUUsTUFBTTtJQUNmLFVBQVUsRUFBRSxRQUFRO0lBQ3BCLGNBQWMsRUFBRSxRQUFRO0lBQ3hCLFNBQVMsRUFBRSxRQUFRO0lBQ25CLEtBQUssRUFBRSxTQUFTO0lBQ2hCLFVBQVUsRUFBRSx5QkFBeUI7SUFDckMsUUFBUSxFQUFFLFFBQVE7Q0FDckIsQ0FBQTtBQUVELFNBQVMsU0FBUyxDQUFDLEtBQUs7O0lBQ3BCLE1BQU0sRUFBRSxNQUFNLEdBQUcsb0JBQW9CLEVBQUUsR0FBRyxLQUFLLENBQUE7SUFDL0MsT0FBTyw2QkFBSyxLQUFLLEVBQUUsS0FBSztRQUFHLE1BQU07a0JBQVMsQ0FBQTtDQUM3QztBQUVZLFFBQUEsWUFBWSxHQUFHLFNBQVMsQ0FBQSJ9 152 | 153 | Object.defineProperty(exports, "__esModule", { value: true }); 154 | if (!window["__checkBudget__"]) 155 | window["__checkBudget__"] = function __checkBudget__() { }; 156 | if (!window["__checkComponentBudget__"]) 157 | window["__checkComponentBudget__"] = function __checkComponentBudget__() { }; 158 | if (!window["__checkFileBudget__"]) 159 | window["__checkFileBudget__"] = function __checkFileBudget__() { }; 160 | window["__checkFileBudget__"](); 161 | const React = __webpack_require__(/*! react */ "react"); 162 | const style = { 163 | height: "100%", 164 | display: "flex", 165 | alignItems: "center", 166 | justifyContent: "center", 167 | textAlign: "center", 168 | color: "#8855FF", 169 | background: "rgba(136, 85, 255, 0.1)", 170 | overflow: "hidden", 171 | }; 172 | function Component(props) { 173 | window["__checkBudget__"](); 174 | const { prompt = "Connect to content" } = props; 175 | return React.createElement("div", { style: style }, 176 | prompt, 177 | " \u2192"); 178 | } 179 | exports.NotConnected = Component; 180 | exports.__info__ = []; 181 | 182 | 183 | /***/ }), 184 | 185 | /***/ "./code/StickyElement.tsx": 186 | /*!********************************!*\ 187 | !*** ./code/StickyElement.tsx ***! 188 | \********************************/ 189 | /*! no static exports found */ 190 | /***/ (function(module, exports, __webpack_require__) { 191 | 192 | "use strict"; 193 | 194 | //# framerSourceMap=eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RpY2t5RWxlbWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL2NvZGUvU3RpY2t5RWxlbWVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSwrQkFBOEI7QUFDOUIsbUNBQTRDO0FBQzVDLGlEQUE2QztBQUM3QyxpREFBOEM7QUFFOUMsU0FBZ0IsYUFBYSxDQUFDLEtBQUs7O0lBQy9CLE1BQU0sRUFBRSxRQUFRLEtBQW1CLEtBQUssRUFBdEIsdUNBQXNCLENBQUE7SUFDeEMsTUFBTSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3BFLDRCQUFhLENBQ2hCLENBQUE7SUFFRCxNQUFNLGtCQUFrQixHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQzlELEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQy9DLENBQUE7SUFFRCxNQUFNLENBQUMsR0FBRyxFQUFFLE1BQU0sQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUE7SUFFdkMscUNBQXFDO0lBQ3JDLHFCQUFxQjtJQUNyQiw4RkFBOEY7SUFDOUYsTUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFOztRQUNuQyxJQUFJLElBQUksS0FBSyxJQUFJLEVBQUU7WUFDZixNQUFNLEVBQUUsQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUE7WUFDMUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFBO1lBQ1QsUUFBUSxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUE7U0FDM0I7S0FDSixFQUFFLEVBQUUsQ0FBQyxDQUFBO0lBRU4sdUdBQXVHO0lBQ3ZHLE1BQU0sS0FBSyxHQUFHLFNBQVMsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUE7SUFDcEMsTUFBTSxNQUFNLEdBQUcsS0FBSyxLQUFLLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFBO0lBRTdDLE1BQU0sTUFBTSxHQUFHLEdBQUcsR0FBRyxNQUFNLENBQUE7SUFFM0IsSUFBSSxRQUFRLENBQUE7SUFDWixJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsRUFBRTtRQUNkLFlBQVk7UUFDWixRQUFRLEdBQUcsTUFBTSxDQUFBO0tBQ3BCO1NBQU0sSUFBSSxNQUFNLEVBQUU7UUFDZixRQUFRLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQTtLQUN4QjtTQUFNO1FBQ0gsUUFBUSxHQUFHLFNBQVMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7S0FDMUQ7SUFFRCxNQUFNLENBQUMsR0FBRyxxQkFBWSxDQUNsQixjQUFjLEVBQ2QsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdkIsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLFFBQVEsR0FBRyxNQUFNLENBQUMsRUFDekIsRUFBRSxLQUFLLEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FDckIsQ0FBQTtJQUVELElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxFQUFFO1FBQ3RDLE9BQU8sb0JBQUMsMkJBQVksSUFBQyxNQUFNLEVBQUMsNkJBQTZCLEdBQUcsQ0FBQTtLQUMvRDtTQUFNO1FBQ0gsT0FBTyxDQUNILG9CQUFDLGNBQUssb0JBQ0UsU0FBUyxJQUNiLEdBQUcsRUFBRSxHQUFHLEVBQ1IsVUFBVSxFQUFFLElBQUksRUFDaEIsQ0FBQyxFQUFFLENBQUMsRUFDSixLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEVBQ3RCLEtBQUssRUFBQyxNQUFNLEVBQ1osTUFBTSxFQUFDLE1BQU0sS0FFWixrQkFBa0IsQ0FDZixDQUNYLENBQUE7S0FDSjtDQUNKO0FBL0RELHNDQStEQyJ9 195 | 196 | var __rest = (this && this.__rest) || function (s, e) { 197 | var t = {}; 198 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 199 | t[p] = s[p]; 200 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 201 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 202 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 203 | t[p[i]] = s[p[i]]; 204 | } 205 | return t; 206 | }; 207 | Object.defineProperty(exports, "__esModule", { value: true }); 208 | if (!window["__checkBudget__"]) 209 | window["__checkBudget__"] = function __checkBudget__() { }; 210 | if (!window["__checkComponentBudget__"]) 211 | window["__checkComponentBudget__"] = function __checkComponentBudget__() { }; 212 | if (!window["__checkFileBudget__"]) 213 | window["__checkFileBudget__"] = function __checkFileBudget__() { }; 214 | window["__checkFileBudget__"](); 215 | const React = __webpack_require__(/*! react */ "react"); 216 | const framer_1 = __webpack_require__(/*! framer */ "framer"); 217 | const NotConnected_1 = __webpack_require__(/*! ./NotConnected */ "./code/NotConnected.tsx"); 218 | const StickyScroll_1 = __webpack_require__(/*! ./StickyScroll */ "./code/StickyScroll.tsx"); 219 | function StickyElement(props) { 220 | window["__checkComponentBudget__"](); 221 | const { children } = props, restProps = __rest(props, ["children"]); 222 | const { contentOffsetY, origin, positions, dispatch } = React.useContext(StickyScroll_1.ScrollContext); 223 | const responsiveChildren = React.Children.map(children, (child) => React.cloneElement(child, { width: "100%" })); 224 | const [top, setTop] = React.useState(0); 225 | // Get the y position of the element, 226 | // store it in state, 227 | // and send it to the context provider where it will be added to an ordered array of positions 228 | const ref = React.useCallback((node) => { 229 | window["__checkBudget__"](); 230 | if (node !== null) { 231 | const { y } = node.getBoundingClientRect(); 232 | setTop(y); 233 | dispatch({ payload: y }); 234 | } 235 | }, []); 236 | // Find where this element is in the positions list so that we can get the position of the next element 237 | const index = positions.indexOf(top); 238 | const isLast = index === positions.length - 1; 239 | const yStick = top - origin; 240 | let yRelease; 241 | if (index === -1) { 242 | // Not found 243 | yRelease = yStick; 244 | } 245 | else if (isLast) { 246 | yRelease = yStick * 2; 247 | } 248 | else { 249 | yRelease = positions[index + 1] - props.height - origin; 250 | } 251 | const y = framer_1.useTransform(contentOffsetY, [0, -yStick, -yRelease], [0, 0, yRelease - yStick], { clamp: !isLast }); 252 | if (React.Children.count(children) === 0) { 253 | return React.createElement(NotConnected_1.NotConnected, { prompt: "Connect to something sticky" }); 254 | } 255 | else { 256 | return (React.createElement(framer_1.Frame, Object.assign({}, restProps, { ref: ref, background: null, y: y, style: { zIndex: 999 }, width: "100%", height: "100%" }), responsiveChildren)); 257 | } 258 | } 259 | exports.StickyElement = StickyElement; 260 | exports.__info__ = [{ "name": "StickyElement", "children": true, "type": "component" }]; 261 | 262 | 263 | /***/ }), 264 | 265 | /***/ "./code/StickyScroll.tsx": 266 | /*!*******************************!*\ 267 | !*** ./code/StickyScroll.tsx ***! 268 | \*******************************/ 269 | /*! no static exports found */ 270 | /***/ (function(module, exports, __webpack_require__) { 271 | 272 | "use strict"; 273 | 274 | //# framerSourceMap=eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RpY2t5U2Nyb2xsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vY29kZS9TdGlja3lTY3JvbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsK0JBQThCO0FBQzlCLG1DQU9lO0FBQ2YsaURBQTZDO0FBU2hDLFFBQUEsYUFBYSxHQUFHLEtBQUssQ0FBQyxhQUFhLENBQWdCO0lBQzVELGNBQWMsRUFBRSxvQkFBVyxDQUFDLENBQUMsQ0FBQztJQUM5QixNQUFNLEVBQUUsQ0FBQztJQUNULFNBQVMsRUFBRSxFQUFFO0lBQ2IsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUk7Q0FDdkIsQ0FBQyxDQUFBO0FBTUYsK0dBQStHO0FBQy9HLE1BQU0sT0FBTyxHQUFHLENBQUMsS0FBWSxFQUFFLE1BQU0sRUFBRSxFQUFFLENBQUMsQ0FBQztJQUN2QyxTQUFTLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUM7Q0FDeEUsQ0FBQyxDQUFBO0FBRUYsTUFBTSxZQUFZLEdBQVU7SUFDeEIsU0FBUyxFQUFFLEVBQUU7Q0FDaEIsQ0FBQTtBQUVELHNFQUFzRTtBQUN0RSxTQUFTLHVCQUF1QixDQUFDLEtBQUs7O0lBQ2xDLE1BQU0sYUFBYSxHQUFHLEtBQUssWUFBWSxvQkFBVyxDQUFBO0lBQ2xELE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQzlELE1BQU0sY0FBYyxHQUFHLHVCQUFjLENBQUMsWUFBWSxDQUFDLENBQUE7SUFFbkQsSUFBSSxhQUFhLEVBQUU7UUFDZixPQUFPLEtBQUssQ0FBQTtLQUNmO1NBQU07UUFDSCxPQUFPLGNBQWMsQ0FBQTtLQUN4QjtDQUNKO0FBRUQsU0FBZ0IsWUFBWSxDQUFDLEtBQUs7O0lBQzlCLE1BQU0sRUFDRixNQUFNLEVBQ04sSUFBSSxFQUNKLFVBQVUsRUFDVixRQUFRLEVBQ1IsY0FBYyxLQUVkLEtBQUssRUFETCx5RkFDSyxDQUFBO0lBRVQsSUFBSSxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEVBQUU7UUFDdEMsT0FBTyxvQkFBQywyQkFBWSxJQUFDLE1BQU0sRUFBQywrQkFBK0IsR0FBRyxDQUFBO0tBQ2pFO1NBQU07UUFDSCxNQUFNLHlCQUF5QixHQUFHLHVCQUF1QixDQUNyRCxjQUFjLENBQ2pCLENBQUE7UUFFRCxJQUFJLENBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLFlBQVksQ0FBQyxDQUFBO1FBRS9ELGlHQUFpRztRQUNqRyxNQUFNLENBQUMsU0FBUyxFQUFFLFlBQVksQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUE7UUFFbkQsTUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFOztZQUNuQyxJQUFJLElBQUksS0FBSyxJQUFJLEVBQUU7Z0JBQ2YsWUFBWSxDQUFDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQy9DO1NBQ0osRUFBRSxFQUFFLENBQUMsQ0FBQTtRQUVOLElBQUksS0FBSyxHQUFHO1lBQ1IsY0FBYyxFQUFFLHlCQUF5QjtZQUN6QyxNQUFNLEVBQUUsU0FBUyxHQUFHLE1BQU07WUFDMUIsU0FBUyxFQUFFLEtBQUssQ0FBQyxTQUFTO1lBQzFCLFFBQVEsRUFBRSxRQUFRO1NBQ3JCLENBQUE7UUFFRCxPQUFPLENBQ0gsb0JBQUMscUJBQWEsQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEtBQUs7WUFDaEMsNkJBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUU7Z0JBQ25ELG9CQUFDLGVBQU0sb0JBQ0MsU0FBUyxJQUNiLFVBQVUsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUNwQyxjQUFjLEVBQUUseUJBQXlCLEVBQ3pDLEtBQUssRUFBQyxNQUFNLEVBQ1osTUFBTSxFQUFDLE1BQU0sS0FFWixRQUFRLENBQ0osQ0FDUCxDQUNlLENBQzVCLENBQUE7S0FDSjtDQUNKO0FBbkRELG9DQW1EQztBQUVELFlBQVksQ0FBQyxZQUFZLEdBQUc7SUFDeEIsTUFBTSxFQUFFLENBQUM7SUFDVCxTQUFTLEVBQUUsVUFBVTtJQUNyQixhQUFhLEVBQUUsSUFBSTtJQUNuQixXQUFXLEVBQUUsSUFBSTtJQUNqQixZQUFZLEVBQUUsSUFBSTtJQUNsQixJQUFJLEVBQUUsS0FBSztJQUNYLFVBQVUsRUFBRSxNQUFNO0lBQ2xCLGNBQWMsRUFBRSxDQUFDO0lBQ2pCLFFBQVEsRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJO0NBQ3ZCLENBQUE7QUFFRCw0QkFBbUIsQ0FBQyxZQUFZLEVBQUU7SUFDOUIsTUFBTSxFQUFFO1FBQ0osSUFBSSxFQUFFLG9CQUFXLENBQUMsTUFBTTtRQUN4QixLQUFLLEVBQUUsUUFBUTtRQUNmLEdBQUcsRUFBRSxDQUFDO0tBQ1Q7SUFDRCxhQUFhLEVBQUU7UUFDWCxJQUFJLEVBQUUsb0JBQVcsQ0FBQyxPQUFPO1FBQ3pCLEtBQUssRUFBRSxNQUFNO1FBQ2IsWUFBWSxFQUFFLElBQUk7UUFDbEIsWUFBWSxFQUFFLFFBQVE7UUFDdEIsYUFBYSxFQUFFLEtBQUs7S0FDdkI7SUFDRCxXQUFXLEVBQUU7UUFDVCxJQUFJLEVBQUUsb0JBQVcsQ0FBQyxPQUFPO1FBQ3pCLEtBQUssRUFBRSxhQUFhO1FBQ3BCLFlBQVksRUFBRSxJQUFJO1FBQ2xCLFlBQVksRUFBRSxJQUFJO1FBQ2xCLGFBQWEsRUFBRSxLQUFLO0tBQ3ZCO0lBQ0QsWUFBWSxFQUFFO1FBQ1YsSUFBSSxFQUFFLG9CQUFXLENBQUMsT0FBTztRQUN6QixLQUFLLEVBQUUsY0FBYztRQUNyQixZQUFZLEVBQUUsSUFBSTtRQUNsQixZQUFZLEVBQUUsSUFBSTtRQUNsQixhQUFhLEVBQUUsS0FBSztLQUN2QjtJQUNELElBQUksRUFBRTtRQUNGLElBQUksRUFBRSxvQkFBVyxDQUFDLE9BQU87UUFDekIsS0FBSyxFQUFFLE1BQU07UUFDYixZQUFZLEVBQUUsS0FBSztRQUNuQixZQUFZLEVBQUUsTUFBTTtRQUNwQixhQUFhLEVBQUUsTUFBTTtLQUN4QjtJQUNELFVBQVUsRUFBRTtRQUNSLElBQUksRUFBRSxvQkFBVyxDQUFDLEtBQUs7UUFDdkIsS0FBSyxFQUFFLFlBQVk7UUFDbkIsWUFBWSxFQUFFLE1BQU07UUFDcEIsTUFBTSxDQUFDLEtBQUs7O1lBQ1IsT0FBTyxLQUFLLENBQUMsSUFBSSxLQUFLLEtBQUssQ0FBQTtTQUM5QjtLQUNKO0NBQ0osQ0FBQyxDQUFBIn0= 275 | 276 | var __rest = (this && this.__rest) || function (s, e) { 277 | var t = {}; 278 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 279 | t[p] = s[p]; 280 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 281 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 282 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 283 | t[p[i]] = s[p[i]]; 284 | } 285 | return t; 286 | }; 287 | Object.defineProperty(exports, "__esModule", { value: true }); 288 | if (!window["__checkBudget__"]) 289 | window["__checkBudget__"] = function __checkBudget__() { }; 290 | if (!window["__checkComponentBudget__"]) 291 | window["__checkComponentBudget__"] = function __checkComponentBudget__() { }; 292 | if (!window["__checkFileBudget__"]) 293 | window["__checkFileBudget__"] = function __checkFileBudget__() { }; 294 | window["__checkFileBudget__"](); 295 | const React = __webpack_require__(/*! react */ "react"); 296 | const framer_1 = __webpack_require__(/*! framer */ "framer"); 297 | const NotConnected_1 = __webpack_require__(/*! ./NotConnected */ "./code/NotConnected.tsx"); 298 | exports.ScrollContext = React.createContext({ 299 | contentOffsetY: framer_1.motionValue(0), 300 | origin: 0, 301 | positions: [], 302 | dispatch: () => null, 303 | }); 304 | // Receive the context consumer's position to build an ordered array listing the position of every StickElement 305 | const reducer = (state, action) => ({ 306 | positions: [...state.positions, action.payload].sort((a, b) => a - b), 307 | }); 308 | const initialState = { 309 | positions: [], 310 | }; 311 | // Take either a MotionValue or a number and always return MotionValue 312 | function useMotionValueGenerator(value) { 313 | window["__checkBudget__"](); 314 | const isMotionValue = value instanceof framer_1.MotionValue; 315 | const initialValue = Number(value) === NaN ? 0 : Number(value); 316 | const newMotionValue = framer_1.useMotionValue(initialValue); 317 | if (isMotionValue) { 318 | return value; 319 | } 320 | else { 321 | return newMotionValue; 322 | } 323 | } 324 | function StickyScroll(props) { 325 | window["__checkComponentBudget__"](); 326 | const { offset, fill, background, children, contentOffsetY } = props, restProps = __rest(props, ["offset", "fill", "background", "children", "contentOffsetY"]); 327 | if (React.Children.count(children) === 0) { 328 | return React.createElement(NotConnected_1.NotConnected, { prompt: "Connect to scrollable content" }); 329 | } 330 | else { 331 | const contentOffsetYmotionValue = useMotionValueGenerator(contentOffsetY); 332 | let [state, dispatch] = React.useReducer(reducer, initialState); 333 | // We need to know the position of the top of the scroll to calculate stick and release positions 334 | const [scrollTop, setScrollTop] = React.useState(0); 335 | const ref = React.useCallback((node) => { 336 | window["__checkBudget__"](); 337 | if (node !== null) { 338 | setScrollTop(node.getBoundingClientRect().y); 339 | } 340 | }, []); 341 | let value = { 342 | contentOffsetY: contentOffsetYmotionValue, 343 | origin: scrollTop + offset, 344 | positions: state.positions, 345 | dispatch: dispatch, 346 | }; 347 | return (React.createElement(exports.ScrollContext.Provider, { value: value }, 348 | React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, 349 | React.createElement(framer_1.Scroll, Object.assign({}, restProps, { background: fill ? background : null, contentOffsetY: contentOffsetYmotionValue, width: "100%", height: "100%" }), children)))); 350 | } 351 | } 352 | exports.StickyScroll = StickyScroll; 353 | StickyScroll.defaultProps = { 354 | offset: 0, 355 | direction: "vertical", 356 | directionLock: true, 357 | dragEnabled: true, 358 | wheelEnabled: true, 359 | fill: false, 360 | background: "#fff", 361 | contentOffsetY: 0, 362 | onScroll: () => null, 363 | }; 364 | framer_1.addPropertyControls(StickyScroll, { 365 | offset: { 366 | type: framer_1.ControlType.Number, 367 | title: "Offset", 368 | min: 0, 369 | }, 370 | directionLock: { 371 | type: framer_1.ControlType.Boolean, 372 | title: "Lock", 373 | defaultValue: true, 374 | enabledTitle: "1 Axis", 375 | disabledTitle: "Off", 376 | }, 377 | dragEnabled: { 378 | type: framer_1.ControlType.Boolean, 379 | title: "Drag scroll", 380 | defaultValue: true, 381 | enabledTitle: "On", 382 | disabledTitle: "Off", 383 | }, 384 | wheelEnabled: { 385 | type: framer_1.ControlType.Boolean, 386 | title: "Wheel scroll", 387 | defaultValue: true, 388 | enabledTitle: "On", 389 | disabledTitle: "Off", 390 | }, 391 | fill: { 392 | type: framer_1.ControlType.Boolean, 393 | title: "Fill", 394 | defaultValue: false, 395 | enabledTitle: "Show", 396 | disabledTitle: "Hide", 397 | }, 398 | background: { 399 | type: framer_1.ControlType.Color, 400 | title: "Fill Color", 401 | defaultValue: "#fff", 402 | hidden(props) { 403 | window["__checkBudget__"](); 404 | return props.fill === false; 405 | }, 406 | }, 407 | }); 408 | exports.__info__ = [{ "name": "StickyScroll", "children": true, "type": "component" }]; 409 | 410 | 411 | /***/ }), 412 | 413 | /***/ "./code/canvas.tsx": 414 | /*!*************************!*\ 415 | !*** ./code/canvas.tsx ***! 416 | \*************************/ 417 | /*! no static exports found */ 418 | /***/ (function(module, exports, __webpack_require__) { 419 | 420 | "use strict"; 421 | 422 | Object.defineProperty(exports, "__esModule", { value: true }); 423 | if (!window["__checkBudget__"]) 424 | window["__checkBudget__"] = function __checkBudget__() { }; 425 | if (!window["__checkComponentBudget__"]) 426 | window["__checkComponentBudget__"] = function __checkComponentBudget__() { }; 427 | if (!window["__checkFileBudget__"]) 428 | window["__checkFileBudget__"] = function __checkFileBudget__() { }; 429 | window["__checkFileBudget__"](); 430 | // WARNING: this file is auto generated, any changes will be lost 431 | const framer_1 = __webpack_require__(/*! framer */ "framer"); 432 | const canvas = framer_1.CanvasStore.shared({"children":[]}); 433 | 434 | 435 | /***/ }), 436 | 437 | /***/ "./designDependencies.js": 438 | /*!*******************************!*\ 439 | !*** ./designDependencies.js ***! 440 | \*******************************/ 441 | /*! no static exports found */ 442 | /***/ (function(module, exports) { 443 | 444 | 445 | const designs = {} 446 | 447 | // The packages are passed in through a template 448 | designs["@framer/framer.default"] = { 449 | "root" : { 450 | "__class" : "RootNode", 451 | "children" : [ 452 | { 453 | "__class" : "FrameNode", 454 | "aspectRatio" : null, 455 | "blendingEnabled" : 0, 456 | "blendingMode" : "normal", 457 | "bottom" : null, 458 | "centerAnchorX" : 0, 459 | "centerAnchorY" : 0, 460 | "children" : [ 461 | { 462 | "__class" : "CodeComponentNode", 463 | "aspectRatio" : null, 464 | "bottom" : 141, 465 | "centerAnchorX" : 0.49886363636363634, 466 | "centerAnchorY" : 0.58269720101781175, 467 | "children" : [ 468 | 469 | ], 470 | "clip" : true, 471 | "codeComponentIdentifier" : ".\/SegmentedControl.tsx_SegmentedControl", 472 | "codeComponentPackageVersion" : null, 473 | "codeComponentProps" : { 474 | "activeBackground" : "#ffffff", 475 | "activeBorderColor" : "rgba(0, 0, 0, 0)", 476 | "activeBorderSize" : 1, 477 | "activeTextColor" : "#0099ff", 478 | "bottomActiveBorderSize" : 1, 479 | "bottomLeftBorderRadius" : 8, 480 | "bottomRightBorderRadius" : 8, 481 | "defaultSegment" : 1, 482 | "direction" : "horizontal", 483 | "disabled" : false, 484 | "disabledBackground" : "#ebebeb", 485 | "disabledBorderColor" : "rgba(0, 0, 0, 0)", 486 | "disabledBorderSize" : 1, 487 | "disabledTextColor" : "#AAAAAA", 488 | "divider" : false, 489 | "dividerColor" : "#ADADAD", 490 | "font" : false, 491 | "fontFamily" : "", 492 | "fontSize" : 12, 493 | "fontWeight" : 100, 494 | "gap" : 0, 495 | "inactiveBackground" : "rgba(0, 0, 0, 0)", 496 | "inactiveBorderColor" : "rgba(0, 0, 0, 0)", 497 | "inactiveBorderSize" : 1, 498 | "inactiveTextColor" : "#BBBBBB", 499 | "isMixedActiveBorder" : false, 500 | "isMixedBorderRadius" : false, 501 | "leftActiveBorderSize" : 1, 502 | "radius" : 8, 503 | "rightActiveBorderSize" : 1, 504 | "segments" : [ 505 | { 506 | "enabled" : true, 507 | "type" : "string", 508 | "value" : "Item 1" 509 | }, 510 | { 511 | "enabled" : true, 512 | "type" : "string", 513 | "value" : "Item 2" 514 | }, 515 | { 516 | "enabled" : true, 517 | "type" : "string", 518 | "value" : "Item 3" 519 | } 520 | ], 521 | "segmentTransition" : { 522 | "damping" : 60, 523 | "delay" : 0, 524 | "duration" : 0.29999999999999999, 525 | "ease" : [ 526 | 0.44, 527 | 0, 528 | 0.56000000000000005, 529 | 1 530 | ], 531 | "mass" : 1, 532 | "stiffness" : 500, 533 | "type" : "spring" 534 | }, 535 | "shadow" : true, 536 | "slide" : true, 537 | "topActiveBorderSize" : 1, 538 | "topLeftBorderRadius" : 8, 539 | "topRightBorderRadius" : 8, 540 | "trackColor" : "#ebebeb", 541 | "variant" : "active" 542 | }, 543 | "codeOverrideEnabled" : false, 544 | "constraintsLocked" : false, 545 | "duplicatedFrom" : [ 546 | "P93fU2NLp" 547 | ], 548 | "exportOptions" : [ 549 | 550 | ], 551 | "fillColor" : "rgba(255,255,255,1)", 552 | "fillEnabled" : false, 553 | "fillImage" : null, 554 | "fillImageOriginalName" : null, 555 | "fillImagePixelHeight" : null, 556 | "fillImagePixelWidth" : null, 557 | "fillImageResize" : "fill", 558 | "fillType" : "color", 559 | "height" : 46, 560 | "heightType" : 0, 561 | "id" : "lcDzVF4Ph", 562 | "intrinsicHeight" : 45, 563 | "intrinsicWidth" : 300, 564 | "left" : 36, 565 | "locked" : false, 566 | "name" : null, 567 | "opacity" : 1, 568 | "originalid" : null, 569 | "parentid" : "Gg4vYAeh1", 570 | "previewSettings" : null, 571 | "radius" : 0, 572 | "radiusBottomLeft" : 0, 573 | "radiusBottomRight" : 0, 574 | "radiusIsRelative" : false, 575 | "radiusPerCorner" : false, 576 | "radiusTopLeft" : 0, 577 | "radiusTopRight" : 0, 578 | "right" : 37, 579 | "rotation" : 0, 580 | "top" : null, 581 | "visible" : true, 582 | "width" : 367, 583 | "widthType" : 0 584 | }, 585 | { 586 | "__class" : "CodeComponentNode", 587 | "aspectRatio" : null, 588 | "bottom" : null, 589 | "centerAnchorX" : 0, 590 | "centerAnchorY" : 0, 591 | "children" : [ 592 | 593 | ], 594 | "clip" : true, 595 | "codeComponentIdentifier" : ".\/SegmentedControl.tsx_SegmentedControl", 596 | "codeComponentPackageVersion" : null, 597 | "codeComponentProps" : { 598 | "activeBackground" : "#ffffff", 599 | "activeBorderColor" : "rgba(0, 0, 0, 0)", 600 | "activeBorderSize" : 1, 601 | "activeTextColor" : "#0099ff", 602 | "bottomActiveBorderSize" : 1, 603 | "bottomLeftBorderRadius" : 8, 604 | "bottomRightBorderRadius" : 8, 605 | "defaultSegment" : 1, 606 | "direction" : "horizontal", 607 | "disabled" : false, 608 | "disabledBackground" : "#ebebeb", 609 | "disabledBorderColor" : "rgba(0, 0, 0, 0)", 610 | "disabledBorderSize" : 1, 611 | "disabledTextColor" : "#AAAAAA", 612 | "divider" : false, 613 | "dividerColor" : "#ADADAD", 614 | "font" : true, 615 | "fontFamily" : "georgia", 616 | "fontSize" : 12, 617 | "fontWeight" : 100, 618 | "gap" : 0, 619 | "inactiveBackground" : "rgba(0, 0, 0, 0)", 620 | "inactiveBorderColor" : "rgba(0, 0, 0, 0)", 621 | "inactiveBorderSize" : 1, 622 | "inactiveTextColor" : "#BBBBBB", 623 | "isMixedActiveBorder" : false, 624 | "isMixedBorderRadius" : false, 625 | "leftActiveBorderSize" : 1, 626 | "radius" : 8, 627 | "rightActiveBorderSize" : 1, 628 | "segments" : [ 629 | { 630 | "enabled" : true, 631 | "type" : "string", 632 | "value" : "Item 1" 633 | }, 634 | { 635 | "enabled" : true, 636 | "type" : "string", 637 | "value" : "Item 2" 638 | }, 639 | { 640 | "enabled" : true, 641 | "type" : "string", 642 | "value" : "Item 3" 643 | } 644 | ], 645 | "segmentTransition" : { 646 | "damping" : 60, 647 | "delay" : 0, 648 | "duration" : 0.29999999999999999, 649 | "ease" : [ 650 | 0.44, 651 | 0, 652 | 0.56000000000000005, 653 | 1 654 | ], 655 | "mass" : 1, 656 | "stiffness" : 500, 657 | "type" : "spring" 658 | }, 659 | "shadow" : true, 660 | "slide" : true, 661 | "topActiveBorderSize" : 1, 662 | "topLeftBorderRadius" : 8, 663 | "topRightBorderRadius" : 8, 664 | "trackColor" : "#ebebeb", 665 | "variant" : "active" 666 | }, 667 | "codeOverrideEnabled" : false, 668 | "constraintsLocked" : false, 669 | "duplicatedFrom" : [ 670 | "nIIuzs2RG" 671 | ], 672 | "exportOptions" : [ 673 | 674 | ], 675 | "fillColor" : "rgba(255,255,255,1)", 676 | "fillEnabled" : false, 677 | "fillImage" : null, 678 | "fillImageOriginalName" : null, 679 | "fillImagePixelHeight" : null, 680 | "fillImagePixelWidth" : null, 681 | "fillImageResize" : "fill", 682 | "fillType" : "color", 683 | "height" : 45, 684 | "heightType" : 0, 685 | "id" : "wODYnpJi7", 686 | "intrinsicHeight" : 45, 687 | "intrinsicWidth" : 300, 688 | "left" : 71, 689 | "locked" : false, 690 | "name" : null, 691 | "opacity" : 1, 692 | "originalid" : null, 693 | "parentid" : "Gg4vYAeh1", 694 | "previewSettings" : null, 695 | "radius" : 0, 696 | "radiusBottomLeft" : 0, 697 | "radiusBottomRight" : 0, 698 | "radiusIsRelative" : false, 699 | "radiusPerCorner" : false, 700 | "radiusTopLeft" : 0, 701 | "radiusTopRight" : 0, 702 | "right" : null, 703 | "rotation" : 0, 704 | "top" : 294, 705 | "visible" : true, 706 | "width" : 300, 707 | "widthType" : 0 708 | }, 709 | { 710 | "__class" : "CodeComponentNode", 711 | "aspectRatio" : null, 712 | "bottom" : null, 713 | "centerAnchorX" : 0.26931818181818185, 714 | "centerAnchorY" : 0.26335877862595419, 715 | "children" : [ 716 | 717 | ], 718 | "clip" : true, 719 | "codeComponentIdentifier" : ".\/Button.tsx_Button", 720 | "codeComponentPackageVersion" : null, 721 | "codeComponentProps" : { 722 | "alignment" : "center", 723 | "bottomLeft" : 10, 724 | "bottomRight" : 10, 725 | "colorTransition" : { 726 | "damping" : 60, 727 | "delay" : 0, 728 | "duration" : 0.29999999999999999, 729 | "ease" : [ 730 | 0.44, 731 | 0, 732 | 0.56000000000000005, 733 | 1 734 | ], 735 | "mass" : 1, 736 | "stiffness" : 500, 737 | "type" : "spring" 738 | }, 739 | "defaultBackground" : "#0099FF", 740 | "defaultTextColor" : "#ffffff", 741 | "disabled" : false, 742 | "disabledBackground" : "#f3f3f3", 743 | "disabledTextColor" : "#AAAAAA", 744 | "font" : true, 745 | "fontFamily" : "", 746 | "fontSize" : 14, 747 | "fontWeight" : 600, 748 | "hoverBackground" : "#0077FF", 749 | "hoverTextColor" : "#ffffff", 750 | "isMixed" : false, 751 | "padding" : 10, 752 | "paddingBottom" : 0, 753 | "paddingLeft" : 0, 754 | "paddingPerSide" : false, 755 | "paddingRight" : 0, 756 | "paddingTop" : 0, 757 | "pressedBackground" : "#0088FF", 758 | "pressedTextColor" : "#ffffff", 759 | "radius" : 10, 760 | "scaleTransition" : { 761 | "damping" : 30, 762 | "delay" : 0, 763 | "duration" : 0.29999999999999999, 764 | "mass" : 1, 765 | "stiffness" : 600, 766 | "type" : "spring" 767 | }, 768 | "shadow" : true, 769 | "text" : "Hello Framer!", 770 | "topLeft" : 10, 771 | "topRight" : 10, 772 | "variant" : "Default", 773 | "whileHoverScale" : 1.1000000000000001, 774 | "whileTapScale" : 0.94999999999999996 775 | }, 776 | "codeOverrideEnabled" : false, 777 | "constraintsLocked" : false, 778 | "duplicatedFrom" : [ 779 | "e4jL7E1Pd" 780 | ], 781 | "exportOptions" : [ 782 | 783 | ], 784 | "fillColor" : "rgba(255,255,255,1)", 785 | "fillEnabled" : false, 786 | "fillImage" : null, 787 | "fillImageOriginalName" : null, 788 | "fillImagePixelHeight" : null, 789 | "fillImagePixelWidth" : null, 790 | "fillImageResize" : "fill", 791 | "fillType" : "color", 792 | "height" : 45, 793 | "heightType" : 0, 794 | "id" : "tsHYmdJBD", 795 | "intrinsicHeight" : 45, 796 | "intrinsicWidth" : 135, 797 | "left" : 51, 798 | "locked" : false, 799 | "name" : null, 800 | "opacity" : 1, 801 | "originalid" : null, 802 | "parentid" : "Gg4vYAeh1", 803 | "previewSettings" : null, 804 | "radius" : 0, 805 | "radiusBottomLeft" : 0, 806 | "radiusBottomRight" : 0, 807 | "radiusIsRelative" : false, 808 | "radiusPerCorner" : false, 809 | "radiusTopLeft" : 0, 810 | "radiusTopRight" : 0, 811 | "right" : null, 812 | "rotation" : 0, 813 | "top" : 81, 814 | "visible" : true, 815 | "width" : 135, 816 | "widthType" : 0 817 | } 818 | ], 819 | "clip" : true, 820 | "codeOverrideEnabled" : false, 821 | "constraintsLocked" : false, 822 | "duplicatedFrom" : null, 823 | "exportOptions" : [ 824 | 825 | ], 826 | "fillColor" : "white", 827 | "fillEnabled" : true, 828 | "fillImage" : null, 829 | "fillImageOriginalName" : null, 830 | "fillImagePixelHeight" : null, 831 | "fillImagePixelWidth" : null, 832 | "fillImageResize" : "fill", 833 | "fillType" : "color", 834 | "framePreset" : null, 835 | "guidesX" : [ 836 | 837 | ], 838 | "guidesY" : [ 839 | 840 | ], 841 | "height" : 393, 842 | "heightType" : 0, 843 | "id" : "Gg4vYAeh1", 844 | "intrinsicHeight" : null, 845 | "intrinsicWidth" : null, 846 | "isExternalMaster" : null, 847 | "isMaster" : false, 848 | "isTarget" : false, 849 | "left" : 65, 850 | "locked" : false, 851 | "name" : null, 852 | "opacity" : 1, 853 | "originalid" : null, 854 | "parentid" : "uXpaPrDOp", 855 | "previewSettings" : null, 856 | "radius" : 0, 857 | "radiusBottomLeft" : 0, 858 | "radiusBottomRight" : 0, 859 | "radiusIsRelative" : false, 860 | "radiusPerCorner" : false, 861 | "radiusTopLeft" : 0, 862 | "radiusTopRight" : 0, 863 | "replicaInfo" : null, 864 | "right" : null, 865 | "rotation" : 0, 866 | "top" : -67, 867 | "visible" : true, 868 | "width" : 440, 869 | "widthType" : 0 870 | }, 871 | { 872 | "__class" : "FrameNode", 873 | "aspectRatio" : null, 874 | "blendingEnabled" : 0, 875 | "blendingMode" : "normal", 876 | "bottom" : null, 877 | "centerAnchorX" : 0, 878 | "centerAnchorY" : 0, 879 | "children" : [ 880 | 881 | ], 882 | "clip" : true, 883 | "codeOverrideEnabled" : false, 884 | "constraintsLocked" : false, 885 | "duplicatedFrom" : [ 886 | "Gg4vYAeh1" 887 | ], 888 | "exportOptions" : [ 889 | 890 | ], 891 | "fillColor" : "white", 892 | "fillEnabled" : true, 893 | "fillImage" : null, 894 | "fillImageOriginalName" : null, 895 | "fillImagePixelHeight" : null, 896 | "fillImagePixelWidth" : null, 897 | "fillImageResize" : "fill", 898 | "fillType" : "color", 899 | "framePreset" : null, 900 | "guidesX" : [ 901 | 902 | ], 903 | "guidesY" : [ 904 | 905 | ], 906 | "height" : 393, 907 | "heightType" : 0, 908 | "id" : "fg_XnlFJw", 909 | "intrinsicHeight" : null, 910 | "intrinsicWidth" : null, 911 | "isExternalMaster" : null, 912 | "isMaster" : false, 913 | "isTarget" : false, 914 | "left" : 534, 915 | "locked" : false, 916 | "name" : null, 917 | "opacity" : 1, 918 | "originalid" : null, 919 | "parentid" : "uXpaPrDOp", 920 | "previewSettings" : null, 921 | "radius" : 0, 922 | "radiusBottomLeft" : 0, 923 | "radiusBottomRight" : 0, 924 | "radiusIsRelative" : false, 925 | "radiusPerCorner" : false, 926 | "radiusTopLeft" : 0, 927 | "radiusTopRight" : 0, 928 | "replicaInfo" : null, 929 | "right" : null, 930 | "rotation" : 0, 931 | "top" : -67, 932 | "visible" : true, 933 | "width" : 440, 934 | "widthType" : 0 935 | }, 936 | { 937 | "__class" : "FrameNode", 938 | "aspectRatio" : null, 939 | "blendingEnabled" : 0, 940 | "blendingMode" : "normal", 941 | "bottom" : null, 942 | "centerAnchorX" : 0, 943 | "centerAnchorY" : 0, 944 | "children" : [ 945 | 946 | ], 947 | "clip" : true, 948 | "codeOverrideEnabled" : false, 949 | "constraintsLocked" : false, 950 | "duplicatedFrom" : null, 951 | "exportOptions" : [ 952 | 953 | ], 954 | "fillColor" : "white", 955 | "fillEnabled" : true, 956 | "fillImage" : null, 957 | "fillImageOriginalName" : null, 958 | "fillImagePixelHeight" : null, 959 | "fillImagePixelWidth" : null, 960 | "fillImageResize" : "fill", 961 | "fillType" : "color", 962 | "framePreset" : null, 963 | "guidesX" : [ 964 | 965 | ], 966 | "guidesY" : [ 967 | 968 | ], 969 | "height" : 237, 970 | "heightType" : 0, 971 | "id" : "QMb8z48BW", 972 | "intrinsicHeight" : null, 973 | "intrinsicWidth" : null, 974 | "isExternalMaster" : null, 975 | "isMaster" : false, 976 | "isTarget" : false, 977 | "left" : 41, 978 | "locked" : false, 979 | "name" : null, 980 | "opacity" : 1, 981 | "originalid" : null, 982 | "parentid" : "uXpaPrDOp", 983 | "previewSettings" : null, 984 | "radius" : 0, 985 | "radiusBottomLeft" : 0, 986 | "radiusBottomRight" : 0, 987 | "radiusIsRelative" : false, 988 | "radiusPerCorner" : false, 989 | "radiusTopLeft" : 0, 990 | "radiusTopRight" : 0, 991 | "replicaInfo" : null, 992 | "right" : null, 993 | "rotation" : 0, 994 | "top" : -356, 995 | "visible" : true, 996 | "width" : 285, 997 | "widthType" : 0 998 | }, 999 | { 1000 | "__class" : "FrameNode", 1001 | "aspectRatio" : null, 1002 | "blendingEnabled" : 0, 1003 | "blendingMode" : "normal", 1004 | "bottom" : null, 1005 | "centerAnchorX" : 0, 1006 | "centerAnchorY" : 0, 1007 | "children" : [ 1008 | 1009 | ], 1010 | "clip" : true, 1011 | "codeOverrideEnabled" : false, 1012 | "constraintsLocked" : false, 1013 | "duplicatedFrom" : [ 1014 | "QMb8z48BW" 1015 | ], 1016 | "exportOptions" : [ 1017 | 1018 | ], 1019 | "fillColor" : "white", 1020 | "fillEnabled" : true, 1021 | "fillImage" : null, 1022 | "fillImageOriginalName" : null, 1023 | "fillImagePixelHeight" : null, 1024 | "fillImagePixelWidth" : null, 1025 | "fillImageResize" : "fill", 1026 | "fillType" : "color", 1027 | "framePreset" : null, 1028 | "guidesX" : [ 1029 | 1030 | ], 1031 | "guidesY" : [ 1032 | 1033 | ], 1034 | "height" : 237, 1035 | "heightType" : 0, 1036 | "id" : "hG4KsEcH0", 1037 | "intrinsicHeight" : null, 1038 | "intrinsicWidth" : null, 1039 | "isExternalMaster" : null, 1040 | "isMaster" : false, 1041 | "isTarget" : false, 1042 | "left" : 469, 1043 | "locked" : false, 1044 | "name" : null, 1045 | "opacity" : 1, 1046 | "originalid" : null, 1047 | "parentid" : "uXpaPrDOp", 1048 | "previewSettings" : null, 1049 | "radius" : 0, 1050 | "radiusBottomLeft" : 0, 1051 | "radiusBottomRight" : 0, 1052 | "radiusIsRelative" : false, 1053 | "radiusPerCorner" : false, 1054 | "radiusTopLeft" : 0, 1055 | "radiusTopRight" : 0, 1056 | "replicaInfo" : null, 1057 | "right" : null, 1058 | "rotation" : 0, 1059 | "top" : -198, 1060 | "visible" : true, 1061 | "width" : 285, 1062 | "widthType" : 0 1063 | }, 1064 | { 1065 | "__class" : "FrameNode", 1066 | "aspectRatio" : null, 1067 | "blendingEnabled" : 0, 1068 | "blendingMode" : "normal", 1069 | "bottom" : null, 1070 | "centerAnchorX" : 0, 1071 | "centerAnchorY" : 0, 1072 | "children" : [ 1073 | { 1074 | "__class" : "CodeComponentNode", 1075 | "aspectRatio" : null, 1076 | "bottom" : null, 1077 | "centerAnchorX" : 0.6675191815856778, 1078 | "centerAnchorY" : 0.24871355060034306, 1079 | "children" : [ 1080 | 1081 | ], 1082 | "clip" : true, 1083 | "codeComponentIdentifier" : ".\/Gif.tsx_Gif", 1084 | "codeComponentPackageVersion" : null, 1085 | "codeComponentProps" : { 1086 | "bottomLeft" : 0, 1087 | "bottomRight" : 0, 1088 | "isMixed" : false, 1089 | "lockImage" : true, 1090 | "radius" : 0, 1091 | "search" : "Abstract", 1092 | "topLeft" : 0, 1093 | "topRight" : 0 1094 | }, 1095 | "codeOverrideEnabled" : false, 1096 | "constraintsLocked" : false, 1097 | "duplicatedFrom" : [ 1098 | "QaqJbpiFu" 1099 | ], 1100 | "exportOptions" : [ 1101 | 1102 | ], 1103 | "fillColor" : "rgba(255,255,255,1)", 1104 | "fillEnabled" : false, 1105 | "fillImage" : null, 1106 | "fillImageOriginalName" : null, 1107 | "fillImagePixelHeight" : null, 1108 | "fillImagePixelWidth" : null, 1109 | "fillImageResize" : "fill", 1110 | "fillType" : "color", 1111 | "height" : 200, 1112 | "heightType" : 0, 1113 | "id" : "dtlaQwj9t", 1114 | "intrinsicHeight" : 200, 1115 | "intrinsicWidth" : 200, 1116 | "left" : null, 1117 | "locked" : false, 1118 | "name" : null, 1119 | "opacity" : 1, 1120 | "originalid" : null, 1121 | "parentid" : "yR_krJJF1", 1122 | "previewSettings" : null, 1123 | "radius" : 0, 1124 | "radiusBottomLeft" : 0, 1125 | "radiusBottomRight" : 0, 1126 | "radiusIsRelative" : false, 1127 | "radiusPerCorner" : false, 1128 | "radiusTopLeft" : 0, 1129 | "radiusTopRight" : 0, 1130 | "right" : 160, 1131 | "rotation" : 0, 1132 | "top" : 45, 1133 | "visible" : true, 1134 | "width" : 200, 1135 | "widthType" : 0 1136 | }, 1137 | { 1138 | "__class" : "CodeComponentNode", 1139 | "aspectRatio" : null, 1140 | "bottom" : 98, 1141 | "centerAnchorX" : 0.78132992327365725, 1142 | "centerAnchorY" : 0.660377358490566, 1143 | "children" : [ 1144 | 1145 | ], 1146 | "clip" : true, 1147 | "codeComponentIdentifier" : ".\/Gif.tsx_Gif", 1148 | "codeComponentPackageVersion" : null, 1149 | "codeComponentProps" : { 1150 | "bottomLeft" : 0, 1151 | "bottomRight" : 0, 1152 | "isMixed" : false, 1153 | "lockImage" : false, 1154 | "radius" : 0, 1155 | "search" : "Abstract", 1156 | "topLeft" : 0, 1157 | "topRight" : 0 1158 | }, 1159 | "codeOverrideEnabled" : false, 1160 | "constraintsLocked" : false, 1161 | "duplicatedFrom" : [ 1162 | "QaqJbpiFu", 1163 | "dtlaQwj9t" 1164 | ], 1165 | "exportOptions" : [ 1166 | 1167 | ], 1168 | "fillColor" : "rgba(255,255,255,1)", 1169 | "fillEnabled" : false, 1170 | "fillImage" : null, 1171 | "fillImageOriginalName" : null, 1172 | "fillImagePixelHeight" : null, 1173 | "fillImagePixelWidth" : null, 1174 | "fillImageResize" : "fill", 1175 | "fillType" : "color", 1176 | "height" : 200, 1177 | "heightType" : 0, 1178 | "id" : "RRyZWAU5Y", 1179 | "intrinsicHeight" : 200, 1180 | "intrinsicWidth" : 200, 1181 | "left" : null, 1182 | "locked" : false, 1183 | "name" : null, 1184 | "opacity" : 1, 1185 | "originalid" : null, 1186 | "parentid" : "yR_krJJF1", 1187 | "previewSettings" : null, 1188 | "radius" : 0, 1189 | "radiusBottomLeft" : 0, 1190 | "radiusBottomRight" : 0, 1191 | "radiusIsRelative" : false, 1192 | "radiusPerCorner" : false, 1193 | "radiusTopLeft" : 0, 1194 | "radiusTopRight" : 0, 1195 | "right" : 71, 1196 | "rotation" : 0, 1197 | "top" : null, 1198 | "visible" : true, 1199 | "width" : 200, 1200 | "widthType" : 0 1201 | }, 1202 | { 1203 | "__class" : "CodeComponentNode", 1204 | "aspectRatio" : null, 1205 | "bottom" : 53, 1206 | "centerAnchorX" : 0.33503836317135549, 1207 | "centerAnchorY" : 0.73756432246998282, 1208 | "children" : [ 1209 | 1210 | ], 1211 | "clip" : true, 1212 | "codeComponentIdentifier" : ".\/Gif.tsx_Gif", 1213 | "codeComponentPackageVersion" : null, 1214 | "codeComponentProps" : { 1215 | "bottomLeft" : 0, 1216 | "bottomRight" : 0, 1217 | "isMixed" : false, 1218 | "lockImage" : false, 1219 | "radius" : 0, 1220 | "search" : "Abstract", 1221 | "topLeft" : 0, 1222 | "topRight" : 0 1223 | }, 1224 | "codeOverrideEnabled" : false, 1225 | "constraintsLocked" : false, 1226 | "duplicatedFrom" : [ 1227 | "QaqJbpiFu", 1228 | "dtlaQwj9t", 1229 | "RRyZWAU5Y" 1230 | ], 1231 | "exportOptions" : [ 1232 | 1233 | ], 1234 | "fillColor" : "rgba(255,255,255,1)", 1235 | "fillEnabled" : false, 1236 | "fillImage" : null, 1237 | "fillImageOriginalName" : null, 1238 | "fillImagePixelHeight" : null, 1239 | "fillImagePixelWidth" : null, 1240 | "fillImageResize" : "fill", 1241 | "fillType" : "color", 1242 | "height" : 200, 1243 | "heightType" : 0, 1244 | "id" : "LJ6kYPCAR", 1245 | "intrinsicHeight" : 200, 1246 | "intrinsicWidth" : 200, 1247 | "left" : 162, 1248 | "locked" : false, 1249 | "name" : null, 1250 | "opacity" : 1, 1251 | "originalid" : null, 1252 | "parentid" : "yR_krJJF1", 1253 | "previewSettings" : null, 1254 | "radius" : 0, 1255 | "radiusBottomLeft" : 0, 1256 | "radiusBottomRight" : 0, 1257 | "radiusIsRelative" : false, 1258 | "radiusPerCorner" : false, 1259 | "radiusTopLeft" : 0, 1260 | "radiusTopRight" : 0, 1261 | "right" : null, 1262 | "rotation" : 0, 1263 | "top" : null, 1264 | "visible" : true, 1265 | "width" : 200, 1266 | "widthType" : 0 1267 | }, 1268 | { 1269 | "__class" : "CodeComponentNode", 1270 | "aspectRatio" : null, 1271 | "bottom" : -178, 1272 | "centerAnchorX" : 0.3126598465473146, 1273 | "centerAnchorY" : 0.52658662092624353, 1274 | "children" : [ 1275 | 1276 | ], 1277 | "clip" : true, 1278 | "codeComponentIdentifier" : ".\/Unsplash.tsx_Unsplash", 1279 | "codeComponentPackageVersion" : null, 1280 | "codeComponentProps" : { 1281 | "bottomLeft" : 0, 1282 | "bottomRight" : 0, 1283 | "isMixed" : false, 1284 | "lockImage" : true, 1285 | "radius" : 0, 1286 | "search" : "", 1287 | "size" : "XL", 1288 | "topLeft" : 0, 1289 | "topRight" : 0 1290 | }, 1291 | "codeOverrideEnabled" : false, 1292 | "constraintsLocked" : false, 1293 | "duplicatedFrom" : [ 1294 | "ns1HlLZBa" 1295 | ], 1296 | "exportOptions" : [ 1297 | 1298 | ], 1299 | "fillColor" : "rgba(255,255,255,1)", 1300 | "fillEnabled" : false, 1301 | "fillImage" : null, 1302 | "fillImageOriginalName" : null, 1303 | "fillImagePixelHeight" : null, 1304 | "fillImagePixelWidth" : null, 1305 | "fillImageResize" : "fill", 1306 | "fillType" : "color", 1307 | "height" : 908, 1308 | "heightType" : 0, 1309 | "id" : "lotRHqcSf", 1310 | "intrinsicHeight" : null, 1311 | "intrinsicWidth" : null, 1312 | "left" : -254, 1313 | "locked" : false, 1314 | "name" : null, 1315 | "opacity" : 1, 1316 | "originalid" : null, 1317 | "parentid" : "yR_krJJF1", 1318 | "previewSettings" : null, 1319 | "radius" : 0, 1320 | "radiusBottomLeft" : 0, 1321 | "radiusBottomRight" : 0, 1322 | "radiusIsRelative" : false, 1323 | "radiusPerCorner" : false, 1324 | "radiusTopLeft" : 0, 1325 | "radiusTopRight" : 0, 1326 | "right" : 39, 1327 | "rotation" : 0, 1328 | "top" : -147, 1329 | "visible" : true, 1330 | "width" : 997, 1331 | "widthType" : 0 1332 | } 1333 | ], 1334 | "clip" : true, 1335 | "codeOverrideEnabled" : false, 1336 | "constraintsLocked" : false, 1337 | "duplicatedFrom" : null, 1338 | "exportOptions" : [ 1339 | 1340 | ], 1341 | "fillColor" : "white", 1342 | "fillEnabled" : true, 1343 | "fillImage" : null, 1344 | "fillImageOriginalName" : null, 1345 | "fillImagePixelHeight" : null, 1346 | "fillImagePixelWidth" : null, 1347 | "fillImageResize" : "fill", 1348 | "fillType" : "color", 1349 | "framePreset" : null, 1350 | "guidesX" : [ 1351 | 1352 | ], 1353 | "guidesY" : [ 1354 | 1355 | ], 1356 | "height" : 583, 1357 | "heightType" : 0, 1358 | "id" : "yR_krJJF1", 1359 | "intrinsicHeight" : null, 1360 | "intrinsicWidth" : null, 1361 | "isExternalMaster" : null, 1362 | "isMaster" : false, 1363 | "isTarget" : false, 1364 | "left" : -96, 1365 | "locked" : false, 1366 | "name" : null, 1367 | "opacity" : 1, 1368 | "originalid" : null, 1369 | "parentid" : "uXpaPrDOp", 1370 | "previewSettings" : null, 1371 | "radius" : 0, 1372 | "radiusBottomLeft" : 0, 1373 | "radiusBottomRight" : 0, 1374 | "radiusIsRelative" : false, 1375 | "radiusPerCorner" : false, 1376 | "radiusTopLeft" : 0, 1377 | "radiusTopRight" : 0, 1378 | "replicaInfo" : null, 1379 | "right" : null, 1380 | "rotation" : 0, 1381 | "top" : -984, 1382 | "visible" : true, 1383 | "width" : 782, 1384 | "widthType" : 0 1385 | } 1386 | ], 1387 | "duplicatedFrom" : null, 1388 | "guidesX" : [ 1389 | -1177 1390 | ], 1391 | "guidesY" : [ 1392 | -90, 1393 | 63, 1394 | 170 1395 | ], 1396 | "homeNodeId" : null, 1397 | "id" : "uXpaPrDOp", 1398 | "name" : null, 1399 | "originalid" : null, 1400 | "parentid" : null, 1401 | "tokens" : { 1402 | 1403 | }, 1404 | "tokensIndex" : [ 1405 | 1406 | ], 1407 | "visible" : false 1408 | }, 1409 | "version" : 64 1410 | } 1411 | 1412 | module.exports = designs 1413 | 1414 | 1415 | /***/ }), 1416 | 1417 | /***/ "./entry.js": 1418 | /*!******************!*\ 1419 | !*** ./entry.js ***! 1420 | \******************/ 1421 | /*! no static exports found */ 1422 | /***/ (function(module, exports, __webpack_require__) { 1423 | 1424 | 1425 | // The template for the dynamic webpack entry. Be aware of the variables 1426 | 1427 | const packageJson = __webpack_require__(/*! ./package.json */ "./package.json") 1428 | 1429 | const packageInfo = { 1430 | packageJson, 1431 | sourceModules: {}, 1432 | dependencies: {}, 1433 | } 1434 | 1435 | try { 1436 | // This is a special webpack thing that watches the whole directory 1437 | // https://github.com/webpack/docs/wiki/context 1438 | const ctx = __webpack_require__("./code sync recursive \\.(t|j)s(x?)|\\.css$") 1439 | 1440 | ctx.keys().forEach(key => { 1441 | packageInfo.sourceModules[key] = () => ctx(key) 1442 | }) 1443 | } catch (e) { 1444 | // Handle when the code directory is missing 1445 | // See issue #8178 for more information 1446 | } 1447 | 1448 | const packages = {} 1449 | 1450 | // The packages are passed in through a template 1451 | 1452 | packages["framer"] = () => { 1453 | var packageInfo = {} 1454 | var designJson 1455 | try { 1456 | packageInfo = __webpack_require__(/*! framer */ "framer") 1457 | designJson = __webpack_require__(/*! ./designDependencies.js */ "./designDependencies.js")["framer"] 1458 | } catch (e) { 1459 | console.log(e) 1460 | } 1461 | packageInfo.__framer__ = packageInfo.__framer__ || {} 1462 | packageInfo.__framer__.packageJson = {"name":"framer","version":"1.2.3","main":"build/framer.js","author":"Framer","license":"MIT","scripts":{"coverage":"jest --coverage","test":"jest","watch":"jest --watch"},"devDependencies":{"@emotion/is-prop-valid":"^0.8.2","@microsoft/api-extractor":"^7.6.1","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.4.0","@testing-library/react-hooks":"^3.2.1","@types/chalk":"2.2.0","@types/css-font-loading-module":"^0.0.4","@types/draft-js":"0.10.38","@types/enzyme":"3.1.10","@types/enzyme-adapter-react-16":"1.0.3","@types/google.fonts":"1.0.2","@types/hsluv":"https://github.com/framer/typed_hsluv#bump","@types/jest":"25.2.1","@types/node":"^12.12.12","@types/promise-queue":"2.2.0","@types/react":"16.9.19","@types/react-dom":"16.9.5","@types/webfontloader":"1.6.29","@typescript-eslint/eslint-plugin":"^1.10.3-alpha.2","@typescript-eslint/parser":"^1.10.2","cache-loader":"^1.2.2","chalk":"^2.4.1","convert-tsconfig-paths-to-webpack-aliases":"^0.9.2","css.escape":"^1.5.1","draft-js":"0.11.4","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.9.1","eventemitter3":"^3.1.0","fork-ts-checker-webpack-plugin":"^0.4.1","framer-motion":"2.0.0-beta.72","hoist-non-react-statics":"^2.5.0","hsluv":"^0.0.3","immutable":"^3.8.2","jest":"^25.5.4","jest-diff":"^25.5.0","jest-junit":"^10.0.0","modclean":"^3.0.0-beta.1","progress-bar-webpack-plugin":"^1.11.0","promise-queue":"^2.2.5","raf":"^3.4.0","react":"^16.12.0","react-dev-utils":"^5.0.1","react-dom":"^16.12.0","react-testing-library":"^6.0.0","resize-observer-polyfill":"^1.5.1","semver":"^5.6.0","style-value-types":"^3.1.4","terser-webpack-plugin":"^1.3.0","ts-jest":"^25.5.0","ts-loader":"^4.1.0","tslint":"^5.12.1","tslint-react-hooks":"^1.1.0","watch":"^1.0.2","webfontloader":"^1.6.28","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.10","xcssmatrix":"^0.2.2"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"tsdoc":{"tsdocFlavor":"AEDoc"},"framer":{"components":[{"name":"Scroll","children":true,"properties":[{"key":"direction","title":"Direction","kind":"enum","options":["horizontal","vertical","both"]}]},{"name":"Page"},{"name":"FramerAppleWatch38","type":"device"},{"name":"FramerAppleWatch42","type":"device"},{"name":"FramerSonySmartWatch","type":"device"},{"name":"FramerAppleIPhoneSE","type":"device"},{"name":"FramerAppleIPhone8","type":"device"},{"name":"FramerAppleIPhone8Plus","type":"device"},{"name":"FramerAppleIPhoneXR","type":"device"},{"name":"FramerAppleIPhoneXS","type":"device"},{"name":"FramerAppleIPhoneXSMax","type":"device"},{"name":"FramerGooglePixel2","type":"device"},{"name":"FramerGooglePixel2XL","type":"device"},{"name":"FramerGooglePixel3","type":"device"},{"name":"FramerGooglePixel3XL","type":"device"},{"name":"FramerSamsungNote5","type":"device"},{"name":"FramerSamsungGalaxyS9","type":"device"},{"name":"FramerAppleIPadAir","type":"device"},{"name":"FramerAppleIPadMini","type":"device"},{"name":"FramerAppleIPadPro","type":"device"},{"name":"FramerGoogleNexusTablet","type":"device"},{"name":"FramerMicrosoftSurfacePro3","type":"device"},{"name":"FramerMicrosoftSurfacePro4","type":"device"},{"name":"FramerAppleIMac","type":"device"},{"name":"FramerAppleThunderboltDisplay","type":"device"},{"name":"FramerAppleMacBook","type":"device"},{"name":"FramerAppleMacBookAir","type":"device"},{"name":"FramerAppleMacBookPro","type":"device"},{"name":"FramerDellXPS","type":"device"},{"name":"FramerMicrosoftSurfaceBook","type":"device"},{"name":"FramerSonyW850C","type":"device"},{"name":"FramerStoreArtwork","type":"device"},{"name":"FramerStoreIcon","type":"device"}]}} 1463 | packageInfo.__framer__.packageJson.design = designJson 1464 | return packageInfo 1465 | } 1466 | 1467 | packages["@framer/framer.default"] = () => { 1468 | var packageInfo = {} 1469 | var designJson 1470 | try { 1471 | packageInfo = __webpack_require__(/*! framer-package-loader!@framer/framer.default */ "framer-package-loader!@framer/framer.default") 1472 | designJson = __webpack_require__(/*! ./designDependencies.js */ "./designDependencies.js")["@framer/framer.default"] 1473 | } catch (e) { 1474 | console.log(e) 1475 | } 1476 | packageInfo.__framer__ = packageInfo.__framer__ || {} 1477 | packageInfo.__framer__.packageJson = {"main":"dist/index.js","license":"MIT","dependencies":{"react-feather":"^2.0.3"},"devDependencies":{"@types/react":"^16.8"},"peerDependencies":{"framer":"^1.0","react":"^16.8"},"framer":{"id":"ed433636-a308-4ea6-8026-c3b3f320806d","displayName":"Default"},"author":"Framer Team","name":"@framer/framer.default","version":"1.71.0"} 1478 | packageInfo.__framer__.packageJson.design = designJson 1479 | return packageInfo 1480 | } 1481 | 1482 | packageInfo.dependencies = packages 1483 | 1484 | exports.__framer__ = packageInfo 1485 | 1486 | 1487 | /***/ }), 1488 | 1489 | /***/ "./package.json": 1490 | /*!**********************!*\ 1491 | !*** ./package.json ***! 1492 | \**********************/ 1493 | /*! exports provided: main, license, devDependencies, peerDependencies, framer, author, dependencies, name, version, default */ 1494 | /***/ (function(module) { 1495 | 1496 | module.exports = JSON.parse("{\"main\":\"dist/index.js\",\"license\":\"MIT\",\"devDependencies\":{\"@types/react\":\"^16.4.16\"},\"peerDependencies\":{\"framer\":\"^0.10.5 || ^1\",\"react\":\"^16.3.0\",\"react-dom\":\"^16.3.0\"},\"framer\":{\"id\":\"5f4411f5-e210-4355-ad08-d04613afe3a1\",\"displayName\":\"Sticky Headers\"},\"author\":\"Giles Perry\",\"dependencies\":{\"@framer/framer.default\":\"^1.71.0\",\"framer-motion\":\"^0.15.1\"},\"name\":\"@framer/perrysmotors.sticky-headers\",\"version\":\"2.6.0\"}"); 1497 | 1498 | /***/ }), 1499 | 1500 | /***/ "framer": 1501 | /*!******************************************************************************************!*\ 1502 | !*** external {"root":"Framer","commonjs2":"framer","commonjs":"framer","amd":"framer"} ***! 1503 | \******************************************************************************************/ 1504 | /*! no static exports found */ 1505 | /***/ (function(module, exports) { 1506 | 1507 | module.exports = __WEBPACK_EXTERNAL_MODULE_framer__; 1508 | 1509 | /***/ }), 1510 | 1511 | /***/ "framer-package-loader!@framer/framer.default": 1512 | /*!***************************************************************!*\ 1513 | !*** external "framer-package-loader!@framer/framer.default" ***! 1514 | \***************************************************************/ 1515 | /*! no static exports found */ 1516 | /***/ (function(module, exports) { 1517 | 1518 | if(typeof __WEBPACK_EXTERNAL_MODULE_framer_package_loader_framer_framer_default__ === 'undefined') {var e = new Error("Cannot find module 'framer-package-loader!@framer/framer.default'"); e.code = 'MODULE_NOT_FOUND'; throw e;} 1519 | module.exports = __WEBPACK_EXTERNAL_MODULE_framer_package_loader_framer_framer_default__; 1520 | 1521 | /***/ }), 1522 | 1523 | /***/ "react": 1524 | /*!**************************************************************************************!*\ 1525 | !*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***! 1526 | \**************************************************************************************/ 1527 | /*! no static exports found */ 1528 | /***/ (function(module, exports) { 1529 | 1530 | module.exports = __WEBPACK_EXTERNAL_MODULE_react__; 1531 | 1532 | /***/ }) 1533 | 1534 | /******/ }); 1535 | }); --------------------------------------------------------------------------------