Stagger, Delay e Animação de Sistema

Animar um elemento é simples. Animar 20 de forma coerente, sem passar horas copiando keyframe, é onde expressão entra.

Stagger

Em vez de 10 elementos entrarem ao mesmo tempo (mecânico, pesado visualmente), cada um entra com um pequeno delay em relação ao anterior. Sensação de cascata.

Manual: seleciona os keyframes de múltiplas layers no mesmo frame, Keyframe Assistant > Sequence Layers. O after espaça tudo na timeline.

Com expressão: anima só a layer principal, as outras acompanham automaticamente. Se mudar o timing da primeira, as outras seguem.

delay = 3; // frames de delay entre cada layer
d = delay * thisComp.frameDuration * (index - 1);
valueAtTime(time - d)

Cada layer pega o valor que a anterior teria d segundos atrás. Cópia atrasada.

Index-based animation

Derivar valores direto do index. Exemplos práticos:

// rotação escalonada por layer
time * (index * 30)
// layer 1 gira a 30°/s, layer 2 a 60°/s, layer 3 a 90°/s...

// hue diferente por layer — distribui cores pelo espectro automaticamente
h = (index / thisComp.numLayers) * 360;

valueAtTime

valueAtTime(t) retorna o valor de uma propriedade num tempo diferente do atual. Base pra delays e trails:

delay = 0.1; // segundos
valueAtTime(time - delay)

Aplicado numa propriedade animada, a layer copia os keyframes mas atrasados. Ótimo pra trails e seguimentos.

Text Animator: stagger nativo pra texto

O after tem um sistema próprio pra isso em texto. Eu costumava ignorar, hoje uso sempre.

O Range Selector define quais caracteres são afetados. Based On define a unidade: caractere, palavra ou linha.

Na prática: animo Position Y e Opacity ao mesmo tempo com o mesmo Range Selector. Entra de baixo com fade. Funciona em quase qualquer contexto.

Nulo como hub de controle

Pra projetos com muitos elementos que precisam de timing coordenado, centraliza tudo num lugar:

delay = thisComp.layer("CONTROLS").effect("Delay Frames")("Slider");
d = delay * thisComp.frameDuration * (index - 1);
valueAtTime(time - d)

Agora você controla o delay de todas as layers com um único slider. Keyframe o slider em vez de mexer em cada layer.