`lc_kenburns_*`

Add cinematic zoom and pan effects to create visual interest and draw attention to key elements.

Element Setup

Target Element:

Element type: Any SVG element
ID format: lc_kenburns_* (e.g., lc_kenburns_hero, lc_kenburns_feature)

Input Format

JSON Configuration:

{
  "duration": 4,
  "startScale": 0.8,
  "endScale": 1.0,
  "ease": "power2.out"
}

Property	Description	Default
`duration`	Animation duration (seconds)	4
`startScale`	Initial scale (0–2)	0.8
`endScale`	Final scale (0–2)	1.0
`ease`	GSAP easing (e.g. power2.out)	“power2.out”

Important: Animation starts when the element transitions from dimmed/hidden to visible during narration playback.

Usage Example

<!-- In your SVG -->
<image id="lc_kenburns_hero" href="hero-image.jpg" width="1080" height="810" />

<!-- In your dataset -->
{{ hero }} = '{"duration": 5, "startScale": 0.8, "endScale": 1.1, "ease": "power2.out"}'

← Back to Custom Overview