Scroll Interaction and Scenes

Open the Project

We're going to complete two exercises on scroll interaction and scenes. You'll need the two files we'll work on to follow this section. One is titled " Scroll Interaction and Scenes Exercise, " and the other is " Scroll Interaction and Scenes Demo 2 Exercise, " which can be found in our Spline Courses library. Alternatively, you can import a project you've created in Figma or another design tool.

Add Elements to Your Scene

To create interactions, you need elements to animate. You can add images, text, or any other elements to your scene and arrange them how you want them to appear initially. As you may see, the design is ready when you open the file, and you don't need to adjust it. We will focus on learning animation, camera placement, and using states and events.

Add Camera

First, click on "Reset," where is the Spline's camera controls on the bottom center of the Viewport. Then, add a new camera. Go to the Viewport next to the personal camera, and click "Add new camera." We'll work in both viewport modes, personal camera and camera. Also, you can add a new camera from the toolbar by clicking on the plus button.

Add States

We will add a State before moving the Camera to the second screen. Rename it by "screen 2". Then, we will move the Camera down to the second screen. You'll see that the view changes in the preview. To use it, you need to use the personal Camera. If you want to see a single screen, change the viewport to Camera.

Add Third State

We have our starting state and our second state. To add one more screen, create a new state called "Screen 3." To position it, switch back to the personal camera mode, move it to the right until it looks right, and use the preview as a guide. Click on the camera again to center the screen. If you still see a gap, adjust the X position directly. Avoid making adjustments from the scene, as it can affect elements within the frame. Now, we have our three states set up. Make sure the rotation value for all three states is 0.

Scroll Event

The Scroll Event feature lets you add interactive effects as users scroll through your webpage. It's excellent for making engaging web experiences that catch people's attention. You can use it to create transitions and animations, with the main action being a "Transition."

• To set it up, select the element you want to animate in the Layers panel. Click "Add," then choose "Scroll Event" from the menu. This will open a new section in the Properties panel specifically for configuring the Scroll Event for your selected element.

Steps

The primary property associated with the Scroll Event is 'Steps.' Steps represent the amount of scrolling required to move from the start of a transition to the end. By adjusting the number of steps, you can control the speed and fluidity of your scroll-triggered animations. Using fewer steps will make your animations faster, while using more steps will slow them down. We won't be utilizing the scroll type because the scroll mode only functions when exporting for the spline viewer. Thus, our focus will be on the step property.

Configuring the Scroll Event

In the Scroll Event section, you can configure the number of "Steps" you desire for your animation. This setting directly influences the speed at which your animation unfolds as the user scrolls. From the dropdown menu, select the "Transition" action. This action will trigger when the user scrolls through the specified number of steps.

Configuration Details:

• Type: Steps
• Target: Camera

• Transitions:

  1. Base state
  2. Screen 2
  3. Screen 3
• Transition Curve: Linear

Multi-Scenes

You can create multiple scenes within a single Spline file. Each scene represents a distinct 3D space containing its own set of objects. Transitions between scenes are facilitated through the Events system using the 'Scene Transition' action.

• In the Spline editor, you'll find a list of scenes on the left-hand side. Click on it to view 'Scene 1' and 'Scene 2'. You can add a new scene by clicking the '+' button.

Mouse Down Events

Select the credit card from the scene 1. Add the Mouse down Events. The Mouse Down Event will trigger the actions when the mouse button is pressed. "In the mode option, you can choose 'once,' which means the actions occur only once when triggered. Alternatively, you can choose 'toggle,' where actions reverse when triggered again, creating a toggle effect. For the trigger, select this object, which is the credit card.

Scene Transition Action

Choose the scene transition action. A scene transition action enables you to create transitions between multiple scenes in your file. Edit the action, set the trigger to "screen 2" and select "no transition.”

Second Exercise

In the second exercise, we have two screens in different positions. The first screen is in front, and the other is to the side. When we transition, it will rotate slightly. To pivot towards the second element, select the left-axis points.

Camera Transition

• Reset your project by clicking the "Reset" button and adding a camera.
• Add states to your project, following the same steps as in the first exercise.
• Move the camera to the second screen to achieve the desired view.
• Incorporate the Scroll event into your project.
• Focus on configuring the step type for the Scroll event.
• Add a transition action, specifying the camera as the target and transitioning from the base state to screen 2.

Conclusion

Now that you've learned how to use scroll and mouse events, scene transitions, and transition actions in Spline, it's time to get creative. Experiment with these tools to make your website more engaging. Your new skills will help you capture your audience's attention and create exciting web interactions. So, don't be afraid to try new things and make your website stand out.