Edit

Editing: tmpl-smart-help.php

<?php defined( 'LS_ROOT_FILE' ) || exit; ?>

<lse-smart-help>
	<lse-smart-help-arrow></lse-smart-help-arrow>
	<lse-smart-help-bg>
		<lse-smart-help-inner>
			<lse-smart-help-overflow class="lse-scrollbar lse-scrollbar-light">
				<lse-smart-help-title></lse-smart-help-title>
				<lse-smart-help-content></lse-smart-help-content>
				<lse-grid class="lse-smart-help-cols">
				</lse-grid>
			</lse-smart-help-overflow>
		</lse-smart-help-inner>
		<lse-smart-help-outer></lse-smart-help-outer>
	</lse-smart-help-bg>
</lse-smart-help>

<lse-smart-help-elements>
	<lse-button class="lse-show-more lse-can-be-activated"><lse-i class="lse-open"><?= __('show', 'LayerSlider') ?></lse-i><lse-i class="lse-close"><?= __('hide', 'LayerSlider') ?></lse-i> <?= __('more', 'LayerSlider') ?></lse-button>
	<lse-smart-options-title><?= sprintf( _x('%s options', 'Possessive case: filter options, font options, etc.', 'LayerSlider'), '<lse-i></lse-i>' ) ?></lse-smart-options-title>
	<lse-smart-examples-title><?= sprintf( _x('%s examples', 'Possessive case: example of what value an input field can take, etc.', 'LayerSlider'), '<lse-i></lse-i>' ) ?></lse-smart-examples-title>
	<lse-smart-options-content></lse-smart-options-content>
	<lse-smart-operations-title>
		<?= __('smart operations', 'LayerSlider') ?>
		<lse-b><?= __('on selected layers’ values', 'LayerSlider') ?></lse-b>
		<a href="https://layerslider.com/documentation/#builder-smart-operations" target="_blank" class="lse-button">
			<?= lsGetSVGIcon('info-circle') ?>
		</a>
	</lse-smart-operations-title>
	<lse-smart-operations-content class="lse-smart-help-theme">
		<input class="lse-smart-operations-input" type="text" placeholder="examples:   +100   or   *2 --100">
		<lse-wrapper class="lse-smart-operations-help">
			<lse-text><?= __('QUICK HELP: You can use numbers and math expressions with the following operators:', 'LayerSlider') ?></lse-text>
			<lse-b>+</lse-b><lse-b>-</lse-b><lse-b>*</lse-b><lse-b>/</lse-b>
			<lse-b>++</lse-b><lse-b>--</lse-b><lse-b>**</lse-b><lse-b>//</lse-b><lse-b>+*</lse-b><lse-b>-*</lse-b><lse-b>*+</lse-b><lse-b>/+</lse-b>
			<lse-b>+++</lse-b><lse-b>---</lse-b><lse-b>***</lse-b><lse-b>///</lse-b><lse-b>++*</lse-b><lse-b>--*</lse-b><lse-b>**+</lse-b><lse-b>//+</lse-b>
		</lse-wrapper>
		<lse-wrapper class="lse-smart-operations-results">
			<lse-grid>
				<lse-row class="lse-smart-operations-placeholder-row">
					<lse-col class="lse-layer-thumb-placeholder"></lse-col>
					<lse-col class="lse-layer-name-placeholder"></lse-col>
					<lse-col class="lse-original-value-placeholder"></lse-col>
					<lse-col class="lse-arrow-placeholder">
						<?= lsGetSVGIcon('long-arrow-right',false,['class' => 'lse-it-0']) ?>
					</lse-col>
					<lse-col class="lse-new-value-placeholder"></lse-col>
				</lse-row>
			</lse-grid>
			<lse-wrapper class="lse-scrollbar lse-scrollbar-light">
				<lse-grid></lse-grid>
			</lse-wrapper>
			<lse-button-group>
				<lse-button class="lse-f11 lse-apply-button">
					<?= __('Apply new values', 'LayerSlider') ?>
				</lse-button>
				<lse-button class="lse-icons-only lse-f00 lse-toggle-sort">
					<?= lsGetSVGIcon('sort-alt',false, ['class' => 'lse-it-fix']) ?>
				</lse-button>
			</lse-button-group>
		</lse-wrapper>
	</lse-smart-operations-content>
	<lse-color-picker>
		<form class="lse-color-picker" name="grad">

