stefanwittwer / remotion-animated

🌟 A delightful way to animate objects in Remotion.

Remotion Animated

A delightful way to animate objects in Remotion.

What is Remotion Animated?

The idea behind Remotion Animated is to simplify and speed up the creation of simple animations in your Remotion projects, by:

• Moving the animation logic fully into the JSX, using the <Animated /> component;
• Providing defaults that make animations look great out-of-the-box;
• Making it easy to chain multiple timed animations.

Documentation and Examples

See the documentation and examples for this package on the package website.

Installation

To get started with this package in your Remotion project, install remotion-animated using the package manager of your choice:

Install using npm

npm i remotion-animated

Install using yarn

yarn add remotion-animated

License

This package and its source code is available under the MIT license. Read the full license terms here.

remotion-animated's Issues

Support for other animations

Hey @stefanwittwer, this library is fantastic! Is there any chance we could have other strategies than just the spring animation, e.g. something like reanimated withTiming? I can't make it work well for scrolling large images from top to bottom, as it always spends too much time decelerating at the end, no matter how I configure it.

Fade out always goes to 0

Hi @stefanwittwer,

Thanks for this awesome library. I'm having trouble to make a text fade to a value between 0 and 1.

<Animated
animations={[
Fade({to: 1, initial: 0}),
Scale({by: 1, initial: 0.3, overshootClamping: false}),
Fade({to: 0.8, start: 20}),
]}
style={{
transformOrigin: 'top center',
}}
>
<span> Title text</span>
</Animated>

This code will make the title text disappear and not clamp to the value of 0.8. Am I using it correctly, or is it a bug?

Initial position on move animation

First of all thanks for this library, it's great tool to simplifying animations with remotion

As for my question: I don't understand, how the initial values of Move animation are supposed to work.
When i use Move({ y: -100, initialY: 100 }) i would expect the element to be animated from bottom to the original position of this element (in my case in the center of wrapping div). Instead of this behavior, i see no change when using initialY or not
Am i doing something wrong?

Also i am curious if you plan to extend this library or if you would need some help with contributions, i would gladly help with development

'Clamp' option in interpolation & overshootClamping

Hey @stefanwittwer ,

Great library and serious chunk of work! I am just looking into incorporating your way of handling Remotion animations into may project.

I was looking into Move and the animation was having almost zero bounce. The overshootClamping was set to false , so the spring value was overshooting the range as it supposed to but the object was not moving. Digging through code I realized that the interpolate has hardcoded "clamp", which will prevent any bounce. Was that intended?

remotion-animated/packages/remotion-animated/src/animations/AnimationInterpolation.ts

Line 15 in 6d18ffb

ClampInterpolationOptions

I removed the ClampInterpolationOptions and it works fine. Maybe solution would be to have that removed as default and add on overshootClamping set to true ?

Thanks you!