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

> A video tutorial from the Spline Academy.

- Product: Spline 3D
- Level: intermediate
- Duration: 13 min 54 s
- Published: 2024-05-16
- Video: https://www.youtube.com/watch?v=hRy-Iqle6EU
- Part of: [Animation & Interactions in Spline](https://academy.spline.design/collections/animation-interactions-in-spline.md)

## About this tutorial

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!

## Chapters

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

## Related documentation

- [How state-based animation works](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll Event](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Transition Action](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)