Interactivity in the Studio
Now Remotion Studio allows you to interactively change your code!
- Click items in the canvas and drag them around
- Drag effects on elements
- Drag videos, audio and images directly on the canvas
- Set keyframes for CSS, component props and effect props
- Drag layers in the timeline
How to make things interactive:
- Use
<Img>,<AnimatedImage>,<Video>,<Sequence>,<HtmlInCanvas>,@remotion/shapes,<Gif>,<Solid>for built-in interactivity - Turn regular HTML elements into interactive ones:
<div>→<Interactive.Div>
Opt out of interactivity:
- Use the new "Outline Toggle" in the Studio to hide all outlines
- Set
showInTimeline={false}so it doesn't participate in interactivity
What's new
remotion: AddInteractivecomponents by @JonnyBurger in #8269remotion: Support transform-origin keywords in interpolate() by @JonnyBurger in #8248remotion: Add easing to interpolateColors by @JonnyBurger in #8240@remotion/media: Prevent initial double seek by @JonnyBurger in #8278@remotion/studio: Release Studio interactivity by @JonnyBurger in #8271@remotion/studio: Exclude hidden timeline elements from canvas selection by @JonnyBurger in #8282@remotion/studio: Fix marquee selection from empty timeline area by @JonnyBurger in #8279@remotion/studio: Allow editing transform origin by @JonnyBurger in #8265@remotion/studio: Polish timeline styling by @JonnyBurger in #8262@remotion/studio: Fix asset and effect drop conflict by @JonnyBurger in #8264@remotion/studio: Remove color swatch border by @JonnyBurger in #8267@remotion/studio: Add outline rotation handles by @JonnyBurger in #8255@remotion/studio: Preserve selection while dragging sequences by @JonnyBurger in #8263@remotion/studio: Add timeline marquee selection by @JonnyBurger in #8257@remotion/studio: Add easing editor modal by @JonnyBurger in #8253@remotion/studio: Add Shift axis lock for outline dragging by @JonnyBurger in #8245@remotion/studio: Fix nested composition selector button by @JonnyBurger in #8244@remotion/studio: Support mixed timeline selections by @JonnyBurger in #8239@remotion/studio: Allow visual editing keyframed UV coordinates by @JonnyBurger in #8241@remotion/studio: Toggle selected keyframes together by @JonnyBurger in #8230@remotion/studio: Add keyframe easing controls by @JonnyBurger in #8229@remotion/studio: Allow dragging effects onto canvas outlines by @JonnyBurger in #8226@remotion/studio: Allow dragging shape demos into Studio by @JonnyBurger in #8258@remotion/studio-server: Make log updates more concise by @JonnyBurger in #8256@remotion/studio-server: Condense log update output by @JonnyBurger in #8246@remotion/studio-server: Avoid blank lines in keyframed props by @JonnyBurger in #8247@remotion/studio-server: Omit absolute positioning for audio insertions by @JonnyBurger in #8228@remotion/skills: Add Studio-editable animation guidance by @JonnyBurger in #8249
Docs
- Upgrade Docusaurus and Rspack by @JonnyBurger in #8268
- Reduce docs build Node memory by @JonnyBurger in #8250
Internal and unreleased
- Internal: Experimental high-DPI screen recorder by @JonnyBurger in #8275
Full Changelog: v4.0.474...v4.0.475