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.
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.
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.
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.
3D columns to left
Slices - Triangle
3D bricks to left
Vertical spin to left
3D rows to left
Spinning cuboid to left
Morph - Brush
Distortion - Warp
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
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.
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.
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.
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.
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.
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.
Get on board! Join our 142,416 subscribers!
Get our latest news, tutorials, guides, tips & deals delivered to your inbox.
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.
