Acorn Studio
Acorn Studio
We build brands and digital experiences for your business!
Who we are?
Who we are

We are a digital creative agency with offices in San Francisco, Hong Kong and Zürich. We build products that achieve better performance for your business or brand.

What we do?
Web Development
App Development
Multimedia Production
Strategy & Branding

Ken Burns

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Ken burns slider using the popular panning and zooming effect on the background images, the layers have a nice hover effect, and the slides are switching automatically.

Premium: Gain access to all slider templates with a single purchase.

Minimum version:


Ken burns effect is a popular effect in web design. This effect with the slider autoplay makes the slider vivid, as you can see in this slider template. You can use this effect on any websites, it achieves a professional looking animation for the images which it is used on.

How to create a hover effect for your layers?

All you need is to select the layer which you would like to add a hover effect to – in this example the Row has a hover effect. After that you should go to the Layer window, and set a hover background color to your layer.

Use actions to navigate to other slide

The Ken burns slider is a good example where you can check how the actions work. You can try it if you click on the button on the first slide. You will see that the slide will switch to the next one. How can you achieve that? Use the NextSlide action!

Use a special text arrow

If you check the slider example, you will see that you can navigate in the slider in 3 ways. Firstly, you can drag to the left or right, and the slider will change. Secondly, you can use the buttons with the actions. Finally, you will see the arrows in the left and the right side of the slider, which are special, because if you hover on them, you will see a text. How can you achieve it?

1. Choose the text arrow type at the Arrows control

Arrows control

2. Set a title of your slide

Go to the Slide settings → Settings tab, and change the title of your slide.

Slide title


If you have more slides and you don’t want to set the titles one by one, you can make the changes in one place. Just go to the Slider settings, and at the top right corner you will see an option for a quick edit.

Quick edit

Here you can modify the Slide titles, descriptions, and you can put a link on the slides as well.

Quick edit option in Smart Slider 3

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!



First Contentful Paint
0.8 s
Speed Index
0.8 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.8 s
Total Blocking Time
0 ms
Cumulative Layout Shift


First Contentful Paint
1.1 s
Speed Index
1.7 s
Largest Contentful Paint
3.3 s
Time to Interactive
2.7 s
Total Blocking Time
90 ms
Cumulative Layout Shift

Related Post: Use the Popular Ken Burns Effect on your Slider

Related Post: Create a Unique Layer Slider with Smart Slider 3

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

Similar Sliders -

Museum website landing pageWedding PageFull-width Product SliderBoxed Particle Slider