Path Animation

New File

Open Spline in your browser or on your desktop app, and click on New File . Delete the default rectangle and choose any color for your background scene. The color used is #C5D0FE.

Adding Path

There are multiple ways to add a path to your scene. You can use shapes like Rectangle, Ellipse. Using Vector will let you create a custom shape. Once the shape is drawn, click on Convert to Path and the fill will turn into outlines.

You can also convert a text into a path. Type your text, click on Convert to Shape, then Convert to Path.

Purple Dots

In Edition, each edit points are represented by a purple dot which are sharp edges that can be move on the X and Y axis. You can round the corners of all purple dots simultaneously or the ones only selected. To round the corner, the purple dot must be connected to a purple dot from its left and right.

Blue Dots

Use the pen tool to add new edit point to reshape your path. Move the mouse cursor near the path, add a new point when the + sign appears. You can Edit the handles an drag the new blue point to update your path shape.

Select the bend tool to turn any purple dot into a Bézier curve. Drag the handle represented by the purple dot, this will move both handles together. Click on the purple dot and hold the option key on the Mac and it will move individually for more flexibility. With the bend tool still selected, click on the blue points and it will remove the handles, turning the Bézier curve back into sharp corners. Increase the subdivisions value for a smoother sculpting result.

Path Tool

For more flexibility, use the path tool to add editing points and Bézier curves. We will re-create this complex and custom path inspired by Apple 2021 event.

Click on the plus sign and select path. Add multiple points and play with the handles to reproduce the same path. Don't worry if it's not perfect right away, we can still edit it after the path is created. For the extremities of the path, you can leave it as flat to have straight edges, or rounded. Go to caps and select round to have a beautiful and natural finish.

Finalize the first path by adding a subdivision value of 30, to smoothen everything. Repeat the same process for a second path. Play with the rotation angle to add a unique look.

Applying Gradients

Elevate your design by incorporating a 4-color gradient into your path. Modify the color stops by clicking on them, and introduce new ones by clicking on the color bar. Ensure the angle is set to 90 degrees. For rounded caps, ensure the start and end colors are consistent. Experiment with color stops and consider adding a fifth color for further customization.

To preserve your gradient, save it as a material. Access the 4-dots icon next to Material, click the plus sign, and label it "Gradient path." Apply this material to your second path.

For an overlapping effect on the path, introduce new points and adjust their positions until you're content with the visual outcome.

Importing SVG files into Spline

Importing SVG files into Spline is a convenient option, especially for beginners. To do this, click on the Import button at the bottom left of the Spline interface. Select Vector SVG and choose the appropriate file. You can also drag and drop your file directly into Spline.

After importing, it's likely that the vector will only show the fill instead of the outline because the lines intersect. Don't worry, this is normal and fixable.

Adjusting Vector Points

To fix the intersecting lines issue, select the first layer and click on Convert to Path. Add a subdivision value of 30 to smoothen the edges. Repeat this process for all layers as needed.

Despite this, you might notice that the intersection points are still not smooth. To resolve this, adjust the path handles slightly until you achieve the desired smoothness. Be careful not to distort the original path too much.

Adding Gradients and Round Caps

Once you've smoothed your path, you can enhance its appearance by adding a gradient and round caps. However, you might notice some color blending at the intersections. You can fix this by slightly moving the intersection points to give the effect that they are on top of each other.

Creating Animations with States

With your paths finalized, it's time to add some states to create an animation. To do this, select Path, and under States, click on the plus sign to add a new state. Make sure to edit each state properly for a smooth transition.

Setting Up Events

• Go to the Event panel, then click on the plus icon to add an event.
• Choose Start for the event type.

Defining Actions

• For the action, click on the plus icon to add a new action.
• Choose Transition.
• In the Target dropdown, choose Path.
• Set Transitions 1 to Base State and Transitions 2 to State.
• Set the animation to Linear, with a duration of 5 seconds.
• Use play mode to preview

Fine-tuning your Animation

Now, let's add the same logic to another path. If you want to mask an element entirely at the beginning of the animation, add a third state with reduced opacity. Then, add transitions between each state with appropriate durations and delays to ensure smooth animation flow.

Setting Up Events

• Go to the Event panel, then click on the plus icon to add an event.
• Choose Start for the event type.

Defining Actions

• For the action, click on the plus icon to add a new action.
• Choose Transition.
• In the Target dropdown, choose Path 2.
• Set Transitions 1 to Base State,Transitions 2 to State and Transitions 3 to State 2.
• Set the animation to Ease In out, with a duration of 0 seconds and 5 seconds.
• Set the delay to 0.50
• Use play mode to preview

Demo

Both animations should work now. For interactive demos, check out

• https://my.spline.design/ik9ZknLa2kjBjzowpy2-RAjo/

Conclusion

Congratulations! You've mastered the use of Spline's path tool and learned how to create and animate 3D paths. These tools can be incredibly powerful in adding a touch of creativity and interactivity to your designs. Continue to experiment with different shapes, gradients, and animations to make your designs truly unique!