https://github.com/marcusstenbeck/remotion-transition-series

Remotion <Series/> component with transitions
https://github.com/marcusstenbeck/remotion-transition-series

Last synced: 2 months ago
JSON representation

Remotion <Series/> component with transitions

• Host: GitHub
• URL: https://github.com/marcusstenbeck/remotion-transition-series
• Owner: marcusstenbeck
• Created: 2021-11-18T12:41:45.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-22T14:45:49.000Z (over 1 year ago)
• Last Synced: 2024-08-03T09:12:51.282Z (6 months ago)
• Language: TypeScript
• Homepage:
• Size: 202 KB
• Stars: 66
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - remotion-transition-series

README

        
# remotion-transition-series

A `TransitionSeries` component for [Remotion](https://www.remotion.dev/).

[🔗 See included transitions](https://twitter.com/marcusstenbeck/status/1446420801918586888)

Included in this repo are the following transitions:

- Dissolve

- FadeThroughColor

- Pan

- Slide

- SlidingDoors

- LinearWipe

- CircularWipe

> To use these transitions in your project, please copy the component into your own project.

> 

> The NPM package simply includes the core components and a basic `FadeTransition`.

## Setup

```

npm install remotion-transition-series

```

## Preview

To start the Remotion Preview of run:

```

npm run preview

```

## Examples

Take a look at the `preview` folder. In it you'll find a bunch of transitions.

### With defaults for the `CircularWipe` transition.

```jsx

  

    
Hello

  


  

  

    
World

  


```

### Using custom props with the `CircularWipe` transition

```jsx

  

    
Hello

  


   }

  />

  

    
World

  


```

### Custom easing with `CircularWipe` transition

```jsx

import { Easing } from 'remotion';

// ...

  

    
Hello

  


   (

      

    )}

  />

  

    
World

  

;

```


## Docs

### ``

See: https://www.remotion.dev/docs/series

---

### ``

For other props, see: https://www.remotion.dev/docs/sequence

#### `transitionComponent`

A component that renders the transition.

Props

- `progress` between `0` to `1`

- `exitingElement` is the previous sequence in the series

- `enteringElement` is the next sequence in the series

```

(props: {

  progress: number;

  exitingElement: ReactNode;

  enteringElement: ReactNode;

}) => ReactNode;

```

## Contributing

Feel free to open pull requests or file issues.

## Author

[@marcusstenbeck](https://twitter.com/marcusstenbeck)