Animations in Smart Slider 3

Hero layouts are getting more and more popular and they are the outstanding exception of featuring a single image. If you choose to use Smart Slider 3 on your website, you can live up to the expectations of your users, and wow them instantly with your amazing sliders. But if you rather chose to create a hero image or a simple block, Smart Slider 3 still won’t let you down.

Main Animation

It’s a well known fact that an attractive animation immediately catches the user’s eyes. (But sometimes, they’re far more impressive than the actual story, so it’s better to find a balance there.) Impressive 2D and spectacular 3D animations will look nice and professional when carefully chosen. However, sometimes, you don’t need these fancy transitions. Sometimes, you just want your slides to have a clear and simple animation. These are the times when you should consider choosing Main animations. You can find them at the Slider settings page, on the General tab.

Hello.
I Am Peter.
Ui designer.

Hello.
I Am Peter.
Ui designer.

Hello.
I Am Peter.
Ui designer.

I Am Peter.

Hello.

Ui designer.

I Am Peter.

Ui designer.

Hello.

I Am Peter.

Hello.

Ui designer.

Arrow
Arrow
Single layer - No layer animation, Vertical Main animation
Slider

 

There are four Main animations available, but they allow more customization. Main animations also work on those layers which don’t have layer animation on them, not just on the background images in your slider. So if you set the Main animation to fade and you select a Background animation, then the layers without layer animation will be faded in, while the selected Background animation will occur on the background images.

All in all, whenever you need something simple but elegant, or when you would like to profit from the impressive touch feature, choose Main animations for your sliders. Main animation can be set for Simple type and Carousel type sliders.

Background animations

There is a great variety of background animations offered by Smart Slider 3 (the exact amount of animations provided is 74, and 13 is available in the free version). These animations happen only on your slider’s background images (or background colors), they do not affect your layers at all. In exchange these animations are more spectacular and they’ll easily wow your visitors.

Setting up a background animation is extremely easy. Simply hit the green Animations button, and select the animations you like, apply them and you’re ready to go. You can choose one, or select multiple ones, it’s entirely up to you.

Arrow
Arrow
3D columns to left
Slider

 

A Background animation can be applied to every slide in the slider at the Slider settings page, or individually to any slide where they are needed. Naturally, this means that they can be mixed with Main animations (e.g. at the Slider settings the Main animations are set, but for a specific slide, a background animation was chosen). Another mixed use case is when there is a specific Background animation set for each slide, and one (or a few) individual slides have set a different animation, to highlight them.

Whenever you need something really impressive, I would highly suggest to take a look at these animations, and select as many of them as you need. These animations can be applied on sliders and slides where the slider is Simple type.

Ken Burns effect

Ken Burns effect is an astonishing panning and zooming effect, introduced by American documentarian, Ken Burns. Nowadays, Ken Burns effect is one of the most popular animations, therefore the most popular themes offer a possibility of using the effect. The reason is simple: it is a simple, elegant effect and works on any kind of images. Over and above, it is not resource heavy at all.

Arrow
Arrow
Downscale - Speed: Slow, Strength: Default
Slider

 

Smart Slider 3 allows you to add this effect on individual slides or each slide in the slider, however, it is available only if you use the Simple slider type or the Block type. Using layer animations, image layers can have similar effect.

Layer animations

Not all animations Smart Slider 3 offers happen on your background images. Smart Slider 3 allows you to add a layer animation to all all 15 layers. There is a couple of predefined animation, but Smart Slider 3 has a powerful layer animation builder which can be used to create any kind of animation you would like to. We know the layer animation builder has a learning curve, so we wrote tutorials to help you master them.

I Am Peter.

Ui designer.

Hello.

I Am Peter.

Ui designer.

Hello.

I Am Peter.

Hello.

Ui designer.

I Am Peter.

Ui designer.

Hello.

I Am Peter.

Hello.

Ui designer.

Arrow
Arrow
Top fade - Duration: 1600, Offset X: 400
Slider

 

Do you need the layer animation to happen only on some user action? For example when they hover over an image, some additional information should appear? The events got you covered. Naturally, you can find tutorials to learn how to use them.

The best part of the layer animations (and events) is that they can be used on blocks (one slide “sliders”), which can’t have Main or Background animations, so even the simple blocks do not have to be static.

Split text animation

The split text animations are special kind of animations, which can only be applied to the heading layer. These animations are not really layer animations, rather textual ones, giving you the opportunity to animate the text itself – not as a “block” but as a chain of lines, words or characters.

Hello.
I Am Peter.
Ui designer.

Hello. I Am Peter.
Ui designer.
I craft simple & clean design solutions for web & mobile.

Hello. I Am Peter.

Hello. I Am Peter.

Arrow
Arrow
Mode: Chars - Sort: Normal, Duration: 1500, Stagger: 200, Offset-X: 200
Slider

Version Overview

Pro only
  • 74 other Background animations
  • Ken Burns effect
  • Layer animations
  • Split text animations
Free
  • Main Animation
  • 13 Background animations

Related Documentation Pages