{"id":14962777,"url":"https://github.com/kiosion/svelte-maybe-transition","last_synced_at":"2026-02-23T21:34:10.769Z","repository":{"id":65664691,"uuid":"596660527","full_name":"kiosion/svelte-maybe-transition","owner":"kiosion","description":"Super-simple Svelte utility for on-the-fly enabling and modification of element transitions","archived":false,"fork":false,"pushed_at":"2023-07-20T05:57:29.000Z","size":263,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-05T05:11:03.654Z","etag":null,"topics":["svelte","svelte-kit","svelte-transition","sveltekit"],"latest_commit_sha":null,"homepage":"https://kiosion.github.io/svelte-maybe-transition","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiosion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-02T17:04:36.000Z","updated_at":"2023-11-24T12:02:44.000Z","dependencies_parsed_at":"2024-09-22T15:02:10.539Z","dependency_job_id":"d486e147-ae03-4a0b-acda-2bd1a16670c2","html_url":"https://github.com/kiosion/svelte-maybe-transition","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":0.09090909090909094,"last_synced_commit":"16605fd5425c3b771481e23e49c3f2eb9dc874b6"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/kiosion/svelte-maybe-transition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-maybe-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-maybe-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-maybe-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-maybe-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiosion","download_url":"https://codeload.github.com/kiosion/svelte-maybe-transition/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiosion%2Fsvelte-maybe-transition/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263750497,"owners_count":23505537,"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":["svelte","svelte-kit","svelte-transition","sveltekit"],"created_at":"2024-09-24T13:30:29.663Z","updated_at":"2026-02-23T21:34:05.746Z","avatar_url":"https://github.com/kiosion.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-maybe-transition\n\nA super-simple Svelte transitions utility that allows on-the-fly enabling and modification of element transitions.\n\n**_Why?_**\nAlthough you could achieve this with if/else blocks, that would require duplicating markup and logic. This util allows for stock Svelte transitions syntax, but with added 'enable' and 'fn' params that can be changed on the fly. I needed something for my own project that allowed changing transition functions programmatically, and this seemed like the best way to do it.\n\n## Installation\n\nUsing NPM:\n\n```bash\nnpm install --save-dev svelte-maybe-transition\n```\n\nUsing Yarn:\n\n```bash\nyarn add -D svelte-maybe-transition\n```\n\n## Basic usage\n\n```html\n\u003cscript\u003e\n  import { maybe } from 'svelte-maybe-transition';\n\n  // Let's assume that your PageLoad data has a boolean 'transitions' property\n  export let data;\n\n  $: enableTransitions = data?.transitions;\n\u003c/script\u003e\n\n\u003cdiv\n  transition:maybe={{\n    enable: enableTransitions,\n    fn: 'fly',\n    y: -100,\n    duration: 1000\n  }}\n\u003e\n  Look at me!\n\u003c/div\u003e\n```\n\n## API\n\n### maybe()\n\nAccepts `fn` parameter of `'blur'` | `'fade'` | `'fly'` | `'slide'` | `'scale'` | `'draw'`, and an `enable` boolean.\nOther than those two, the parameters required vary by which transition function is specified - if in doubt, check out Svelte's [transition documentation](https://svelte.dev/docs#run-time-svelte-transition)!\n\n### maybeCrossfade()\n\nSince Svelte's `crossfade` transition is a bit special it's split into its own function. It accepts normal animation params, plus the aforementioned `enable` boolean, and returns an array of two unnamed functions: `send` and `receive`.\n\n#### Usage\n\n```html\n\u003cscript\u003e\n  import { maybe, maybeCrossfade } from 'svelte-maybe-transition';\n\n  const enable = true,\n    commonParams = {\n      enable,\n      duration: 500,\n      delay: 250\n    };\n\n  // Since 'crossfade' requires a fallback transition if there is no element to send\n  // or no element to receive, we construct a fallback 'maybe' fade transition here\n  const fallback = maybe({\n    fn: 'fade',\n    ...commonParams\n  });\n\n  $: [send, receive] = maybeCrossfade({\n    fallback,\n    ...commonParams\n  });\n\u003c/script\u003e\n\n{#if condition}\n\u003ch1 in:send=\"{{key}}\" out:receive=\"{{key}}\"\u003eBIG ELEM\u003c/h1\u003e\n{:else}\n\u003csmall in:send=\"{{key}}\" out:receive=\"{{key}}\"\u003esmall elem\u003c/small\u003e\n{/if}\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, or any issues, please open an issue first.\n\n## Building\n\nBuilding the package is done with `yarn build`, which outputs built files to `./package`.\n\nBuilding the demo app is done with `yarn build:app`, which outputs static HTML to `./.svelte-kit/build`.\n\n## License\n\nSee [LICENSE.md](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiosion%2Fsvelte-maybe-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiosion%2Fsvelte-maybe-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiosion%2Fsvelte-maybe-transition/lists"}