Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now
Design

Animations & Effects in Smart Slider

Ramona Nemeth-Csoka
Ramona Nemeth-Csoka
February 28, 2019

Animation and movement is a huge part of today’s modern WordPress websites. A moving effect is great to catch the visitor’s attention and make the website stand out of the crowd. There are various effects you can use on your WordPress site. Below you can find which slider animations are available in Smart Slider 3. Of course you can also find visual examples to understand every WordPress animation better.

Jump to your favorite effect or animation

Main Slider Animation

It’s a known fact that an attractive WordPress animation can catch the visitor’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 3D animations look nice and professional on your site. Just be sure to you choose them carefully.

But sometimes, you don’t need such fancy transitions. Sometimes, you just want your slides to have a clear and simple animation. These are the times when you should consider choosing a Main animation. You can find them at the Slider settings page, on the General tab.

Single layer
Hello.
I Am Peter.
Ui designer.
Single layer
Hello.
I Am Peter.
Ui designer.
Single layer
Hello.
I Am Peter.
Ui designer.
Multiple layers
Hello.
I Am Peter.
Ui designer.
Multiple layers
Hello.
I Am Peter.
Ui designer.
Multiple layers
Hello.
I Am Peter.
Ui designer.
previous arrow
next arrow
 

 

There are four Main animations available, but they allow lots of customization. Let’s talk about these animations a little bit. First of all, the Main animation is a special kind of slider animation. It is because it can affect both the slide backgrounds and the layers. For instance, if your layers don’t have layer animation the Main animation moves them. And they can move the slide backgrounds as well. That is, if you don’t select any Background animation.

To sum it up, the Main animation is great whenever you need a simple but elegant slider animation. It’s also a great choice when you would like to profit from the impressive touch feature. You can set the Main animation for Simple type and WordPress Carousel sliders.

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

Background Animations

There is a great variety of background animations offered by Smart Slider 3. You can choose from more than 74 animations and 13 is available in the free version as well. These animations happen only on your slider’s background images, colors or videos. The Background animations have no effect on 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. Hit the green Animations button, and then select the animations you like, apply them and you’re ready to go. It’s up to you whether you choose one background animation or select many.

 

You may apply Background animations to every slide at the Slider settings page. You can also select them to a specific slide only. This means that you can mix them with Main animations. For instance, if you set Background animations for one slide, the rest will use the Main animation. You might set a different Background animation for every slide in your slider. Whenever you need something impressive take a look at these animations. You can apply Background animations on Simple type sliders and slides.

Ken Burns effect

Ken Burns effect is an astonishing panning and zooming effect. Nowadays, Ken Burns effect is one of the most popular animations for websites. Thus, 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. Moreover, the effect is not resource heavy at all.

Downscale
To bottom
To top right
To left
Upscale
previous arrow
next arrow
 

 

Smart Slider 3 allows you to add this effect on individual slides or each slide in the slider. The effect is available only if your slider is Simple type or Block type. You can achieve similar effect for your image layers using layer animations.

Basic 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 15 layers. There are a couple of predefined animation you can choose from. But if you need something unique, you can use the layer animation builder. It helps you 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.

Top fade
Hello.
I Am Peter.
Ui designer.
Left
Hello.
I Am Peter.
Ui designer.
Flip up
Hello.
I Am Peter.
Ui designer.
Upscaled
Hello.
I Am Peter.
Ui designer.
Flip left and Left
Hello.
I Am Peter.
Ui designer.
previous arrow
next arrow
 

 

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

The best part of the layer animations (and events) is that they you can use them on blocks. Blocks are the one slide “sliders”, which can’t have Main or Background animations.

Split text animation

The split text animation is special kind of WordPress animation. You can use this effect on the heading layers only. The split text animation works in a unique was as doesn’t move the whole layer but its text alone. The effect gives you the opportunity to animate the text in many different ways. For instance, as a chain of lines, words or characters.

Mode: Chars
Hello.
I Am Peter.
Ui designer.
Mode: Lines
Hello. I Am Peter.
Ui designer.
I craft simple & clean design solutions for web & mobile.
Mode: Words
Hello. I Am Peter.
Mode: Chars
Hello. I Am Peter.
previous arrow
next arrow
 

 

Reveal animation

Reveal animation is an elegant and modern effect you can use on your site. The effect is created by a single colored box, which moves in front of the actual layer, revealing it.

Slide 1
Hello.
I Am Peter.
Ui designer.
Slide 2
Hello.
I Am Peter.
Ui designer.
Slide 3
Hello.
I Am Peter.
Ui designer.
previous arrow
next arrow
 

 

Highlighted heading

The highlighted heading helps you highlight the most important part of the heading, delivering your message in the most effective way. There are several cool effects you can choose from to grab your visitors’ attention.

Slide 1
Hello.
I Am Peter.
Ui designer.
Slide 2
Hello.
I Am Peter.
Ui designer.
Slide 3
Hello.
I Am Peter.
Developer.
Ui designer.
previous arrow
next arrow
 

 

Animated heading

Old-school effects like the typewriter became trendy in modern websites again. The animated heading layer helps you add a typewriter effect to your slides. Saving vertical space and wowing visitors at the same time has never been easier!

Slide 1
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
Slide 2
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
Slide 3
Hello.
I Am Peter.
Developer.
Editor.
Ui designer.
previous arrow
next arrow
 

 

Parallax effect

The parallax effect is a nice WordPress animation based on an optical illusion. The parallax effect creates the illusion of depth during scrolling. It works that way that it moves the images at a different speed and show them from a different angle. It gives an incredible visual experience for every modern website. Smart Slider 3 can create parallax effect for both slide background images and layers.

Background and layer parallax effect
 

 

Particle effect

The particle effect is variety of small shapes like dots, triangles or polygons. The shapes move around the slider and interact with each other or with the visitor. They look rather stunning and they work great as a WordPress animation.

Particle effect
Hello
I am Peter
UI designer
 

 

Shape dividers

Shape dividers are trendy design elements, which are great to connect a visual content with a single colored section. For instance, you can put a slider with shape divider that has a background video or parallax image between two section. It will look amazing.

Shape Divider
Hello.
I Am Peter.
Ui designer.
 

 

Ramona Nemeth-Csoka

About Author

Hi, I’m Ramona and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.