I'm using the below code to create a stop motion effect:
The same image in my remotion studio moves very slower,(what i was aiming for) but after render the movement is completely erratic.
I read the flickering docs but couldn't figure this out.
Any help would be much appreciated.
Thankyou.
import {Img, random, staticFile, useCurrentFrame } from "remotion";
export const StopMotionEffectTest = () => {
const frame = useCurrentFrame();
let degree;
const rand = random(frame)
if (frame % 20 === 0) {
degree = (rand * 8) - 4;
}
return (
<span
style={{
display: 'inline-block',
transform: `rotate(${degree}deg)`,
position: 'absolute',
top: '50%px',
bottom : '50%',
}}
>
<Img src={staticFile("sovietbook.png")} style={{width: '50%', height: 'auto',zIndex:100}} />
</span>
);
};