<?= lsGetSVGIcon('copy', false, [
				'class' => 'lse-color-picker-copy',
				'data-tt' => '',
				'data-tt-de' => 0
			]) ?>
			<lse-tt><?= __('Copy color or gradient') ?></lse-tt>

<?= lsGetSVGIcon('clipboard', false, [
				'class' => 'lse-color-picker-paste',
				'data-tt' => '',
				'data-tt-de' => 0
			]) ?>
			<lse-tt><?= __('Paste color or gradient') ?></lse-tt>

<lse-smart-help-contents>

<div data-smart-help="slideduration">
		<?= __('The time that this slide remains visible before the slideshow attempts to change to the next slide. In other words, it’s the animation timeline’s length. Leave this option empty to let LayerSlider manage it automatically. This value is in milliseconds, so the value 1000 means 1 second.', 'LayerSlider') ?>
	</div>

<div data-smart-help="offset">

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-25 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>

<lse-ib class="lse-anim-box-27 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>

<lse-ib class="lse-anim-box-26 lse-anim-box lse-axis-x  lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>

<lse-ib class="lse-anim-box-29 lse-anim-box lse-axis-x  lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Shifts the layer position from its original with the given amount on the selected axis. Refer to the below options to see special values and supported units.', 'LayerSlider') ?>
	</div>

<lse-ib class="lse-anim-box-24 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>

<?= __('Shifts the layer starting position with the given amount on the selected axis. Layers animate from the offset value toward their position set under the <b>STYLE</b> menu. Refer to the below options to see special values and supported units.', 'LayerSlider') ?>
	</div>

<lse-ib class="lse-anim-box-26 lse-anim-box lse-axis-x lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Shifts each text fragment starting position with the given amount on the selected axis. Text fragments animate from the offset value toward the whole joint text. Refer to the below options to see special values and supported units.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-28 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>

<?= __('Shifts the layer position with the given amount while it’s animating out. Layers animate from their current state toward the value you set here. Refer to the below options to see special values and supported units.', 'LayerSlider') ?>
	</div>

