{"id":16347985,"url":"https://github.com/ismamz/sticky.framerfx","last_synced_at":"2025-10-26T02:30:24.827Z","repository":{"id":56591140,"uuid":"185066395","full_name":"ismamz/Sticky.framerfx","owner":"ismamz","description":"A Framer X package to use Sticky elements within scroll components.","archived":false,"fork":false,"pushed_at":"2020-10-30T20:33:28.000Z","size":65,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T13:11:24.876Z","etag":null,"topics":["design","framer","prototype","sticky"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ismamz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-05T18:15:09.000Z","updated_at":"2023-03-10T10:04:34.000Z","dependencies_parsed_at":"2022-08-15T21:31:20.319Z","dependency_job_id":null,"html_url":"https://github.com/ismamz/Sticky.framerfx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FSticky.framerfx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FSticky.framerfx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FSticky.framerfx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2FSticky.framerfx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ismamz","download_url":"https://codeload.github.com/ismamz/Sticky.framerfx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238241450,"owners_count":19439768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","framer","prototype","sticky"],"created_at":"2024-10-11T00:47:49.827Z","updated_at":"2025-10-26T02:30:24.491Z","avatar_url":"https://github.com/ismamz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Usage\n\nAfter install this package you will get two components: `Sticky` and `StickyElement`.\n\n* `Sticky` component works exactly as a Scroll interactive component.\n* `StickyElement` must be connected to any frame that you want to be sticky.\n\n![Sticky Animation](https://media.giphy.com/media/JPgeZBoBIEeCNYc7AV/giphy.gif)\n\nExample based on [30 days of Framer X](https://github.com/hermy0211/framer30-code/tree/master/Day%2007%20Sticky%20Headers) by Anne Lee.\n\n### Handle status\n\n`StickyElement` accepts two component instances:\n\n* `Default`: the default element that will show when is pinned or not.\n* `Pinned` (optional): a component to render when the element is fixed positioned.\n\nIn other complex scenarios, if you connect a `StickyElement` to a code component,\nwhen its position is fixed, your code component will receive a boolean `stuck` property.\n\nYou can create a `Header` code component that works with `stuck` state like this:\n\n```jsx\nexport function Header(props) {\n    return (\n        \u003cFrame\u003e\n            {props.stuck ? \"Pinned\" : \"Unpinned\"}\n        \u003c/Frame\u003e\n    )\n}\n```\n\nThis is useful, for example, if you want to perform an animation between the two states.\n\n![Sticky Animation with Code Components](https://media.giphy.com/media/ZXkqHJXApoqkIcE9AU/giphy.gif)\n\n\n### Notes\n\n* You can use code overrides to apply effects based on scroll position.\n* You can set a `offset` parameter to each sticky element.\n* You can set multiple `StickyElement` within scroll content frame.\n* It works with `StickyElement` nested on other elements.\n* It only works for vertical scroll.\n\n#### ⚠️ Important\n\nFrames in Framer X sometimes doesn't has a top value, this happen because the element has\n**Pin bottom** alignment on canvas. In that case, the component will calculate the top\nposition based on his height and bottom position and also from parents layout values.\nIt's recomendable to change `StickyElement` and parents frames alignment to **Pin top**,\nit's more efficient and will work correctly.\n\n#### ⚡️ Performance\n\nThe following is a 1x speed animation showing how it works efficiently with multiple cases.\n\n![Sticky Animation showing a full example](https://media.giphy.com/media/PipVUYeViwY8MAM8hg/giphy.gif)\n\n\n### Changelog\n\n##### v2.4.0\n\n- Fix bug 🐛 \n\n##### v2.3.0\n\n- Add Responsive mode to `StickyElement`\n\n##### v2.2.0\n\n- Add support for code overrides\n\n##### v2.1.0\n\n- Fix bug with X position of Sticky elements\n- Fix bug when looking Sticky elements within frames\n\n##### v2.0.0\n\n- Complete refactoring using the new Framer API\n- Add pinned state to `StickyElement` using component instances\n- Add support to work with code components based on pinned status\n\n##### v1.1.0\n\n- Rebuild with two componentes and remove Overrides\n\n##### v1.0.0\n\n- First release\n\n\n### Bugs \u0026 Help\n\n* GitHub: [Sticky.framerfx](https://github.com/ismamz/Sticky.framerfx)\n* Twitter: [@ismamz](https://twitter.com/ismamz)\n\n\n### See also\n\n* [Google Maps](https://store.framer.com/package/ismael/google-maps)\n* [Photo Filters](https://store.framer.com/package/ismael/photo-filters)\n* [Get Color from Images](https://store.framer.com/package/ismael/get-colors-from-images)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismamz%2Fsticky.framerfx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismamz%2Fsticky.framerfx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismamz%2Fsticky.framerfx/lists"}