Skip to main content
Nesta página

Delay e sequenciamento

Delay é o coração do stagger. Quando você entende como criar delays procedurais, nunca mais ajusta keyframe por keyframe pra criar aquela cascata.

Delay básico 

var delay = 0.15;
valueAtTime(time - delay)

Delay por index 

// layer 1: delay 0, layer 2: delay 3 frames, etc — automático
var delayPerLayer = 3;
var d = delayPerLayer * thisComp.frameDuration * (index - 1);
valueAtTime(time - d)

Controlado por slider 

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

Um único slider controla o espaçamento de todas as layers.

Por posição (não por index) 

// layers à esquerda animam antes, à direita depois
var posX = thisLayer.transform.position[0];
var normalizedX = posX / thisComp.width;
var delay = normalizedX * 1.0;
valueAtTime(time - delay)

Delay orgânico 

// delay ligeiramente diferente por layer baseado em noise
var seed = index * 100;
var delayNoise = noise(seed) * 0.2 + 0.1;
valueAtTime(time - delayNoise)

Delay reverso: saída antes da entrada 

var totalLayers = thisComp.numLayers;
var reverseIndex = totalLayers - index + 1;
var d = reverseIndex * 3 * thisComp.frameDuration;
valueAtTime(time - d)

Stagger de texto: Text Animator

Para texto, o Text Animator faz delay por caractere nativamente. Mais eficiente que expressões:

  1. Layer > Animate > Opacity (ou qualquer propriedade)
  2. No Range Selector > Advanced > Based On: Characters
  3. Anima o Start do Range Selector de 0 a 100%
  4. Ajusta Ease High e Ease Low pra controlar a suavidade

Mais rápido e mais estável que expressões pra animação de texto por caractere.