<?= __('Shifts each text fragment position with the given amount on the selected axis while the layer animates out. Text fragments animate from the whole joint text toward the value you set here. Refer to the below options to see special values and supported units.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-30 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Shifts the layer position with the given amount of intensity on the X axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-31 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Shifts the layer position with the given amount of intensity on the Y axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<div data-smart-help="scale">
		<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-3 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-2 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-1 lse-anim-box lse-axis-x lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-4 lse-anim-box lse-axis-x lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Scales the layer with the given amount on the selected axis. Use the value 1 for the original size. The value 2 will double, while 0.5 will shrink the layer to half of its original size. A negative value flips the layer on the given axis.', 'LayerSlider') ?>
	</div>

<?= __('Sets the initial layer scale on the selected axis before the layer starts animating in. Use the value 1 for the original size. The value 2 will double, while 0.5 will shrink the layer to half of its original size. A negative value flips the layer on the given axis. Layers animate from this value toward their appearance set under the <b>STYLE</b> menu.', 'LayerSlider') ?>
	</div>

<?= __('Sets the initial scale of each text fragment on the selected axis before they start animating in. Use the value 1 for the original size. The value 2 will double, while 0.5 will shrink text fragments to half of their original size. A negative value flips text fragments on the given axis. Text fragments animate from this value toward the whole joint text. Refer to the below options to see special values and supported units.', 'LayerSlider') ?>
	</div>

<?= __('Scales the layer with the given amount on the selected axis while it’s animating out. Use the value 1 for the original size. The value 2 will double, while 0.5 will shrink the layer to half of its original size. A negative value flips the layer on the given axis. Layers animate from their current state toward the value you set here.', 'LayerSlider') ?>
	</div>

<?= __('Scales each text fragment with the given amount on the selected axis while they’re animating out. Use the value 1 for the original size. The value 2 will double, while 0.5 will shrink each fragment to half of its original size. A negative value flips the fragments on the given axis. Text fragments animate from the whole joint text toward the value you set here.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-32 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Scales the layer with the given amount of intensity on the X axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-33 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Scales the layer position with the given amount of intensity on the Y axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<div data-smart-help="rotate">
		<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-7 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
				<lse-origin class="lse-anim-center">&#10011;</lse-origin>
			</lse-ib>
			<lse-ib class="lse-anim-box-6 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-5 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Rotates the layer by the given number of degrees on the selected axis. Negative values are allowed for counterclockwise rotation.', 'LayerSlider') ?>
	</div>

<?= __('Sets the initial layer rotation by the given number of degrees on the selected axis before the layer starts animating in. Negative values are allowed for counterclockwise rotation. Layers animate from this value toward their appearance set under the <b>STYLE</b> menu.', 'LayerSlider') ?>
	</div>

<?= __('Sets initial rotation of each text fragment by the given number of degrees on the selected axis before they start animating in. Negative values are allowed for counterclockwise rotation. Text fragments animate from this value toward the whole joint text.', 'LayerSlider') ?>
	</div>

<?= __('Rotates the layer with the given number of degrees on the selected axis while it’s animating out. Negative values are allowed for counterclockwise rotation. Layers animate from their current state toward the value you set here.', 'LayerSlider') ?>
	</div>

<?= __('Rotates each text fragment with the given number of degrees on the selected axis while they’re animating out. Negative values are allowed for counterclockwise rotation. Text fragments animate from the whole joint text toward the value you set here.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-34 lse-anim-box lse-axis-x lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Rotates the layer with the given amount of intensity by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-35 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Rotates the layer with the given amount of intensity on the X axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-36 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Rotates the layer with the given amount of intensity on the Y axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<div data-smart-help="skew">
		<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-8 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-9 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-10 lse-anim-box lse-axis-x lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Skews the layer by the given number of degrees on the selected axis. Negative values are allowed for the reverse direction.', 'LayerSlider') ?>
	</div>

<?= __('Sets the initial layer skew on the selected axis before the layer starts animating in. Negative values are allowed for the reverse direction. Layers animate from this value toward their appearance set under the <b>STYLE</b> menu.', 'LayerSlider') ?>
	</div>

<?= __('Sets the initial skew of each text fragment on the selected axis before they start animating in. Negative values are allowed for the reverse direction. Text fragments animate from this value toward the whole joint text.', 'LayerSlider') ?>
	</div>

<?= __('Skews the layer with the given amount of degrees on the selected axis while it’s animating out. Negative values are allowed for the reverse direction. Layers animate from their current state toward the value you set here.', 'LayerSlider') ?>
	</div>

<?= __('Skews each text fragment with the given amount of degrees on the selected axis while they’re animating out. Negative values are allowed for the reverse direction. Text fragments animate from the whole joint text toward the value you set here.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-37 lse-anim-box lse-axis-x">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Skews the layer with the given amount of intensity on the X axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-38 lse-anim-box lse-axis-y">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Skews the layer with the given amount of intensity on the Y axis by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-39 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Changes the transparency of the layer with the given amount of intensity by scrolling up or down on your site.', 'LayerSlider') ?>
		<br><br>
		<?= __('You can use decimal values and go over the pre-defined ranges to fine-tune the animation intensity.', 'LayerSlider') ?>
	</div>

<div data-smart-help="durationscroll">
		<?= __('The length of the scroll transition in milliseconds. A second equals to 1000 milliseconds. <br><br> Using smaller values will result in quick and fast animations, while larger values will result in slower and delayed animations.', 'LayerSlider') ?>
	</div>

<div data-smart-help="centerpointscroll">
		<?= __('Choose a center point for scroll transition layers where they will be aligned perfectly according to their original position. <br><br> <b>Inherit</b>: Uses the global value set in Project Settings → Defaults. <br><br> <b>Top</b>: When the top edge of the slider is at the top of the viewport. <br><br> <b>Center</b>: When the center of the slider is at the center of the viewport. <br><br> <b>Bottom</b>: When the bottom edge of the slider is at the bottom of the viewport.', 'LayerSlider') ?>
	</div>

<div data-smart-help="transformorigin">
		<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-13 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
				<lse-origin class="lse-anim-center">&#10011;</lse-origin>
			</lse-ib>
			<lse-ib class="lse-anim-box-11 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
				<lse-origin class="lse-anim-center">&#10011;</lse-origin>
			</lse-ib>
			<lse-ib class="lse-anim-box-12 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
				<lse-origin class="lse-anim-center">&#10011;</lse-origin>
			</lse-ib>
		</lse-b>

</div>

<?= __('The transform origin is the point around which transformations are applied. For example, a layer may rotate around its center point or an entirely custom point like one of its corners. See the below options for common values.', 'LayerSlider') ?>
		<br><br>
		<b><?= __('This transform origin takes effect when you scroll past the center point set for this layer in Scroll Transition Properties.', 'LayerSlider') ?></b>

</div>

<?= __('Changes the perspective of animated objects in the 3D space. Large values of perspective cause milder transformations. Smaller values cause stronger and more noticeable transformations.', 'LayerSlider') ?>

</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-21 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-23 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-22 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-20 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('Clips (cuts off) the sides of layers by the given amount specified in pixels or percentages. Similar to animating layer dimensions, except it will not shift the layer and its contents. The four values are in order: top, right, bottom, and the layer’s left side.', 'LayerSlider') ?>

</div>

<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-16 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-17 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-18 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
			<lse-ib class="lse-anim-box-19 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>

<?= __('The timing function of the animation. With this function, you can manipulate the movement of the animated object. Please click on the link to open <a href="https://easings.net/" target="_blank">easings.net</a> for more information and more detailed examples.', 'LayerSlider') ?>

</div>

<div data-smart-help="widthin">
		<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-40 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>
		<?= __('Sets the layer’s initial width before it starts animating in. Layers animate from this value toward their appearance set under the <b>STYLE</b> menu. You can use pixels or percents. Percentage values are relative to the project canvas size.', 'LayerSlider') ?>
	</div>

<div data-smart-help="heightin">
		<lse-b class="lse-anim lse-jcse">
			<lse-ib class="lse-anim-box-41 lse-anim-box">
				<lse-anim-block class="lse-anim-rect lse-anim-orig"></lse-anim-block>
				<lse-anim-block class="lse-anim-rect lse-anim-moved"></lse-anim-block>
			</lse-ib>
		</lse-b>
		<?= __('Sets the layer’s initial height before it starts animating in. Layers animate from this value toward their appearance set under the <b>STYLE</b> menu. You can use pixels or percents. Percentage values are relative to the project canvas size.', 'LayerSlider') ?>
	</div>

<div data-smart-help="filterin">
		<?= __('Sets the initial layer filters before it starts animating in. Layers animate from this value toward their appearance set under the <b>STYLE</b> menu. Filters provide effects like blurring, color shifting, or changing the brightness, contrast, saturation of your layers, among many others. Use the below options to easily apply multiple filters on your layers.', 'LayerSlider') ?>
	</div>

However, there are cases where you might want to display certain interface elements immediately, even if the project canvas is only partially visible and the playback of your project hasn’t started yet.<br><br>

With this option, you can exclude layers from waiting for the playback to begin, and they will start the selected transitions immediately.', 'LayerSlider') ?>
	</div>

<?php if( ! $googleFontsEnabled ) : ?>
		<lse-b class="lse-notification lse-smart-help-notification">
			<lse-text><?= __('It looks like you’ve disabled Google Fonts in LayerSlider plugin settings. We recommend enabling Google Fonts, so you can enhance your content with beautiful and unique typography.', 'LayerSlider') ?></lse-text>
		</lse-b>
		<?php else : ?>
		<?= __('Enhance your content with beautiful and unique typography. Google Fonts provides over a thousand web-optimized fonts.', 'LayerSlider') ?>
		<lse-button class="lse-layer-open-font-library">
			<?= __('Browse Google Fonts', 'LayerSlider') ?>
		</lse-button>
		<?php endif ?>
	</div>

<b>Continuous Background:</b><br>
			The cut out part is static and will not change as the layer moves.

<b>Dynamic for Transitions:</b><br>
			The cut out part is dynamic and will show the corresponding part of the background for the selected transition type as the layer moves.

Useful tip: use this feature with more layers and the same background to create great effects.', 'LayerSlider') ?>

<div data-smart-help="deeplink">
		<?= __('A slide alias name, which you can use in your URLs with a hash tag so LayerSlider will start with the corresponding slide when visitors arrive to the page. <br><br> Example: domain.com/page/#welcome<br><br>Use only lowercase alphanumeric values. You can also use this feature to implement slide navigation with links.', 'LayerSlider') ?>
	</div>

<div data-smart-help="sceneheight">
		<?= __('The length of the scrollable area. Use larger values to keep the slider visible for longer, and play animations slower in case of a Scroll Scene. Supported units: <br><br> <b>px:</b> A fixed value specified in pixels. <br><br> <b>%</b> or <b>sh:</b> Percentage of the slider height. 1sh equals to 1% of the slider height. This value scales dinamically when the slider’s size changes. <b> <br><br> vh:</b> Percentage of the viewport (browser window) height. 1vh equals to 1% of the viewport height. This value scales dinamically when the browser window is resized.', 'LayerSlider') ?>
	</div>

<div data-smart-help="projectverticalspacing">
		<?= __('Creates empty space above and below your projects (i.e. margins). Supported units: <br><br> <b>px:</b> A fixed value specified in pixels. <br><br> <b>%</b> or <b>sh:</b> Percentage of the slider height. 1sh equals to 1% of the slider height. This value scales dinamically when the slider’s size changes. <b> <br><br> vh:</b> Percentage of the viewport (browser window) height. 1vh equals to 1% of the viewport height. This value scales dinamically when the browser window is resized.', 'LayerSlider') ?>
	</div>

<div data-smart-help="performancemodethreshold">
		<?= __('The minimum distance between the slider and viewport edges when Performance Mode should activate as described on the right. Supported units: <br><br> <b>px:</b> A fixed value specified in pixels. <br><br> <b>%</b> or <b>sh:</b> Percentage of the slider height. 1sh equals to 1% of the slider height. This value scales dinamically when the slider’s size changes. <b> <br><br> vh:</b> Percentage of the viewport (browser window) height. 1vh equals to 1% of the viewport height. This value scales dinamically when the browser window is resized.', 'LayerSlider') ?>
	</div>

<div data-smart-help="scroll-to-scene-position">
		<?= __('The scene position to animate to. Supported units: <br><br> <b>%:</b> Percentage of the scene’s length. 0% means the beginning, while 100% means the end of the scene. <br><br> <b>ms:</b> A specific point in time on the scene’s animation timeline in milliseconds. A second is 1000 milliseconds. Sticky scenes do not support this unit.', 'LayerSlider') ?>
	</div>

<div data-smart-help="scroll-to-timeline-position">
		<?= __('The timeline position to animate to or the amount to play forward/backward. Supported units: <br><br> <b>%:</b> Percentage of the slide duration. 0% means the beginning, while 100% means the end of the slide timeline. <br><br> <b>ms:</b> A specific point or amount of time in milliseconds. A second is 1000 milliseconds.', 'LayerSlider') ?>
	</div>

</lse-smart-help-contents>

<lse-smart-options-contents>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="0%"><?= __('Left', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50%"><?= __('Center', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100%"><?= __('Right', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="0%"><?= __('Top', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50%"><?= __('Middle', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100%"><?= __('Bottom', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="100px"><?= __('100px', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-x _textin-x" data-smart-inject="left"><?= __('Enter the stage from left', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-x _textin-x" data-smart-inject="right"><?= __('Enter the stage from right', 'LayerSlider') ?></lse-li>
			<lse-li class="_out-x _textout-x"data-smart-inject="left"><?= __('Leave the stage on left', 'LayerSlider') ?></lse-li>
			<lse-li class="_out-x _textout-x" data-smart-inject="right"><?= __('Leave the stage on right', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-y _textin-y" data-smart-inject="top"><?= __('Enter the stage from top', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-y _textin-y" data-smart-inject="bottom"><?= __('Enter the stage from bottom', 'LayerSlider') ?></lse-li>
			<lse-li class="_out-y _textout-y" data-smart-inject="top"><?= __('Leave the stage on top', 'LayerSlider') ?></lse-li>
			<lse-li class="_out-y _textout-y" data-smart-inject="bottom"><?= __('Leave the stage on bottom', 'LayerSlider') ?></lse-li>
			<lse-li class="_loop-x"data-smart-inject="left"><?= __('Move out of stage on left', 'LayerSlider') ?></lse-li>
			<lse-li class="_loop-x" data-smart-inject="right"><?= __('Move out of stage on right', 'LayerSlider') ?></lse-li>
			<lse-li class="_loop-y" data-smart-inject="top"><?= __('Move out of stage on top', 'LayerSlider') ?></lse-li>
			<lse-li class="_loop-y" data-smart-inject="bottom"><?= __('Move out of stage on bottom', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-x _textin-x _out-x _textout-x _loop-x" data-smart-inject="100lw"><?= __('100% layer width', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-x _textin-x _out-x _textout-x _loop-x" data-smart-inject="-100lw"><?= __('-100% layer width', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-x _textin-x _out-x _textout-x _loop-x" data-smart-inject="50sw"><?= __('50% slider width', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-x _textin-x _out-x _textout-x _loop-x" data-smart-inject="-50sw"><?= __('-50% slider width', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-y _textin-y _out-y _textout-y _loop-y" data-smart-inject="100lh"><?= __('100% layer height', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-y _textin-y _out-y _textout-y _loop-y" data-smart-inject="-100lh"><?= __('-100% layer height', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-y _textin-y _out-y _textout-y _loop-y" data-smart-inject="50sh"><?= __('50% slider height', 'LayerSlider') ?></lse-li>
			<lse-li class="_in-y _textin-y _out-y _textout-y _loop-y" data-smart-inject="-50sh"><?= __('-50% slider height', 'LayerSlider') ?></lse-li>
			<lse-li class="_hover-x" data-smart-inject="20lw"><?= __('20% layer width', 'LayerSlider') ?></lse-li>
			<lse-li class="_hover-x" data-smart-inject="-20lw"><?= __('-20% layer width', 'LayerSlider') ?></lse-li>
			<lse-li class="_hover-y" data-smart-inject="20lh"><?= __('20% layer height', 'LayerSlider') ?></lse-li>
			<lse-li class="_hover-y" data-smart-inject="-20lh"><?= __('-20% layer height', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[-100..100]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[-90|10|70]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
			<lse-li class="_textin-x _textin-y _textout-x _textout-y" data-smart-inject="50|-50|25|-25"><?= __('Cycle through multiple values', 'LayerSlider') ?></lse-li>
		</lse-ul>

</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="[-5..40]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[-5|9|60]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
			<lse-li class="_text" data-smart-inject="30|60|90"><?= __('Cycle through multiple values', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="="><?= __('Inherit value from style settings', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="+=60"><?= __('Add 60 to style settings value', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="/=2"><?= __('Divide style settings value by 2', 'LayerSlider') ?></lse-li>
		</lse-ul>

</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="1"><?= __('Original size', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="2"><?= __('Enlarge layer to double size', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0.5"><?= __('Shrink layer to half size', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="-1"><?= __('Flip layer', 'LayerSlider') ?></lse-li>
			<lse-li class="_transition" data-smart-inject="[2..3]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li class="_transition" data-smart-inject="[0.5|1.5|2]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
			<lse-li class="_text" data-smart-inject="3|2|1.5"><?= __('Cycle through multiple values', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="="><?= __('Inherit value from style settings', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="*=1.5"><?= __('Multiply style settings value by 1.5', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="/=2"><?= __('Divide style settings value by 2', 'LayerSlider') ?></lse-li>
		</lse-ul>

</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="[-10..10]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[5|10|15]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
			<lse-li class="_text" data-smart-inject="10|20|30"><?= __('Cycle through multiple values', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="="><?= __('Inherit value from style settings', 'LayerSlider') ?></lse-li>
			<lse-li class="_in _out" data-smart-inject="+=30"><?= __('Add 30 to style settings value', 'LayerSlider') ?></lse-li>
		</lse-ul>

</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="300px"><?= __('300px', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50%"><?= __('50%', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[0..500]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[0..500]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[10|50|100]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="100px"><?= __('100px', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50%"><?= __('50%', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[0..200]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[10|50|100]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="auto" data-tt><?= __('auto', 'LayerSlider') ?></lse-li><lse-tt><?= __('The background image is displayed in its original size', 'LayerSlider') ?></lse-tt>
			<lse-li data-smart-inject="cover" data-tt><?= __('cover', 'LayerSlider') ?></lse-li><lse-tt><?= __('Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges', 'LayerSlider') ?></lse-tt>
			<lse-li data-smart-inject="contain" data-tt><?= __('contain', 'LayerSlider') ?></lse-li><lse-tt><?= __('Resize the background image to make sure the image is fully visible', 'LayerSlider') ?></lse-tt>
			<lse-li data-smart-inject="100% 100%" data-tt><?= __('stretch', 'LayerSlider') ?></lse-li><lse-tt><?= __('Stretches the background image to the same size as the layer. May result in distorted image.', 'LayerSlider') ?></lse-tt>
			<lse-li data-smart-inject="initial" data-tt><?= __('initial', 'LayerSlider') ?></lse-li><lse-tt><?= __('Sets this property to its default value.', 'LayerSlider') ?></lse-tt>
			<lse-li data-smart-inject="300px" data-tt><?= __('300px (example)', 'LayerSlider') ?></lse-li><lse-tt><?= __('Sets this property to its default value.', 'LayerSlider') ?></lse-tt>
			<lse-li data-smart-inject="80%" data-tt><?= __('80% (example)', 'LayerSlider') ?></lse-li><lse-tt><?= __('Sets this property to its default value.', 'LayerSlider') ?></lse-tt>
		</lse-ul>

</div>

<?php if( $googleFontsEnabled ) : ?>
		<lse-b class="lse-smart-help-fonts-in-projects lse-dn">
			<lse-smart-options-subtitle><?= __('Used in Project', 'LayerSlider') ?></lse-smart-options-subtitle>
			<lse-ul class="lse-smart-inject"></lse-ul>
		</lse-b>
		<?php endif ?>

<lse-smart-options-subtitle><?= __('Common Fonts', 'LayerSlider') ?></lse-smart-options-subtitle>
		<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="Arial">Arial</lse-li>
			<lse-li data-smart-inject="Helvetica">Helvetica</lse-li>
			<lse-li data-smart-inject="Georgia">Georgia</lse-li>
			<lse-li data-smart-inject="'Comic Sans MS'">Comic Sans MS</lse-li>
			<lse-li data-smart-inject="Impact">Impact</lse-li>
			<lse-li data-smart-inject="Tahoma">Tahoma</lse-li>
			<lse-li data-smart-inject="Verdana">Verdana</lse-li>
		</lse-ul>

<lse-b class="lse-smart-help-external-fonts lse-dn">
			<lse-smart-options-subtitle><?= __('External Fonts', 'LayerSlider') ?></lse-smart-options-subtitle>
			<lse-ib class="lse-mt-10"><?= __('Fonts loaded by third parties might not be present on every page and might only support some font weights and styles.', 'LayerSlider') ?></lse-ib>
			<lse-ul class="lse-smart-inject"></lse-ul>
		</lse-b>

</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="0 0 100% 0"><?= __('From top', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 0 0 100%"><?= __('From right', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100% 0 0 0"><?= __('From bottom', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 100% 0 0"><?= __('From left', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50% 0 50% 0"><?= __('From middle (vertically)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 50% 0 50%"><?= __('From center (horizontally', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50% 0, 100% 50%, 50% 100%, 0 50%"><?= __('Parallelogram', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100% 0, 100% 100%, 0 100%, 0 0"><?= __('Rotate 90deg', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 100%, 0 0, 100% 0, 100% 100%"><?= __('Rotate -90deg', 'LayerSlider') ?></lse-li>
		</lse-ul>

</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="0 0 100% 0"><?= __('To top', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 0 0 100%"><?= __('To right', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100% 0 0 0"><?= __('To bottom', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 100% 0 0"><?= __('To left', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50% 0 50% 0"><?= __('To middle (vertically)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 50% 0 50%"><?= __('To center (horizontally', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="50% 0, 100% 50%, 50% 100%, 0 50%"><?= __('Parallelogram', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100% 0, 100% 100%, 0 100%, 0 0"><?= __('Rotate 90deg', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0 100%, 0 0, 100% 0, 100% 100%"><?= __('Rotate -90deg', 'LayerSlider') ?></lse-li>
		</lse-ul>

</div>

<div data-smart-options="filter">
		<lse-grid class="lse-form-elements lse-smart-help-theme lse-form-rows lse-collect-values">
			<?= lsGetSVGIcon('times-circle',false,['class' => 'lse-form-rows-close']) ?>
			<lse-row>
				<lse-col class="lse-placeholder">
					<lse-ib class="lse-2-1">
						<lse-fe-wrapper class="lse-select">
							<select class="lse-key" data-auto-unit="true">
								<option value=""><?= __('Add new property', 'LayerSlider') ?></option>
								<option value="blur" data-unit="px"><?= __('Blur', 'LayerSlider') ?></option>
								<option value="brightness" data-unit="%"><?= __('Brightness', 'LayerSlider') ?></option>
								<option value="contrast" data-unit="%"><?= __('Contrast', 'LayerSlider') ?></option>
								<option value="drop-shadow"><?= __('Drop Shadow', 'LayerSlider') ?></option>
								<option value="grayscale" data-unit="%"><?= __('Grayscale', 'LayerSlider') ?></option>
								<option value="hue-rotate" data-unit="deg"><?= __('Hue-Rotate', 'LayerSlider') ?></option>
								<option value="invert" data-unit="%"><?= __('Invert', 'LayerSlider') ?></option>
								<option value="opacity" data-unit="%"><?= __('Opacity', 'LayerSlider') ?></option>
								<option value="saturate" data-unit="%"><?= __('Saturate', 'LayerSlider') ?></option>
								<option value="sepia" data-unit="%"><?= __('Sepia', 'LayerSlider') ?></option>
							</select>
						</lse-fe-wrapper>
						<lse-fe-wrapper class="lse-show-only-if-other-has-value">
							<input class="lse-value" type="text" value=""><lse-unit></lse-unit>
						</lse-fe-wrapper>
					</lse-ib>
				</lse-col>
				<lse-col>
					<lse-button><?= __('Apply selected values', 'LayerSlider') ?></lse-button>
				</lse-col>
			</lse-row>
		</lse-grid>
	</div>

<div data-smart-options="mirrortransition">
		<lse-grid class="lse-form-elements lse-smart-help-theme lse-form-rows lse-collect-values">
			<?= lsGetSVGIcon('times-circle',false,['class' => 'lse-form-rows-close']) ?>
			<lse-row>
				<lse-col class="lse-placeholder">
					<lse-ib>
						<lse-fe-wrapper class="lse-select">
							<select class="lse-value">
								<option value=""><?= __('Select properties to mirror', 'LayerSlider') ?></option>
								<option value="x"><?= __('Offset X', 'LayerSlider') ?></option>
								<option value="y"><?= __('Offset Y', 'LayerSlider') ?></option>
								<option value="scalex"><?= __('Scale X', 'LayerSlider') ?></option>
								<option value="scaley"><?= __('Scale Y', 'LayerSlider') ?></option>
								<option value="rotation"><?= __('Rotation', 'LayerSlider') ?></option>
								<option value="rotationx"><?= __('Rotation X', 'LayerSlider') ?></option>
								<option value="rotationy"><?= __('Rotation Y', 'LayerSlider') ?></option>
								<option value="skewx"><?= __('Skew X', 'LayerSlider') ?></option>
								<option value="skewy"><?= __('Skew Y', 'LayerSlider') ?></option>
							</select>
						</lse-fe-wrapper>
					</lse-ib>
				</lse-col>
				<lse-col>
					<lse-button><?= __('Apply selected values', 'LayerSlider') ?></lse-button>
				</lse-col>
			</lse-row>
		</lse-grid>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="650"><?= __('650ms', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[500..1000]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[50|450|850]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="3000"><?= __('3s', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[900..1800]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[1000|2000|3000]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="2500"><?= __('2.5s', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[1000..4000]"><?= __('Random between two values', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="[500|1000|1500]"><?= __('Random from listed values', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject=""><?= __('auto (Calculated automatically based on slide duration and slider height)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="2000px"><?= __('2000px', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="250sh"><?= __('250sh (250% of slider height)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="150vh"><?= __('150vh (150% of viewport height)', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="200px"><?= __('200px', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="60sh"><?= __('60sh (60% of slider height)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="90vh"><?= __('90vh (90% of viewport height)', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject=""><?= __('Normal sequence', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="random"><?= __('Random', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject=""><?= __('Default', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="0"><?= __('Activate immediately once the slider leaves the viewport', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="100vh"><?= __('Activate once the slider moves by a screen distance away from the viewport', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="50%"><?= __('50% (Animate to the center of a Sticky or Scroll Scene)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="1200ms"><?= __('1200ms (Animate to 1200ms on the timline of a Scroll Scene)', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

<lse-ul class="lse-smart-inject">
			<lse-li data-smart-inject="50%"><?= __('50% (Animate to the halfway point of the slide duration)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="675ms"><?= __('675ms (Animates exactly to 675ms)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="+200ms"><?= __('+200ms (Plays forward by 200ms)', 'LayerSlider') ?></lse-li>
			<lse-li data-smart-inject="-30%"><?= __('-30% (Plays backward by 30%)', 'LayerSlider') ?></lse-li>
		</lse-ul>
	</div>

</lse-smart-options-contents>

Back