Screen Resize Adaptive Layout

In today's world, where people use different devices to access content, having a flexible layout is crucial. It ensures that your Spline designs look and work well on desktops and mobile devices, providing a better user experience. This guide will teach you how to make your Spline designs work seamlessly on screens of all sizes, focusing on adaptive layouts for the 3D pricing cards we previously worked on.

Open Project

Open your 3D pricing card project to explore the Event settings, and then we will continue working on this document, starting by positioning the three cards and grouping them. This part is optional, and you don't have to do it. It's only for replicating the position I created in my other document. However, I recommend doing it to follow the same steps. If you're new to Spline, positioning your elements may need to be familiar.

• Card 1 (the initial card in the middle): X0, Y-21, Z758
• Card 2 (from the left): X-415, Y-21, Z802.
• Card 3 (from the right): X415, Y-21, Z825.
• Group the three cards, and name by Cards.

Adding Animation and Interactions

When you want to make animations and add interactions to your scene, you need to use States, Events, and Actions. We'll go through all the settings, starting with States. I want the first card to be above the original card, and the last card to be below the original card.

• Choose the first card on the left, which is card 2, and add a state. Then, move it to the top of the original card. When you click on the base state, it will return to its initial position.
• We'll do the same thing with the last card. Select card 3 and position it below the original card.

Adding the Screen Resize Event

We will delve into the settings of the screen resize event, which include type, breakpoints, actions, and transitions. After we've acquired an understanding of this feature, we'll proceed to configure it. To add the screen resize event, follow these steps:

• Select the group.
• Click the '+' button next to Events.
• A panel will appear with a flag marked 'start.'
• Click on the flag, and you will find several options.
• Choose 'Screen Resize.'

Type

You have the option to specify whether the event's breakpoints will be horizontal or vertical. This choice is significant because it dictates how your actions will activate depending on the canvas size. We will select the "Horizontal" option.

• Horizontal: The event will activate actions based on the canvas's width.
• Vertical: The event will activate actions based on the canvas's height.

Breakpoints

Pixel values and operators define breakpoints. To streamline the process, three presets are available: Mobile, Tablet, and Desktop. These presets come with default breakpoint values corresponding to common screen sizes for each device type. Nevertheless, you can also specify custom values when necessary. You can use three operators to define breakpoints:

• Less Than (<): Actions trigger when the canvas size is less than the defined pixel value.
• More Than (>): Actions trigger when the canvas size exceeds the defined pixel value.
• Between (<>): Actions trigger when the canvas size falls within the specified range.

Add Breakpoints

You have the option to select a preset (Mobile, Tablet, or Desktop) or define custom breakpoint values that suit your requirements. In this guide, we will customize the breakpoints as follows:

• Customize the first breakpoint:
• Set the operator to "less than."
• Values: 1024
• Customize the second breakpoint:
• Set the operator to "more than."
• Values: 1024
• Keep the third breakpoint settings as they are:
• Preset: Custom
• Operator: Between
• Values: 769 between 1200

Adding and Deleting Breakpoints

To add a new breakpoint, use the " Add New Breakpoint " button at the bottom of the configuration interface. To delete a breakpoint, look for the delete icon that appears when hovering over the breakpoint.

Actions

A Screen Resize Event can trigger various actions to adapt your canvas content to the new screen size. These actions include:

• Transition Action: Change the content or state of your canvas smoothly.
• Animation Action: Animate elements to provide a dynamic user experience.
• Sound Action: Add audio effects or background music.
• Video Action: Incorporate videos into your canvas.
• Create Object Action: Generate new objects or elements.
• Destroy Object: Remove specific objects from your canvas.
• Switch Camera: Change the viewpoint or focus of the canvas.
• Scene Transition Action: Transition between different scenes or sections.
• Reset Scene Action: Return the canvas to its default state.
• Then, we have the new feature of Spline, Variable, which allows you to create reusable values/parameters. We will learn this feature in another section of our spline course.

Transition Action

Transitions help objects change between different states and are essential for adding interactivity and animation to your scenes. Think of transitions as actions that make things happen in your project.

• To create a transition action, you need to select the object you want to move from one state to another, as we've already done from the start. In the event settings, add a Transition Action.

Customizing a Transition Action

Once you have your states and events set up, you can customize your transitions in the 'Edit Event' panel. Here's what you can tweak:

Target: This is where the transition will happen, the object you want to change. Choose Card 2.

Transitions: In this section, you decide which states the transition will go through. You can set the duration and other properties for each part of the transition. Select Current to State.

Sequence: These settings impact the entire sequence of transitions. You can set a delay (how long it waits before starting), loop settings (how many times it repeats), and cycle (whether it goes back to the start). Let the setting like this.

Transition Properties

When you click on the line connecting states, you can change properties for each part of the transition:

• Transition Curve: How the transition looks (like Linear, Ease, Ease In, Ease Out, Ease In Out, Bezier, Spring). We’re going to choose Ease In Out.
• Duration: How long it takes to change from one state to another. Set to 1.
• Delay: How long it waits before starting.
• Cycle: Whether it goes back to the beginning.
• Loop Settings: How many times it repeats.

Adding Transitions

Now that you are familiar with the settings and properties of screen size events, breakpoints, actions, and transitions, we will focus on adding additional transitions. There are a few more transitions that we need to include.

• The first breakpoint, the transitions we're going to add, the target will be: Card 2, Card 3, Glass Card 1, 2, and 3. The transition will be from current to State.
• For the second breakpoint, it's the same target, except that the transition will be based on the base state.

Conclusion

A Screen Resize Event is a valuable feature for canvas-based applications, enabling you to create responsive designs that adapt to various screen sizes. By understanding the types, breakpoints, presets, and actions, you can effectively use this event to enhance the user experience on desktops, tablets, and mobile devices. Experiment with different actions and breakpoints to optimize your canvas-based application for a wide range of users and devices.