Once you’ve added a layer, the settings listed here will allow you to define the layer’s position, style, hyperlink and animation.
Layer General Parameters
Layer Content Section: Apply and Edit Layer Styles
- Style: Choose a custom style from the drop-down list.
- Edit Style: Edit the layer’s font-family, font-color, background-color and border.
Simple Editor: A WYSIWYG editor for adjusting layer styles.
Advanced Editor: Adjust CSS directly
- Edit Global Style: Edit/Add CSS that will be applied to all sliders.
- Layer Content Text or HTML for the layer (leave blank if the layer is an image or video).
Align, Position & Styling: Position the layer within the current slider.
Special Note: All layers should always be positioned completely inside the preview grid. Although positioning content outside the Grid may be ok for larger screens, if the content isn’t placed inside the preview grid, when the slider is resized down, the layers will often “bleed” outside the sliders view.
- Position: The starting position for the layer. The “X” and “Y” values will be in relation to this position.
- X (Offset X): The horizontal spacing in relation to the “Position” (#1 above). Can be a positive or negative number (but see special note above).
- Y (Offset Y): The vertical spacing in relation to the “Position” (#1 above). Can be a positive or negative number (but see special note above).
- White Space: Choose how text should “wrap”. Click here to see the difference between the available options. Usually the best options for layer text are “Normal” and “No Wrap”. When “Normal” is selected, the text will wrap naturally based on the “Max Width” value (#5 below). Otherwise, if “No Wrap” is selected, the text will always be displayed on a single line (unless <br /> tags are present).
- Max Width: Choose a maximum width for the text. Can be a px value, a % value, or “auto” (no max width).
- Max Height: Choose a maximum height for the text. Can be a px value, a % value, or “auto” (no max height)
Final Rotation: Apply a 2D rotation to the layer.
- 2D Rotation: The rotation value to be applied to the layer (enter “0” for no rotation).
- Rotation Origin X: The horizontal rotation axis point (usually “50%” is best).
- Rotation Origin Y: The vertical rotation axis point (usually “50%” is best).
Preview Transition Section
Shows a live sample preview of the currently selected transition “Start” and “End” transitions. The “on/off” button toward the bottom-right of the preview is just an admin option for toggling the preview on and off (it isn’t an official setting for the actual slider or layer).
The transition for when the layer first appears.
Quick Tip: Want a “No Transition”? Select “Fade” for the “Start Transition”, and enter the number “0” for the “Start Duration”.
- Start Animation: The transition type for when the layer first animates into view. Default options:
- Start Easing: The algorithm used for the transition. Click here for a visualization of some of the different options (you can also select different options and preview the easing in the admin’s “Preview Transition Section”).
- Linear based transitions: No acceleration or deceleration.
- EaseOut based transitions: Transition will start out fast, and slow down toward the end.
- EaseIn based transitions: Transition will start out slow, and speed up toward the end.
- EaseInOut based transitions: Transition will start out slow, then speed up toward the middle, then slow down toward the end.
- Start Duration: The total time the transition should last (in milliseconds). Usually a number between 300 and 1000 is best.
- Split Text per: Applicable for text-based layers only. Choose to animate text’s letters, word or lines sequentially. Import the “textsplits.zip” demo for a good example of Text Animations.
- No Split: Animate all the text at the same time.
- Char Based: Animate each letter individually (usually best when used for single lines of text).
- Word Based: Animate each word individually.
- Line Based: Animate each line individually.
- Split Delay: The time (in milliseconds) between each animation when one of the “Split Text” options is used. For example, if “Split Text per -> Char Based” is selected, and the number “10” is entered here, the letters will animate one after the other every 10 milliseconds. Usually “200” or below is best.
- Custom Animation: Create a new transition with custom options. Clicking this button brings up the following admin window:
- Live Preview: Shows what the custom animation would look like in real-time.
- Layer Animation Settings Panel: Where the custom animation is created. Each setting represents the starting or ending point of the transition (see #5 below). Once a setting is adjusted, the live preview above will instantly update.
- Randomize: Randomize the settings to create a totally unique transition or for some creative inspiration.
- Test Parameters: Adjust the animations speed, easing, etc. (these settings are for previewing purposes only. For example, if you adjust the “speed” and find a value you like, once the Custom Animation is created, you’ll need to re-enter this value into the layer’s official “Start Duration / End Duration” fields.
- Transition Direction: Change the live preview to show what the custom transition would look like animating into or out of view (“Start Transition” vs. “End Transition”).
After adjusting the custom settings, click the Save/Change button toward the bottom-right of the screen. Choose “Save As” to create a new, unique transition.
The transition type for when the layer animates out of view. The options here are identical to the Start Transition described above. The one exception is you can select “Choose Automatic” for the “End Animation”, which will then apply the same settings defined in the “Start Animation” section (but in reverse order).
Animate the layer continuously after it appears on the screen.
Special Note: A “Loop Animation” won’t show up in the “Layer Animation Live Preview” above. Instead, click the magnifying glass icon located toward the top-right corner of the screen for an official preview.
This featured is best explained by listing the life cycle of a layer animation:
- Start Animation: The animation that happens when the layer first appears.
- Loop Animation: The animation that continuously happens after the “Start Animation” completes.
- End Animation: The animation that happens when the layer animates out of view.
There are four options for the “Loop Animation”. Click each image below to see an animated gif showing an example of what each option looks like:
Layer Links & Advanced Params
Important Note: The “Layer Links” section here is only for hyperlinking a layer to another slide (this is particularly useful for building custom navigation layers). Click here to learn how to hyperlink a layer to another webpage.
- Links (optional): Choose to link the layer to another slide within the current slider.
- Not Chosen: No link
- Next Slide: Link to the next slide
- Previous Slide: Link to the previous slide
- Scroll Below Slider: Clicking the layer will scroll the web page to a certain point beneath the slider.
- Specific Slide: Link to a specific slide in the current slider.
- Caption Sharp Corners (only available when a layer has a solid background color)
Combination – Left Corner = Sharp, Right Corner = Sharp Reversed:
Combination – Left Corner = Sharp Reversed, Right Corner = Sharp:
- Advanced Responsive Settings:
- Responsive Through All Levels: Only applicable to HTML-based layers that include multiple HTML elements. When selected, the slider will attempt to resize all HTML elements present inside the layer.
- Hide Under Width: Choose to hide the layer on mobile. A value for #2 or #3 in the Mobile Visibility section must be entered first.
- Attributes (optional): Include optional attributes for the <li> element that represents the current slide.
Layers Timing & Sorting
This section is where you can adjust the z-index of your layers (which layers appear on top of others in case they’re supposed to overlap), and also where you can define the Start Time and End time of the layer’s animation.
Special Note: The “layer timeline” shown in the screenshots below is a direct representation of the slide’s delay value. And it’s within this time frame that layer content can be animated into and out of view. So think of the number “0” as the very beginning of when the slide appears, and the slide’s “delay” value as the very end of the layer timeline.
Set the z-index for each layer:
Adjust the “Start” and “End” time of the layer animation:
Global Layer Options (apply to all layers)
Individual Layer Options