How to Make the Word "Bounce" Bounce in Spline

In this project, you will be making the word "Bounce" start bouncing in an app called Spline. You can see the finished project here. I made this project to introduce myself to Spline, and then decided to share it with other people. This project will likely take a max of 30 minutes.

For this project you need a computer (Windows, Mac, or Chromebook) with the following:

1. A Web Browser (Chrome, Edge, or Safari)
2. A free Spline Account
3. An internet connection

Go to https://app.spline.design/signin. Log in/ Sign up with Google or your email. It will open you up to the homescreen.

Select the 3D Design button. It should come up with a screen that looks like this (see pic. 2).

1. Click on the square.
2. Press the "backspace" key on your keyboard. The square should disappear.
3. Click on the grey circle at the bottom.
4. Next, double-click on the word "Untitled".
5. Change it to something like "Bouncing Bounce".
6. Note: In order to zoom in and out, hover over the Workspace and scroll.

1. Select the letter T and the top of the page.
2. Click here (see pic. 3). A text box will appear.
3. Select the Text Content textbox.
4. Type in the letter B.
5. Next, click on the font size.
6. Change it to 80.
7. Select the Z Rotation.
8. Change it to 0.
9. Scroll down on the panel on the right.
10. Select the Color button.
11. Move the upper slider to the left and move the dot to the top right corner.

1. Scroll back up on the panel on the right side.
2. Select the "+" next to the word States (ensure you are still selected on the text box).
3. Select the Base State button.
4. Change the Y-position to 1000 (see pic. 5).
5. Select the State button.
6. Change the Y-position to 250 (see pic. 8).
7. You can now see that when you press the Base State button, the text disappears out of view and when you press the State button, the text reappears.

1. Make sure you are on State.
2. Press the "+" next to the Events button.
3. Select the tab Transition.
4. Click on it again. A dropdown should appear.
5. Select the dropdown that says "Current".
6. Click on the button that says "Base State".
7. Next, click the button that says "Ease In Out".
8. Select the other "Ease In Out" (see pic. 9).
9. Next, select Spring. The letter B is now able to bounce.
10. When you select the Play button at the top bar, it will make the B fall and bounce off of the bottom point (Y250). The letters will go past Y250 to imitate the spring, where they get shorter as they are compressed.

1. Make sure you are selected on the B.
2. On your keyboard, press ctrl+d. It will duplicate the B.
3. Using the arrow pointing right, drag it one block right.
4. Change the text to O. Click on Base State.
5. Change the X position to -150.
6. Click on Start, then Transition, then Delay.
7. Change it to 0.2.
8. Try starting the Simulation. The first letter should drop, then the second.

1. In order to add the rest of the letters, you must repeat Step 7.
2. The difference is, you keep adding to the numbers.
3. For example, the X coordinate of the B was -250. The O was moved to -150. That is adding 100.
4. That would mean, the U is -50, the N is 50, and so on and so forth.
5. The same concept applies to the delay.

The reason this works is partially physics and partially unreality. The realistic part is the letters bouncing. The unrealistic parts are the letters' delay, the fact that they go down farther than the end point, and how exaggerated the bouncing is. Instructables like this are much more realistic because they have a definite bottom point. However, springs, like the bouncing uses, are a different story. They will squash down and then spring back up into the original position, allowing the letters to go as low as they do.

There are a few other things to try in Spline to enhance the look of this animation.

1. You can change the lighting.
2. Ensure you are not selected on any of the letters
3. Select the Light option on the right sidebar
4. You can change the intensity of the color
5. You can also try changing the Base position.
6. Go on an individual letter
7. Click on Base State
8. Using the arrows around the letter, change the position of the letter
9. Now, in the simulation, the letter will come from a different spot
10. You can also try this with State
11. You can also change the color of the letters
12. Click on the individual letters
13. Change the color the same way you changed it in Step 4.
14. You can also change the text.
15. Follow Step 4 to create the text box, then apply the spacing logic from Step 8. You can count a space between words as a 0.2-second delay if you want

Overall, this project is a good intro to transitions in Spline. Check out my other "Bouncing" projects, Tinkercad Bouncing Ball Simulation, and Tinkercad Bouncing Ball Simulation w/ Track. I encourage you to make this project yourself. Thank you for reading.