Tailwind
Tailwind is configured in all scaffolded compositions. Use utility classes directly on any element:
<ef-timegroup duration="5s" class="w-[1920px] h-[1080px] bg-gradient-to-br from-indigo-900 to-purple-900 flex items-center justify-center">
<ef-text class="text-white text-8xl font-bold tracking-tight drop-shadow-lg">
Styled with Tailwind
</ef-text>
</ef-timegroup>CSS animations
Standard @keyframes and the animation property work as expected. The renderer steps through frames deterministically so animations are frame-accurate.
animation-fill-mode: both
Prefer to use
animation-fill-mode: both (the both keyword in the shorthand). Without it, elements snap to their pre/post-animation state at frame boundaries, causing visible flicker.Per-segment stagger (ef-text)
When ef-text uses split, each segment gets CSS variables for coordinated animations:
| Variable | Description |
|---|---|
--ef-stagger-offset | Calculated delay for this segment — use as animation-delay |
--ef-index | Integer index (0, 1, 2 …) |
--ef-seed | Deterministic random 0–1 per segment |
<ef-timegroup duration="5s" class="w-[1920px] h-[1080px] bg-slate-900 flex items-center justify-center">
<ef-text split="word" stagger="100ms" class="text-white text-7xl font-bold text-center max-w-4xl leading-tight">
Words reveal one by one
</ef-text>
<style>
@keyframes wordReveal {
from { clip-path: inset(0 100% 0 0); opacity: 0.3; }
to { clip-path: inset(0 0% 0 0); opacity: 1; }
}
ef-text-segment {
display: inline-block;
animation: wordReveal 0.4s ease-out both;
animation-delay: var(--ef-stagger-offset);
}
</style>
</ef-timegroup>Use --ef-seed for random variation:
<ef-timegroup duration="5s" class="w-[1920px] h-[1080px] bg-black flex items-center justify-center">
<ef-text split="char" stagger="50ms" class="text-white text-9xl font-black tracking-widest">
RANDOM
</ef-text>
<style>
ef-text-segment {
display: inline-block;
animation: charIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: var(--ef-stagger-offset);
color: hsl(calc(var(--ef-seed) * 280deg + 200deg) 80% 70%);
}
@keyframes charIn {
from {
transform: translateY(calc(var(--ef-seed) * 60px - 30px)) rotate(calc(var(--ef-seed) * 40deg - 20deg));
opacity: 0;
}
to { transform: translateY(0) rotate(0deg); opacity: 1; }
}
</style>
</ef-timegroup>Time-driven CSS variables
Editframe sets CSS custom properties on every element during rendering and preview. Use them to drive animations directly from the timeline without JavaScript.
| Variable | Description |
|---|---|
--ef-progress | Current progress as 0–1 (multiply by 100% when needed) |
--ef-duration | Total duration as a CSS time (e.g. 10s) |
--ef-transition-duration | Overlap duration (only set when parent has overlap) |
--ef-transition-out-start | When the outgoing fade-out should start (duration - overlap) |
<ef-timegroup duration="4s" class="w-[1920px] h-[1080px] bg-black flex flex-col items-center justify-center gap-8">
<ef-text class="text-white text-5xl font-bold">Timeline progress</ef-text>
<!-- Progress bar driven by --ef-progress, no JavaScript -->
<div style="
width: 60%;
height: 8px;
background: rgba(255,255,255,0.15);
border-radius: 4px;
overflow: hidden;
">
<div style="
height: 100%;
background: #818cf8;
width: calc(var(--ef-progress) * 100%);
"></div>
</div>
</ef-timegroup>Crossfade between scenes
<ef-timegroup mode="sequence" overlap="1.5s" class="w-[1920px] h-[1080px]">
<ef-timegroup mode="fixed" duration="4s" class="absolute w-full h-full bg-indigo-900 flex items-center justify-center"
style="animation: var(--ef-transition-duration) fade-out var(--ef-transition-out-start) both;">
<ef-text class="text-white text-7xl font-bold">Fades Out</ef-text>
</ef-timegroup>
<ef-timegroup mode="fixed" duration="4s" class="absolute w-full h-full bg-rose-900 flex items-center justify-center"
style="animation: var(--ef-transition-duration) fade-in 0s both;">
<ef-text class="text-white text-7xl font-bold">Fades In</ef-text>
</ef-timegroup>
<style>
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
</style>
</ef-timegroup>The --ef-transition-duration and --ef-transition-out-start variables are set automatically based on the parent's overlap value — you don't compute them manually.