# Create an Interactive Bee Character for the Web - Animation & Interactions in Spline - Spline Academy (https://spline.design/academy/tutorials/create-an-interactive-bee-character-for-the-web)

> Welcome back! 🙌 In this video tutorial, we'll show you how to create an interactive experience using an adorable bee character. Check Spline:…

1. [Academy](https://spline.design/academy)
2. [Courses](https://spline.design/academy/collections)
3. [Animation & Interactions in Spline](https://spline.design/academy/collections/animation-interactions-in-spline)
4. Create an Interactive Bee Character for the Web

# Create an Interactive Bee Character for the Web

Lesson 8 of 14Spline 3DIntermediate14 min

Welcome back! 🙌 In this video tutorial, we'll show you how to create an interactive experience using an adorable bee character. Check Spline: <https://spline.design/>

You'll learn how to create a looping animation for the bee's wings and eyes and implement an interactive transition effect that makes elements move or appear on the screen when buttons are clicked using the Mouse Down Event.

Download this 3D Bee and follow along with the tutorial.

🐝 Remix: <https://app.spline.design/file/68152128-3ac0-4fdd-a941-1cdcbe075c43>

Learn more about interactive events by checking out the Spline Docs! 📘 <https://docs.spline.design/>

Happy learning!

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=0s)
2. [0:38Creating Looping Wing Animation](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=38s)
3. [2:44Adding Blinking Eyes](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=164s)
4. [4:13Creating Transition Effects with Buttons (Mouse Down Event)](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=253s)
5. [11:53Setting Up Camera and Exporting for Website](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=713s)

## Related resources

- [Bee - UI interactionTemplate](https://app.spline.design/academy/tutorials/create-an-interactive-bee-character-for-the-web?redirect-duplicate-template-uuid=21a2a3bb-b549-405f-88b0-b0269a8f2390&is-2d-file=false)
- [How state-based animation worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Transition ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Overview

- Spline 3D
- 14 min
- Intermediate

## Up next

[How to Build Drag & Drop Interactions in 3D10 minBeginner](https://spline.design/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)[Continue](https://spline.design/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)

[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.