# How to Animate Along a Path with Hana and Spline - Spline Academy (https://spline.design/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)

> In this tutorial, we’ll show you how to use one of our recent updates in Hana, and how you can easily animate shapes or designs along a custom trajectory.

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. How to Animate Along a Path with Hana and Spline

# How to Animate Along a Path with Hana and Spline

HanaBeginner7 min

In this tutorial, we’ll show you how to use one of our recent updates in Hana, and how you can easily animate shapes or designs along a custom trajectory.

We’ll guide you through different ways to design a path in Hana, how to align shapes to that path, create animations, adjust position offsets, and choose between world and tangential orientation.

Demos 👉 <https://app.spline.design/ui/6a36d303-a217-4466-95f5-85a1561c5725>

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=0s)
2. [0:16How to create a path using the Vector Tool](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=16s)
3. [1:00How to Align to Path](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=60s)
4. [2:07Creating Animations](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=127s)
5. [3:23How to create a path using a Shape](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=203s)
6. [4:03Adjusting Position Offsets](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=243s)
7. [4:53World vs. Tangential Orientation](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=293s)
8. [6:13Align to Path in 3D](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=373s)

## Related resources

- [Shapes Follow PathTemplate](https://app.spline.design/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline?redirect-duplicate-template-uuid=86ecf61d-28ed-4c69-9f76-029bd8130eed&is-2d-file=true)
- [Algin to Path ModiferDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%8E%A2-modifiers)

## Overview

- Hana
- 7 min
- Beginner

## Part of

- [Hana | Everything You Need To Know](https://spline.design/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[Create a 2D Follow InteractionHanaBeginner8 min](https://spline.design/academy/tutorials/create-a-2d-follow-interaction)[Get Started with Interactive 2D in HanaHanaBeginner17 min](https://spline.design/academy/tutorials/get-started-with-interactive-2d-in-hana)[Create Interactive Designs That React to Your Mouse with HanaHanaBeginner6 min](https://spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.