Referencja presetów animacji

Presety animacji to wbudowane szablony keyframe’ów dostępne z buttona Apply animation preset na osi czasu. Nakładają modyfikacje na bieżący stan warstwy, a następnie wracają do baseline (entrance) albo odchodzą od niego (exit). Kontekst prozy w Edytor → Timeline.

Konwencje

• Default duration w milisekundach.
• Easing wartości: linear, ease-in, ease-out, ease-in-out.
• Presety targetują fxOpacity (per-element opacity, stosowane do inner content) zamiast master opacity (layer-level wrap). Dzięki temu background / stroke / shadow warstwy zostają widoczne podczas fade’a, a ręczny slider opacity użytkownika stackuje się niezależnie.
• Stałe dystansu używane przez slide presety: SLIDE_DISTANCE = 200 px, DIAGONAL_DX = 400 px, DIAGONAL_DY = 300 px.

Entrance

fadeIn

Label	Fade in
Duration	600 ms
Easing	ease-out
Modifies	fxOpacity (0 → 1)

Dwa keyframe’y: baseline z fxOpacity = 0 w startTime, baseline w startTime + duration.

slideInLeft / slideInRight / slideInTop / slideInBottom

Label	Slide in (left / right / top / bottom)
Duration	600 ms
Easing	ease-out
Modifies	offsetX lub offsetY (offset o ±200 px), fxOpacity (0 → 1)

Dwa keyframe’y: offset o 200 px w kierunku wejścia + fxOpacity = 0 w startTime, baseline w startTime + duration.

slideInDiagonalTopLeft

Label	Slide in (top-left, 45°)
Duration	800 ms
Easing	ease-out
Modifies	offsetX (−400), offsetY (−300), rotation (−45° → 0), fxOpacity (0 → 1)

Dwa keyframe’y: offset diagonalnie góra-lewo + obrót −45° + przezroczystość na starcie, baseline na końcu.

flip3DLeft / flip3DRight

Label	Flip 3D (left / right)
Duration	800 ms
Easing	ease-out → linear → (default)
Modifies	rotationY (±180 → ±90 → 0), fxOpacity (0 → 0.5 → 1)

Trzy keyframe’y (start, midpoint, end). Flip 3D na osi Y z cross-fade.

scrambleIn

Label	Scramble in
Duration	1500 ms
Easing	linear → (default)
Modifies	scrambleProgress (0 → 1)
Required params	order: 'left-to-right' (albo inna kolejność resolve)

Text-specific. Silnik czyta layer.data.scramble i mutuje innerText na klatkę. Wybranie tego presetu otwiera modal configu, gdzie ustawiasz duration + resolve order.

Emphasis

pulse

Label	Pulse
Duration	800 ms
Easing	ease-in-out
Modifies	fxOpacity zanurkowane do 50% baseline w midpoint

Trzy keyframe’y: baseline → 50% opacity w połowie → baseline.

shake

Label	Shake
Duration	500 ms
Easing	(default)
Modifies	offsetX oscyluje ±10, ±6, powrót do baseline

Sześć keyframe’ów rozmieszczonych co duration / 5 interwałów — base, −10, +10, −6, +6, base.

rotateY360

Label	Rotate Y 360°
Duration	1500 ms
Easing	linear
Modifies	rotationY (0 → 360°)

Dwa keyframe’y: 0° na starcie, 360° na końcu. Ciągła rotacja wokół osi Y.

Exit

fadeOut

Label	Fade out
Duration	500 ms
Easing	ease-in
Modifies	fxOpacity (1 → 0)

Dwa keyframe’y: baseline na starcie, fxOpacity = 0 na końcu.

slideOutDiagonalBottomRight

Label	Slide out (bottom-right, 45°)
Duration	800 ms
Easing	ease-in
Modifies	offsetX (+400), offsetY (+300), rotation (0 → 45°), fxOpacity (1 → 0)

Dwa keyframe’y: baseline na starcie, diagonalnie offset dół-prawo + obrót +45° + przezroczystość na końcu.

scrambleOut

Label	Scramble out
Duration	1500 ms
Easing	ease-in → (default)
Modifies	scrambleProgress (1 → 0), fxOpacity (1 → 0)
Required params	order: 'left-to-right' (albo inna kolejność resolve)

Text-specific. Lustro scrambleIn: baseline na starcie, scrambleProgress = 0 + fxOpacity = 0 na końcu.

Kategorie w skrócie

Kategoria	Presety
entrance	fadeIn, slideInLeft, slideInRight, slideInTop, slideInBottom, slideInDiagonalTopLeft, flip3DLeft, flip3DRight, scrambleIn
emphasis	pulse, shake, rotateY360
exit	fadeOut, slideOutDiagonalBottomRight, scrambleOut

Piętnaście presetów łącznie.

Jak zastosować preset

1. Wybierz warstwę w osi czasu.
2. Przesuń playhead tam, gdzie ma się zacząć preset.
3. Kliknij Apply animation preset w toolbarze osi czasu.
4. Wybierz kategorię, potem preset.
5. (Tylko scramble) — otwiera się modal configu scramble; wybierz order + duration.
6. Keyframe’y są generowane. Kliknij Save, żeby zapisać.

Gdzie dalej

• Edytor → Timeline — proza UI-side.
• Edytor → Layer Style → Transform — dla nie-animowanych transformacji 3D.
• Referencja → Typy warstw — kształt JSON animation na każdej warstwie.