An attractive slider animation immediately catches the user’s eyes. Impressive 2D and spectacular 3D animation 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 slider animation. These are the times when you should consider using main animation, instead of background animation.
Description: Showcasing an image based slider on a website can be a tricky task but not with Smart Slider 3. The first slide introduces the website or you to the user and entices them to visit more of the slides like your latest blog post or your latest photos.
What’s the difference between main animation and background animation?
Let’s point out the similarities first: they both have effect on your background images, they both look good and professional. While there are tons of background animations to choose from, there are only four main animations available (five for the Simple slider type), but they allow more customization. Main animation also work on layers that don’t have layer animation on them, so if you set the main animation to fade and you set a Background animation, too, then the layers without layer animation will be faded in with the main animation, while the selected Background animation occurs on the background images only.
Main animation types
The default main animation is Horizontal. It will simply slide your slides from left to right or right to left. The direction depends on which neighbor of the active slide will appear after the slide changing event. The Vertical main slider animation is working in a very similar way, just the slide switching will happen in a vertical direction. There is a simple Fade animation, that fades out the current slide. The Crossfade will simultaneously fade in the next slide and fade out the active one. You can also choose no animation that will simply remove the current slide and show the next.
Version 3.0.32 introduced a brand new main animation called cross fade, for the simple slider type which fades out the current and fades in the next slide in the same time.
Main animation settings
The Duration of the main animation can be freely adjusted. This means that you have the ability to set the actual speed of your animation (in milliseconds), more precisely than it can be done with the Background animation. You can also change the Delay, the amount of time the slider waits before the background animation happens.
The main slider animation duration is not equal to the autoplay interval, so if you would like your slides to change automatically, that will need to be set elsewhere.
The actual animation can be chosen by changing the Easing option. If you are not sure which easing does what, you can take a look at this cheatsheet. They all look nice and quite professional, and it is really easy to apply them. The last option for the main animation is the Parallax, where you can set the value of the parallax from a scale of 0 to 1, where 1 does not have the parallax.
Main slider animation and Touch
The touch handling improvements that was implemented in version 3.0.21 make it possible to check out the next and previous slide when you use horizontal or vertical main animation. The feature can be used not just by mobile users, but desktop visitors when the Mouse drag is turned on.