How to Create a “Ken Burns” Effect Slider in Elementor

The “Ken Burns” effect is a slow pan and zoom on a static image. It brings life to still photography.

To solve this, use Div Render Container Slider for Elementor.

Step 1: The CSS Animation

This requires a tiny bit of CSS because we are animating the contents of the slide, not the slider itself.
On the Image Widget inside your slide, add a class (e.g., `ken-burns-img`).
Add Custom CSS:


@keyframes kenburns {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
selector .swiper-slide-active .ken-burns-img img {
animation: kenburns 10s linear infinite alternate;
}


Step 2: Slider Settings

Enable Slider Mode.
Set Effect to Fade.
Set Autoplay to roughly 5000ms.

Pro Tips for Ken Burns

• Overflow: Ensure the Child Container has Overflow: Hidden so the zooming image doesn’t spill out.