122-layer-animation-svg-path.slider - Jssor Slider Composer Tutorial

1. Open /jssorservice/100-animation/122-layer-animation-svg-path-before.slider/=edit

2. Select the first Motion Point, set Path motion property.

Click the edit Button to open svg editor.

Edit path.

A. Use tools in the svg editor to edit path.

B. Copy/Paste svg code into the svg editor, for example

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="353px" height="94px" viewBox="0 0 353 94">
<path d="M51.911,16.242C51.152,7.888 45.239,1.827 37.839,1.827C32.909,1.827 28.395,4.48 25.855,8.732C23.338,4.425 19.009,1.826 14.158,1.826C6.759,1.826 0.845,7.887 0.087,16.241C0.027,16.61-0.219,18.552 0.529,21.719C1.607,26.287 4.097,30.442 7.728,33.732L25.843,50.171L44.269,33.733C47.9,30.442 50.39,26.288 51.468,21.719C52.216,18.553 51.97,16.611 51.911,16.242Z" fill="none" stroke="#ff9750">
</path>
</svg>

C. Copy path from Adobe Illustrator, paste it into the svg editor.

3. Select the second Motion Point, set Path motion property.

Click the edit Button to open svg editor and edit path.

4. Drag Timeline Pointer along the timeline to preview animation.

5. See result /jssorservice/100-animation/122-layer-animation-svg-path.slider/=edit.

Create Slider Set Slider Layout Layer Animation (Move) Insert Motion Point Move Motion Point Move Layer Resize Layer Manage Layers Layer Animation (3d) Layer Animation (Split Text) Layer Animation (Repeat) SVG (Mask) Panel Layer Effect (Gooey) Panel Layer Effect (Neon) Panel Layer Effect (Distort) Layer Animation (Fade) Layer Animation (Scale/Zoom) Layer Animation (Rotate) Layer Animation (Blur) Layer Animation (Color) Layer Animation (Clip) Layer Animation (Letter Spacing) Layer Animation SVG - Path/Text (Dash) Layer Animation SVG - Path (Path) Layer Animation SVG - Textpath (Letter Start) Options (Slideshow)