Slider settings - Animations

The Animations tab is located at the Slider settings page. Here you can customize the animations and effects of Smart Slider.

Main Animation

Main animation defines the default animation during slide switching. The carousel option allows your last slide to switch to the first slide, and the first slide to switch to the last slide. You can turn it off if you would like the slide switching to stop at the last and first slide.

The Main animation has different options at the Simple and Carousel slider types where it's available.

Background Animation

Background Animations are only available at the Simple slider type. Learn more about them!

Ken Burns Effect - Pro

Ken Burns effect is only available at the Simple slider type and at the Block type.

The Ken Burns Effect is a zooming animation on the background image. You can see a video here and a real example here.

Effects - Pro

Shape divider

You can select shape dividers for your slider. You can select a separate divider for the top and bottom of the slider.

• Type - You can select the look of the shape divider.
• Color - The color of the divider. Semi-transparent colors are supported.
• Secondary - The secondary color of the divider, which is available only at the 2 colors types. Semi-transparent colors are supported.
• Width - The width of the divider in percent.
• Height - The height of the divider in px.
• Flip - You can flip the divider horizontally.
• Animate - You can animate the diver. Some dividers animate only upon loading, some of them animate continuously.

Particle effect

You can select the Particle effect for your slider. We have predefined particles which you can select, or you can generate your own. When you are done Download current config (json) and paste content into the field of the Custom type particle.

• Color - You can change the color of the particles.
• Line color - You can change the color of the line between the particles.
• Speed - This is how fast the particles move on the slider. The bigger the number the faster they move.
• Number of particles - This is the number of particles shown on the slider. The bigger the number the more particle is visible.
• Hover - You can define an interaction between the user and the particles when the mouse is over the slider.
  • Off - Disables the interaction between the mouse cursor and the particles
  • Grab - Makes the cursor act like another particle, and connects it with the nearest particles
  • Bubble - The size of the particles which are closest to the cursor is temporarily increased.
  • Repulse - The particles move away from the cursors radius
• Click - You can define an interaction between the user and the particles when the user clicks on the slider.
  • Off - Disables the interaction between the mouse click and the particles
  • Repulse - The particles move away from the cursor radius
  • Push - Adds new articles to the slide. Might slow down the site if the user clicks too many times.
  • Remove - Removes some particles from the slider. Might remove all particles if the user clicks too many times.
  • Bubble - The size of the particles which are closest to the cursor is temporarily increased.
• Hide on mobile - you can hide the Particle effect on mobile. Since it's resource heavy, we recommend doing so as it can crash browsers.

Layer Animations - Pro

Play on load

The layer animations play the first time you see the slide. If you turn it off, they'll only play when you visit the slider for the second/third/etc time.

Play once

With this option the layer animations and the Ken Burns Effect will be played only one time.

Play on

You can set when the incoming layer animations should start, either after the slide switching has ended, or as soon as the switching starts.

Mode

• Skippable: The Outgoing layer animations will be skipped when you switch slides. Additionally, the Outgoing layer animations which aren't triggered by any event will be played immediately
• Forced: Your slides won't switch until all Outgoing layer animation has played. Additionally, the Outgoing animations, which aren't triggered by any event will play only on slide switching.

Layer Parallax - Pro

Mobile

If you want this effect on phones too, turn this option on. (Some mobile browsers doesn't play the parallax effect, they will only show the start, and the end, but it won't move between, because this is how they optimized their speed, by limiting animations.)

3D

With this option your layers won't only move lower or higher, but they will also bend.

Animate

If this option is turned off, the layers will immediately jump into their positions, where they should be, when you put your cursor inside the slider, but if it's turned on, they will move from their positions into the position, where they should be with an animation.

Horizontal

The parallax effect can go to ways, horizontally and vertically. You can either turn this option off, or make it happen, when the mouse enters the slider. The effect can go either the way the mouse enters, or the opposite way.

Vertical

The parallax effect can go to ways, horizontally and vertically. You can either turn this option off, make it happen, when the mouse enters the slider or make the effect happen when you are scrolling. The effect can go either the way the mouse enters / the scrolling happens, or the opposite way.

Mouse Origin

If you choose one of the mouse options, you can choose if you want the parallax distance effect to happen from your mouse cursor or from the center of your slider.

Scroll Move

When you are using parallax with page scrolling, the layers could go outside of your slider, which sometimes isn't good, so with this option you can limit down your layers to only move lower or higher with the parallax effect, and stay inside the slider at the other way.