Bug Report 🐛

interpolateStyles throws a weird error when I use the following block to style one of the images in my composition:

    const lastImageExitStyle = interpolateStyles(
        frame,
        [eachImgDur * 2, eachImgDur * 3],
        [{opacity: 1}, {opacity: 0}]
    );

What I wanted to achieve:

Fade in effect for when the first image shows up
Fade out for the last image when the video ends

Expected output

A more helpful error about what's wrong :)

Current output

Cannot convert undefined or null to object

Here's my composition: Repro: https://stackblitz.com/edit/github-bpjydj?file=src%2FRoot.tsx,src%2FComposition.tsx

export const MyComposition = () => {
    const frame = useCurrentFrame();
    const {durationInFrames, fps} = useVideoConfig();

    const firstImageEnterStyle = interpolateStyles(
        frame,
        [0, fps / 2],
        [{opacity: 0}, {opacity: 1}]
    );

    const lastImageExitStyle = interpolateStyles(
        frame,
        [eachImgDur * 2, eachImgDur * 3],
        [{opacity: 1}, {opacity: 0}]
    );

    return ( <> a bunch of images here </> );
};

Thanks! This seems to throw:

interpolateStyles(
        frame,
        [eachImgDur * 2, eachImgDur * 3],
        [{opacity: 1}, {opacity: 0}]
    )

Who can reproduce this, write a test in https://github.com/remotion-dev/remotion/blob/c164b4cfcdc83e66ac8d2dd3c0d573aa926d6a65/packages/animation-utils/src/test/interpolate-styles.test.ts and make a fix?

Bounty

💎 This issue has a bounty on it!

Read our contributing guidelines:

How to contribute: https://www.remotion.dev/docs/contributing/
Implementing a new feature: https://www.remotion.dev/docs/contributing/feature
Implementing a new option: https://www.remotion.dev/docs/contributing/option
Write documentation: https://www.remotion.dev/docs/contributing/docs
Bounty information: https://www.remotion.dev/docs/contributing/bounty

/bounty 80

💎 $80 bounty • Remotion

Steps to solve:

Get assigned: If you'd like to work on this issue, comment /attempt below to get assigned
Submit work: Create a pull request including /claim #3922 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to remotion-dev/remotion!

Add a bounty • Share on socials

/attempt #3922

Algora profile	Completed bounties	Tech	Active attempts	Options
@abhishek818	1 remotion bounty + 2 bounties from 2 projects	JavaScript, TypeScript		Cancel attempt

@abhishek818: The Remotion team prefers to assign a single contributor to the issue rather than let anyone attempt it right away. We recommend waiting for a confirmation from a member before getting started.

@abhishek818 Thanks for attempting and good luck!

@JonnyBurger Little help needed. I was trying to run the project on my local system by following all instructions mentioned over here https://www.remotion.dev/docs/contributing.

But I am always getting the error while doing the build "pnpm build" Project 'packages/core/tsconfig.json' is up to date because newest input 'packages/core/src/volume-position-state.ts' is older than output 'packages/core/dist/tsconfig.tsbuildinfo'

any specific node version to run this. I tried on node 18 and 20 both.

@eshugoel24 You are not assigned, so please don't submit for this bounty!

But I can help you resolve the setup issue - what you posted is not an error though, this should appear! Maybe post the full output in a separate issue?

👋 Hi, I'm a full stack developer with 7+ years of experience in web development.

hey, @JonnyBurger i have found out the issue and will push the fix in a while now..

💡 @abhishek818 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

🎉🎈 @abhishek818 has been awarded $80! 🎈🎊

remotion-dev / remotion

`interpolateStyles` throws `Cannot convert undefined or null to object` #3922