Never. Stop. Exploring.
Michael Patterson
Art Director & Travel Photographer
My latest post
Average temperatures in the Arctic are rising twice as fast
Arrow
Arrow
Slider

Main slider animation for slide switching

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.

Photographer

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.

Tags: , , , , ,

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.

Note

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.

Main slider animation options
Configuring the animation
Note

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 animation - parallax
Parallax effect

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.

Main animation - touch
Improved touch experience

Version Overview

Pro only
  • Delay
  • Easing
  • Parallax
Free
  • Duration

Similar Sliders -

Portfolio – TestimonialsLayer slider – Create a unique and personal slider with your own contentFull page responsive mode

Related pages