{"id":13672771,"url":"https://github.com/marcusstenbeck/remotion-transition-series","last_synced_at":"2025-04-28T03:32:58.830Z","repository":{"id":53268124,"uuid":"429425464","full_name":"marcusstenbeck/remotion-transition-series","owner":"marcusstenbeck","description":"Remotion \u003cSeries/\u003e component with transitions","archived":false,"fork":false,"pushed_at":"2023-08-22T14:45:49.000Z","size":207,"stargazers_count":71,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-11T11:44:53.994Z","etag":null,"topics":[],"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/marcusstenbeck.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-11-18T12:41:45.000Z","updated_at":"2024-10-21T17:42:57.000Z","dependencies_parsed_at":"2024-01-17T04:18:38.148Z","dependency_job_id":null,"html_url":"https://github.com/marcusstenbeck/remotion-transition-series","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/marcusstenbeck%2Fremotion-transition-series","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusstenbeck%2Fremotion-transition-series/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusstenbeck%2Fremotion-transition-series/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcusstenbeck%2Fremotion-transition-series/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcusstenbeck","download_url":"https://codeload.github.com/marcusstenbeck/remotion-transition-series/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251246394,"owners_count":21558762,"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":[],"created_at":"2024-08-02T09:01:47.383Z","updated_at":"2025-04-28T03:32:53.823Z","avatar_url":"https://github.com/marcusstenbeck.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# remotion-transition-series\n\nA `TransitionSeries` component for [Remotion](https://www.remotion.dev/).\n\n[🔗 See included transitions](https://twitter.com/marcusstenbeck/status/1446420801918586888)\n\nIncluded in this repo are the following transitions:\n\n- Dissolve\n- FadeThroughColor\n- Pan\n- Slide\n- SlidingDoors\n- LinearWipe\n- CircularWipe\n\n\u003e To use these transitions in your project, please copy the component into your own project.\n\u003e \n\u003e The NPM package simply includes the core components and a basic `FadeTransition`.\n\n## Setup\n\n```\nnpm install remotion-transition-series\n```\n\n## Preview\n\nTo start the Remotion Preview of run:\n\n```\nnpm run preview\n```\n\n## Examples\n\nTake a look at the `preview` folder. In it you'll find a bunch of transitions.\n\n### With defaults for the `CircularWipe` transition.\n\n```jsx\n\u003cTransitionSeries\u003e\n  \u003cTransitionSeries.Sequence durationInFrames={60}\u003e\n    \u003cdiv\u003eHello\u003c/div\u003e\n  \u003c/TransitionSeries.Sequence\u003e\n\n  \u003cTransitionSeries.Transition\n    durationInFrames={30}\n    transitionComponent={CircularWipe}\n  /\u003e\n\n  \u003cTransitionSeries.Sequence durationInFrames={60}\u003e\n    \u003cdiv\u003eWorld\u003c/div\u003e\n  \u003c/TransitionSeries.Sequence\u003e\n\u003c/TransitionSeries\u003e\n```\n\n### Using custom props with the `CircularWipe` transition\n\n```jsx\n\u003cTransitionSeries\u003e\n  \u003cTransitionSeries.Sequence durationInFrames={60}\u003e\n    \u003cdiv\u003eHello\u003c/div\u003e\n  \u003c/TransitionSeries.Sequence\u003e\n\n  \u003cTransitionSeries.Transition\n    durationInFrames={30}\n    transitionComponent={(props) =\u003e \u003cCircularWipe {...props} direction=\"in\" /\u003e}\n  /\u003e\n\n  \u003cTransitionSeries.Sequence durationInFrames={60}\u003e\n    \u003cdiv\u003eWorld\u003c/div\u003e\n  \u003c/TransitionSeries.Sequence\u003e\n\u003c/TransitionSeries\u003e\n```\n\n### Custom easing with `CircularWipe` transition\n\n```jsx\nimport { Easing } from 'remotion';\n\n// ...\n\n\u003cTransitionSeries\u003e\n  \u003cTransitionSeries.Sequence durationInFrames={60}\u003e\n    \u003cdiv\u003eHello\u003c/div\u003e\n  \u003c/TransitionSeries.Sequence\u003e\n\n  \u003cTransitionSeries.Transition\n    durationInFrames={30}\n    transitionComponent={(props) =\u003e (\n      \u003cCircularWipe {...props} progress={Easing.inOut(Easing.exp)} /\u003e\n    )}\n  /\u003e\n\n  \u003cTransitionSeries.Sequence durationInFrames={60}\u003e\n    \u003cdiv\u003eWorld\u003c/div\u003e\n  \u003c/TransitionSeries.Sequence\u003e\n\u003c/TransitionSeries\u003e;\n```\n\n## Docs\n\n### `\u003cTransitionSeries\u003e`\n\nSee: https://www.remotion.dev/docs/series\n\n---\n\n### `\u003cTransitionSeries.Transition /\u003e`\n\nFor other props, see: https://www.remotion.dev/docs/sequence\n\n#### `transitionComponent`\n\nA component that renders the transition.\n\nProps\n\n- `progress` between `0` to `1`\n- `exitingElement` is the previous sequence in the series\n- `enteringElement` is the next sequence in the series\n\n```\n(props: {\n  progress: number;\n  exitingElement: ReactNode;\n  enteringElement: ReactNode;\n}) =\u003e ReactNode;\n```\n\n## Contributing\n\nFeel free to open pull requests or file issues.\n\n## Author\n\n[@marcusstenbeck](https://twitter.com/marcusstenbeck)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcusstenbeck%2Fremotion-transition-series","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcusstenbeck%2Fremotion-transition-series","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcusstenbeck%2Fremotion-transition-series/lists"}