lc_kenburns
Add cinematic zoom and pan effects to create visual interest and draw attention to key elements.
Element Setup
Section titled “Element Setup”Target Element:
- Element type: Any SVG element
- ID format:
lc_kenburns_*(e.g.,lc_kenburns_hero,lc_kenburns_feature)
Input Format
Section titled “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
Section titled “Usage Example”{% raw %}
<!-- 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"}'{% endraw %}