Slider settings - Animations

The Animations tab is located at the Slider settings page.

Main Animation

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

Background animation

Background animation

The Background animations are available for the Simple slider type only.

Ken Burns Effect Pro

The Background animations are available for the Simple and Block slider type only.

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.

☝️ Note: At the Showcase and Carousel slider the shapes will be below the actual slide, and are below the layers at every slider type.
  • 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.

☝️ Note: At the Showcase and Carousel slider the particles will be below the actual slide, and are below the layers at every slider type.
  • 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.

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

☝️ Note: This section is not available at the Carousel slider type.
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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.