hi everyone Welcome to our exciting free
course on 3D UI
interactions for far too long 3D design
has been a realm hard to reach for most
designers traditional 3D tools such as
blender or Cinema 4D while powerful have
been daunting costly and demanded a deep
well of expertise to integrate
effectively into
websites imagine having a 3D tool that's
as intuitive as figma but for the 3D
World
so what better time to start learning 3D
and elevate your
skills get ready to be inspired this
course is absolutely free all thanks to
the Fantastic sponsorship from
spline now let me tell you about spline
it's not just a 3D tool it's a
Powerhouse often referred to as the
figma of the 3D World Imagine everything
you'd wish for in a modern design tool a
Sleek interface real-time collaboration
an extensive library of sample files and
the best part it runs right in your
browser making it seamlessly compatible
with Mac windows and tablets but that's
not all spline also offers interactions
and easy code export so get ready to
dive into a world of Limitless
creativity all made possible by spline
support So elevate your design skills
with our exciting course dedicated to 3D
UI
interactions so let's have an overview
of what this sponsored course will
teach we'll start by creating this
simple Wi-Fi
icon understand the power of basic
shapes and how they can be used to
create complex objects within a 3D
space we will use circles and add depth
to make it
3D finally adding realism with the use
of materials and
Shadows the techniques learned today can
be applied to all sorts of projects from
app design to data
visualization we will also learn how to
bring any design to life with these
these eye-catching 3D icons remember to
experiment with different designs shapes
and
materials we will enhance our designs to
be more captivating and interactive by
incorporating a variety of animations
including wave and tab bar
animation path
animation capture your audience's
attention with a unique visual
experience create 3D cards with The
Parallax effect
we'll also explore the screen resize
event a tool that helps you create
layouts that adapt to different screen
sizes create engaging web interactions
with the use of scroll and mouse events
scene Transitions and transition actions
be creative and make your website truly
stand
out next we'll present two pivotal
features in spline variables which form
the core of interactive experiences
these are values that can be altered
serving as the the building blocks for
engaging projects with variables you can
control and modify various elements
within your project they can be linked
to actions allowing you to trigger
specific events when certain conditions
are
met the power of AI is coming to the
third dimension as spline goes beyond
the ordinary tool its cuttingedge AI
feature is set to transform your
workflow offering a Fresh Approach to
visualize your 3D designs transform your
3D objects and watch your idea transform
with a wide range of styles from cartoon
tun painting to
realistic fine-tune every detail with
modifiers and text prompts ensuring your
image is perfect down to the smallest
element AI style transfer allows you to
create images utilizing your 3D scenes
as a foundation this feature offers a
convenient way to promptly visualize
your ideas or add intricate details to
your 3D compositions to utilize this
feature simply click on the first icon
located on the left side of the toolbar
Please be aware that a paid sub
description is required to unlock this
functionality first choose a style from
the available pre-made presets to create
a fresh foundation for your image
creation influence the outcome of your
final result by adding new modifiers
which are keywords to your existing
style generate new and multiple surfaces
for your 3D objects with AI textures by
simply providing a prompt you can
generate a new texture into an existing
element thanks to this Innovative AI
feature your creative possibilities are
boundless learning 3D has never been
this accessible with the magic of spline
Dive Right In and make a splash in the
world of 3D design head over to spine's
YouTube channel where you'll find
multiple tutorials covering everything
from interactions lighting materials and
shading to creating 3D worlds icons and
even crafting characters that come to
life if you wish to learn more check out
spin's documentation to explore its core
features to get you started on
understanding 3D design interactions
like States events and actions you will
also find details on material and
cameras thanks to spline we offer two
other courses that are totally free
follow our introductory course on how to
design and code a landing page with an
interactive 3D asset using spline and
code sandbox this course will teach you
to turn 2D UI and figma into immersive
3D Wonders by adding Mouse hover
interactions using States
create eye-catching 3D blobs and
animations with ease and learn to export
your interactive assets seamlessly to
code
sandbox head over to our second spline
course where we will teach you to build
an interactive 3D scene implemented on a
reactjs site animate objects by using
state-based animations and the physics
feature which allows objects to be
affected by gravity this course will
explore game controls to move an object
in your scene and customize your camera
to make your scene look stunning
[Music]
even with limited design experience
spline offers an opportunity to explore
creativity within their Library neatly
categorized into 3D scenes and 3D
objects you'll find a plethora of
options all these 3D models are
completely free take a dive into each
file understanding its construction and
feel free to customize them according to
your preferences you can add scenes and
objects directly from the editor just
click on library located at the bottom
left of your sidebar you can search for
a specific item then double click on it
to add it to your scene you can then
resize and position it as you
like you will also find a collection of
pre-made materials after inserting a new
object click on the four dots next to
materials and select spline Library you
can then customize it by changing its
colors and
materials with an extensive library of
3D items at your disposal head over to
splin Community this platform serves as
the ideal space for connecting with
fellow designers offering a ton of
inspiration for your upcoming projects
explore the community to draw innovative
ideas for your creative
Ventures upon discovering a design that
captures your interest you can simply
open and view it moreover with the click
of the remix button you gain the ability
to edit the design this action allows
you to create a duplicate of the file
and modify it according to your personal
preferences
here are some projects we took
inspiration from the community to design
our 3D models this Cube inspired us to
create a design for our section where we
teach
variables then we have this amazing
portal effect that we recreated for one
of our
cards when in need make sure to explore
the community for creative ideas you can
also share and like to show your
appreciation and don't forget to give
credit where credit is
due engage with fellow creatives by
proudly sharing your work click on the
publish button located at the top right
corner to present your Creations to the
world and receive constructive feedback
make a significant impact in your
industry by building your
portfolio select one of your scenes
input the relevant details and click
publish the community is waiting for you
to get started head over to spine.
design and create your account you can
start creating right away through your
browser but a desktop is also
available you'll have two download
options for mac and it is also available
for Windows
users once spline is opened you'll be
presented with the home
interface on the left navigation bar
you'll find your files you can access
spine's Free Library of
assets you'll also find a list of useful
tutorials to get you started this does
not include all of the tutorials head
over to spin's YouTube channel for their
complete
Library access the community to connect
with fellow designers to get inspiration
and to Showcase your
work if you are working with a team
access the projects from the same
interface now to start a new design
click on the new file button located at
the top right
corner so this is the interface you'll
be working with when creating a new
design located at the top we have the
toolbar that gives quick access to
frequently used objects like the
rectangle ellipse Cube and sphere to
access the AI feature click on the Stars
icon you'll also find the vector text
and selection
tool this will apply transformation to
your object you can move scale and
rotate click on the plus icon to display
the full list of available
objects to work more efficiently spline
provides a list of keyboard shortcuts
for mac and windows
users most importantly we have the play
button which will bring your scene to
life here you can preview your
interactions and animations as they come
alive right before your eyes the left
sidebar displays the layers or objects
within your scene switching to the
assets tab grants access to the asset
browser and team Library
manager the right sidebar displays the
property panels where each panel allows
you to modify properties for either the
entire scene or selected objects so
let's dive in into creative mode as we
will explore 3 D shapes and materials
for our first
lesson in this tutorial we're going to
build a 3D icon using spline this is a
great exercise for learning how to use
basic shapes to create complex objects
in 3D Space by the end you'll have a
beautiful icon you can use in your own
projects the spline Library also
contains icons that you can utilize in
your project and they are available for
commercial
[Music]
use let's get started the first step is
to create a new spline this will serve
as the basis for our icon we'll Begin by
creating a a series of circles that will
make up the main body of our icon Circle
one start by creating a new Circle set
the size to X200
y200 adjust the ring value to 85 to
control the
thickness set the angle to 90° to create
a quarter circle shape extrude the
circle by 30 units to add
depth you can utilize these techniques
to create 3D bar charts representing
financial data this approach is a
valuable asset in UI design especially
for crafting data
visualizations duplicate the first
Circle to create the second
one adjust its size to x 140 y 1440 and
set the ring to
78 keep the angle at 90 and the
Extrusion at 30 this circle will be
slightly smaller than the first
one duplicate Circle two to create the
third circle
make it even smaller by setting its size
to x80
y80 and adjust the ring to
62 the angle and Extrusion remain the
same at 90 and 30
respectively lastly duplicate Circle
3 and adjust its size to X20 y20 setting
the ring to zero and the angle to 360
the Extrusion Remains the Same once
you've created all four circles select
and group
them then rotate them on the Z axis by-
45° next we'll be making a
rectangle set its Dimensions to X200 and
y200 fine-tune the rectangle Aesthetics
by setting the corner to 46 giving it a
slightly rounded Edge
Edge to add depth to the design set the
Extrusion to
30 let's switch to isometric mode and
then select the
group I will then position it in the
z-axis at 44
units further enhance the 3d effect by
adjusting the bevel to 10 and bevel
sides to
10 let's select all the circles and
change the Extrusion to one to give them
a softer
Edge after the rectangle is formed
select all layers you've worked on and
group them together for easier
manipulation the layer is now named
Wi-Fi and its position is set to x0 y0
and
z0 let's select the group then change
the Y position to zero while the Z
position Remains the Same now that our
shapes are in place it's time to apply
material to them this will Define their
color lighting and reflectivity
characteris istics first navigate to the
material property set the circle's
material color to df7 F5 to give it a
soft and appealing Hue for a more
Dynamic appearance switch the lighting
mode to
Overlay now let's create a new material
click on the plus sign to generate a new
material change the color setting to
fresnell fine-tune the fresnel settings
as follows color 8 e
ccfb these adjustments will affect how
the light interact s with the circle's
edges influencing both color and
intensity once you're satisfied with
these material settings let's proceed
with copying the material click your
mouse and select copy material now we
will apply these same settings to the
other three circles select the other
three circles click your mouse and
select paste
material next let's move on to the
rectangle change the color setting to
depth for the depth setting we're going
going to apply a radial gradient color
of hash 68
ef1 by manipulating these anchors near
and
far you can control the depth of the
gradient additionally use the arrow tool
to adjust the origin Y X or Z
value allowing for further customization
of the gradient
perspective now change the far gradient
to 6090 f
5 make sure the gradient is set to local
and the origin is at
y500 the near value should be
700 and the far value should be
380 this will create a gentle gradient
effect that adds depth and dimension to
the
rectangle for the lighting set the type
to Lambert and color to Black at
80
and select
overlay this will give a soft Shadow
effect to the rectangle contributing to
its 3D appearance just like we did with
the circles we're going to add a fresnel
effect to the
rectangle use the color 5 bdcf 9 set the
bias to minus 0.09 scale to 1 intensity
to two and factor to one this will add a
shiny reflective effect around the edges
of the
rectangle let's create a material asset
for our project here's how click on the
four dots then click the plus icon to
add an
asset give your asset a
name to apply it select the circles go
back to the material property click the
four dots again and choose the asset you
just created if you want to detach it
simply click on this
icon think of it like this you have a
bunch of icons for your app and you want
them all to look the same creating a
material asset helps helps you do that
in a snap your icons will have a
consistent
style Shadows can give your 3D designs
depth and realism but sometimes harsh
Shadows aren't what you need here's how
to make them softer go to directional
light find it in the left sideb bar of
your spline interface in the light
properties panel you'll find options for
blur and penumbra these two properties
control the softness and spread of your
shadows adjust the blur to four this
will soften the edges of your shadows
making them appear less sharp and more
natural change penumbra to three the
penumbra setting controls the size of
the softer diffused part of the Shadow a
higher value will result in a larger
softer Shadow now take a look at your
design the shadow should appear softer
and more subtle enhancing the overall
appearance of your 3D
model all right don't forget to name the
file next switch to play mode to preview
your 3D icon this mode allows you to
interact with your scene as an end user
would providing a realistic view of your
design you can rotate pan and zoom the
camera to review your design from
different perspectives this is also
where you'll see any interactions or
animations you've added in action
remember play mode lets you see how your
design will look and work after you
publish or export it helping you ensure
it's just right before sharing in spline
3D when working with grouped objects you
might find that the pivot position is
not centered as expected this can cause
issues when you try to rotate the group
resulting in an off-centered
rotation Begin by ungrouping the layer
this can be done by selecting the group
and choosing the ungroup option next
select all the circles within the
ungrouped layer navigate to the Boolean
modifiers panel and click merge
geometries this will combine all
selected circles into a single unified
object after successfully merging the
geometries ungroup the main parent group
one more time now regroup the objects
together again this process of
ungrouping merging and regrouping can
help recenter the pivot point of the
grouped
objects to center a line set the
position to x0 y0 z0 now let's add the
final touch to your design by giving it
stylish beveled
edges select the object and navigate to
the shape panel set bevel side to four
for a subtle polished effect notice how
this adjustment beautifully softens the
edges of your object now let's add a
touch of personalization by changing the
screen background color head to the
scene panel here you can select a color
that suits your design preference go
with offwhite or Unleash Your creativity
with any color of your choice all right
let's preview it
congratulations you've effectively
crafted a 3D Wi-Fi icon using spline the
skills you've acquired today can be used
in various projects whether it's for app
design or data visualization keep honing
your abilities and delving into the
Limitless potential of spline enjoy your
creative journey I will see you in the
next video in this tutorial we'll be
walking through the steps to create a
dynamic 3D weather icon using spline
we'll cover how to create objects apply
materials and animate the objects to
bring your icon to life whether you're a
seasoned designer or new to 3D design
this guide will provide you with a
practical Hands-On approach to you using
spline let's get started first open
spline and create a new
project now let's customize the scene
background and click on the canvas on
the right side bar change the BG color
to a nice blue sky color the hex code is
on the
screen to help us with Precision let's
set up a grid go to the global settings
on the right sidebar and change the grid
plane to front back XY the grid will
help to align our objects accurately
time to bring in the Sun we'll start by
creating a sphere in the toolbar click
the circle and drag it to the canvas for
the size set a value of 100 for the X Y
and Z axis and for the position set a
value of zero for the X Y and Z AIS next
let's create a cylinder for the Sunbeam
in the toolbar click the plus icon and
choose a
cylinder adjust the size to X8 y20 and
Z8 we will position the cylinder in
relation to this line
we can drag the arrows to change its
position but I prefer to use the right
sidebar for a more precise position
rotate the x and z axis to 90 and the Y
is
zero and position the X AIS to- 70 and
zero for the Y and Zed
axis we can create a beautiful effect
using the cloner use the cloner to
duplicate and arrange objects in
patterns or based on the shape of
another object you can also create
Dynamic animations by changing cloner
and Randomness settings with State
changes here's how select the cylinder
then go to the cloner in the right
sidebar activate the cloner cloner
offers various types like radial linear
grid and object each producing distinct
patterns in our case I want the radial
type you can choose whether to display
or hide the original cloned object in
our case I want to hide set the count to
eight and adjust the radius to 70
the start and end properties allows to
define a circular sector it's set to a
Full Circle by default with a value of
360 the alignment property will align
the Clones to the radius if activated
for our example select
yes next we have the axis property it
will set the orientation of the Clones
based on the X Y and Z AIS for our
design let's use the Y AIS finally we
have the transform properties which are
position scale and rotation it will
change the transform values of the
Clones and the base object retains its
original
transform next modify the cylinder's
rotation and position properties values
to zero for all three
axis now let's give our icon a stunning
appearance create a material with the
following
settings first select the sphere then go
to the material property change the
color to depth let's use a yellow color
for the first color stop and black for
the second one for its origin the x and
z values will be 20 and the Y is
10 adjust the near value to 16 and far
to
183 change the opacity of the lighting
to 80 and add overlay as blending
mode add a new layer by clicking on the
plus sign and select mat cap the mat cap
layer works by applying a texture onto
the shape making it valuable for
creating intricate material surfaces use
the Third option from the First Column
overlay this as well add a new layer and
select forell the fresnell layer
replicates the way Reflections appear on
surfaces influenced by the angle of the
light it is good to use it if we want to
create shiny or metallic
surfaces set the color to white and a
bias of
0.10 the scale will be one with an
intensity of two a factor of one and add
overlay to ensure consistency and
efficiency let's create a material asset
click on the four dots icon in the
material property section click the plus
icon to add a new material asset give
your asset a
name now you can easily apply this
material to various elements in your
project select the cylinder to apply it
return to the material property section
click on the four dots icon and choose
the asset we
created all right we have a sun to orbit
your cameras simply press option and
click while dragging
in let's add some clouds to our scene so
add a
sphere set the size values to 60 for all
three axis the X position is - 90 the Y
is -3 and the Z is
60 duplicate the sphere and keep the
same size but change the X position to
minus
6 duplicate a third sphere and change
the size to 80 for all three axis change
the X and Y position to -50 and -
26 now let's merge them into one select
all three spheres and go to the Boolean
modifier on the right sidebar click on
Union then click on apply and
edit time to shape those clouds we'll
use some sculpting
brushes start by selecting the layer
then go to the shape panel and click on
edit mesh head to the toolbar and click
on the brush icon to begin sculpting
here are some brushes to get you started
the first one is grab and it pushes the
surface from its starting point by
clicking and dragging
hold the command key to move the
surface the second one is draw click and
drag along the surface to elevate it
along the path you draw hold the command
key to push the
surface the third one is draw clay it is
similar to draw but with a flat base
click and drag to elevate hold command
to move the
surface and lastly we have smooth the
brush will smooth all the rough edges to
make the Surface more
even in the sculpt brush panel you have
the option to adjust both the radius and
strength to achieve your desired effect
adjust the brush settings until you're
satisfied with the cloud shape all right
so far so good let's make our clouds
look amazing with the right material
change color to Glass click on the icon
to open its properties change the blur
value to 150 a thickness to 250 and a
refraction to
1.08 for the lighting keep its default
values add a third layer and select
depth open its properties and change the
first ramp color to a light gray and the
second color to
white change the near and far values to
0 and
64 and change the depths value to 20 add
a fourth layer and select displace this
layer will distort the object's geometry
with noise
displacement for the properties keep its
default values but change the displaces
value to
zero add a fifth layer and select for
n the color will be a dark gray and
change the bias value to 0.14 and add
overlay add a sixth layer and select mat
cap select the preset that is the second
one in the fourth column and change the
blending to
screen now let's add some raindrops to
our scene go to toolbar click the plus
icon and choose a
cylinder change change the size values
to x and z 10 and
y30 we can use a material from the
spline Library go to the material panel
look for the four dots icon in the
material properties section click it to
open the material options choose spline
library in the drop- down box you'll see
different categories like gradient metal
noise and
more you can even search for something
specific if you want I picked one called
glass color pattern 02 click on the
material to apply it I'd like the
Raindrop to be blue let's edit the
material for that add a depth layer with
the following
settings change the first color to a
light blue and the second color to
another shade of
blue change the Y value to minus 19 for
origin near to 5 and far to
24 move the layer under lighting change
the lighting's opacity to 90 and the
blending to Overlay
for glass edit the refraction to 1.60
change the glass's value to 60 with a
blending of overlay for mat cap the
value is also 60 with a blending of
overlay change the franel color to a
dark blue and change the blending to
screen and lastly change the last mat
caps value to 70 and overlay by updating
to those new values the effect will look
better to make our 3D icon look even
cooler let's give it a background card
add a rectangle shape the size will be x
a width of 2150 and Y a height of
340 set the corner value to 44 to create
a rounded Corner set the Extrusion value
to 10 to add depth to your rectangle set
the bevel value to eight this applies a
bevel to the
edges set the bevel sides value to eight
this will give your bevel a more rounded
appearance for this card we'll use a
special material from the spline
Library you can even search for
something specific if you want I picked
one called gradient saturation shiny 06
it's got a nice blue color click on the
material to apply it go to the material
section find the depth option set the
first and second colors with the
following hex
codes locate the layer named Boolean and
rename it to Cloud for the cylinder
layer rename it to raindrop the other
layers can remain the
same click on the first layer you want
in the group hold shift and click on the
others you want to include press on
commend G this will create a group
containing all the selected layers with
the new group selected go to the
transform panel on the right side set X
Y and Z to zero to Center the group on
the
canvas to change the camera's angle
press option on your Mac keyboard click
and you can drag it to have another
angle adjust the position by moving the
y and x axis to your desired location I
want an icon outside the rectangle press
option plus r to reset the
camera let's start by improving the
shadows in our 3D scene we'll make them
softer and adjust their Direction select
directional light from the left sidebar
of your spline interface set the
direction values to x -
415 y 414 and z 3
adjust the intensity of the light to
0.60 to soften the shadow set the blur
value to
two for a more gradual Shadow falloff
change the panum value to six now let's
introduce a point light source to add
depth and realism to our scene to add a
point light click on the point light
tool in the
toolbar in the right sidebar panel set
position to x 0 y 50 Z 16
make sure to disable Shadows by setting
it to no in the light properties panel
change intensity to
0.80 set distance to around 3,000 to
control how far the light
travels adjust Decay to two for the
lights intensity over
distance all right the card looks good
to make our icon more informative let's
start by adding the temperature text
access the toolbar and click on the T
icon to add text
type in the temperature degree to add
the degree symbol press option shift 8
adjust the size of the text to be x130
and
y70 customize the font settings to your
liking for the temperature we're using
the inter font with a size of 70 and a
semi- bold
weight position the text at coordinates
x0 y- 73 and
z-5 then change the color to white and
hide the
lighting now let's add text for the
weather conditions duplicate the text
content that you've just created for the
temperature with the duplicated text
selected change the font size to
24 for weather conditions use a regular
font
style adjust the text size to X100 and
y30 position this weather text at y -
130z
-5 adjust text to horizontal Center
now change the content to
showers and then set the opacity to
60 finally we have completed our weather
card so see you on the next
one with the weather card completed it's
time to bring our scene to life first
We'll add some animation on the sun and
make it
rotate here's how let's start by
selecting the sphere navigate to the
states panel located on the right side
bar click on the plus icon to add a new
state you will encounter two new States
the base State the initial State your
object was in and another one referred
to as the state the state is already
selected which means we can start making
new changes under the rotate settings
set y to
360° it will spin around the y- AIS you
can click on the states panel to go back
and forth between the base State and
State to spot what's
changed now let's trigger this animation
move to the event panel then click on
the plus icon to create a new event I
want the animation to start right when
the scene pops up so all you have to do
is pick start event from the drop- down
menu It's Already There by
default for the action choose transition
from the drop down menu set the target
drop down to sphere the target is where
you want the change to take place in
your object which represents our sun
configure transitions as follows
transitions one base State transitions 2
state in the transition section you can
specify which states the change will go
through how long each step takes and how
it happens choose ease and out for
animation with a duration of 4
seconds the sequence properties they're
the big boss of the whole show you
planned in the transition section the
delay refers to the duration in seconds
that the sequence should wait before
being played you can set the number of
times your sequence does its thing or
make it run
endlessly by by choosing infinite the
cycle property will appear it refers to
whether the sequence should revert back
to its initial starting point this will
make the Sun rotate
indefinitely Now preview the animation
by clicking on play mode you'll be able
to see it
rotate next we'll animate the Sunbeam
making it move like a shining Ray for
this we'll be using the cylinder layer
navigate to the states panel again click
on the plus icon to add a new state
we'll start by moving back to the base
State then go to the cloner panel on the
right sidebar change the end value to
zero now switch back to the state and
return to the cloner
panel change the end value back to 360
to create the animated effect to add a
rotate transition let's create a third
state in this state we'll change the
z-axis value to minus
360 head over to the event panel click
on the plus icon to add an event choose
start event from the drop- down menu for
the action choose transition set the
target to cylinder which represents our
Sunbeam configure transitions one base
State and transitions 2
State use ease in out animation with a
duration of 1 second for the sequence
set loop to none for a onetime
animation now add another action I want
a separate transition and a delay select
transition again Target cylinder
transitions one State and transitions to
state two configure this animation with
ease and out a duration of 4 seconds add
a delay of 1 second to create a
staggered effect and set it to Loop
infinitely Now preview the animation by
clicking on play mode you'll be able to
see it
rotate let's add some gentle movement to
our Cloud navigate to the states panel
as before click the plus icon to add a
new state head over to the material
properties to create Cloud movement on
the the displace layer set the movement
to 10 for the offset the x value is- 43
the Y is 30 and the Z is 10 change the
displaces value to eight go to the event
panel click on the plus icon to add an
event choose start event choose
transition as the action set the target
to Cloud set transitions one base State
and set transitions 2 State use linear
animation with a duration of 6
seconds set the sequence to Loop
infinity and cycle pingpong the
animation will be played forward and
backwards in a loop let's check out the
animation you can activate play mode by
pressing shift plus
space great if you want the cloud to
move slower or fast you can adjust the
animation by changing the display and
duration settings to your
liking with the sun and cloud in place
let's animate the Raindrop inside the
cloud I want the rain to fall diagonally
and fade away
to get started let's change the Raindrop
color to navy blue for the lighting
effect set the blending mode to
multiply feel free to adjust the colors
as you
prefer with the layer selected head over
to the right sidebar rotate it by 20°
along the z-axis set the x position to
minus 90 the Y to 20 and the Z to 100 to
make sure the Raindrop is inside the
cloud
you can temporarily hide the cloud for
better
visibility navigate to the states panel
click the plus icon to add a new state
select the Green Arrow and move it down
about 50 units go to the event panel
then click on the plus icon to add an
event choose the start event from the
drop- down menu for the action choose
transition set the target to raindrop
set transitions one to base State and
transitions two to State under animation
set the style to ease an out the
duration to 1 second set sequence to
Loop Infinity this will make the
Raindrop keep falling let's play the
animation great job the animation is
working well now let's make the Raindrop
fade
away I want to change the
animation under animation set the style
to ease out the duration to 1
second this will be the position of the
Raindrop in the new state go to the
material property and detach this will
disconnect the Raindrop from any shared
material properties set all layers to
zero opacity this will make the Raindrop
invisible in the state Let's Play It
Again the results are looking much
better
now I'd like to move the Raindrop
downward by setting y to minus
60 let's play
again so far so good next we'll use the
cloner to create multiple raindrops all
of which will maintain the animation
select the Raindrop layer navigate to
the cloner panel on the right side of
your interface it's more suitable for
working on the base
State set the type to
linear set the count to four which will
create four
raindrops set the position to X11 y - 6
z0 we can hide the cloud for more
visibility select convert to instance
this will give us more control over each
individual
raindrop we don't need the main
component so let's hide it now let's
adjust the position and rotation of the
raindrops select the Raindrop clones
then rotate Z to
45° set the space between cylinders to
about 10 units select clone 1 to clone 3
and move by 10 units select clone two
and clone three and move by 10 units
select clone three and move by 10
units move the second and fourth
cylinders on the z-axis by about 20
units this will give depth to the Rain
select raindrop clones then rotate Z to
60° next select all clone components and
then rotate them along the z-axis by
20° now bring the cloud back by unhiding
it using the I icon let's see the
preview next let's add some delay for
each
raindrop select the first cylinder
inside the group
set the delay To
None choose the second
cylinder delay it by
0.4 opt for the third
cylinder give it a delay of
0.2 finally for the fourth
cylinder add a delay of
0.8 I want to adjust the Sunbeam
animation to make it rotate more slowly
let's change the duration to
10 all right let's take a
look great the raindrops are more
realistic now I'm quite happy with the
result all right don't forget to name
the file once this icon is complete we
can separate the objects to create more
cards like these
examples and there you have it your very
own stunning 3D icon created in spline
we've covered everything from setting up
the scene to sculpting and animating
feel free to experiment and add your
personal touch don't forget to save your
project and you're ready to Showcase
your 3D icon to the world thanks for
watching I will see you in the next
video in this section we'll discover
techniques for adding creativity into
your project we'll explore the path tool
to create 3D paths and dive into the
basics of animating these paths to add
life into your Creations so let's get
started first open spline in your
browser or on your desktop app and click
on new file
delete the default rectangle choose any
color for your background scene I will
be using a light blue color now let's
explore how we can add a path to your
scene and there is a few ways to achieve
the same result you can create a path
directly from a shape let's add a
rectangle and under the shape settings
click on convert to path the path will
follow the sides of your shape and
remove the fill by default the size of
the path is 50 change the values to have
a wide wider or thinner path
size you can edit each points
represented by a purple dot move them on
the X and Y AIS and it will keep the
sharp
edges use the pen tool to add new edit
point to shape your path once the mouse
cursor is near the path you will see a
plus sign to add it you can now edit the
handle drag the new blueo and it will
update your path
shape while on edit mode select the bend
tool located at the top click on any
purple Dot and it will turn into a baser
curve represented by a blue dot this
will add handles that you can move to
edit the
curve drag the handle represented by the
purple dot this will move both handles
together click on the purple Dot and
hold the option key on the Mac and it
will move individually for more
flexibility with the bend tool still
selected click on the blue points and it
will remove the handles turning the
baser curve back into sharp
Corners if all the path points are
purple you can increase the corner value
and it will adjust adjust All Points
simultaneously you can also edit a
single path Point as long as it is
connected by purple dots on its left and
right for example use the bend tool and
edit the bottom right point now increase
the value of the corner and only the top
left point will be affected as it is
still connected to purple points from
its left and right
sides after adding Corners to your path
you can also increase the subdivisions
value for a smoother sculpting
result now that you're familiar with the
basics of creating a path you can create
new ones using ellipse and apply the
same principles as seen
previously it works also with the vector
tool by using it you can create a custom
shape once you click on convert to path
the shape will be turned into a path by
following all the edges of your
shape path can also be created from a
text type anything you want convert it
to a shape and then convert it to
path now it's time to practice what
we've learned and try to recreate this
more complex design using the path tool
and by editing the points and bzier
curves this is no ordinary and random
path the shape is inspired by Apple's
2021 event so let's
begin click on the plus sign and select
path add multiple points and try to
reproduce the same path as mine or
create your
own don't worry if it's not perfect
right away we can still edit it after
the path is created
for the extremities of the path you can
leave it as flat to have straight edges
or rounded go to caps and select round
to have a beautiful and natural finish
now it's time to sharpen and finalize
the path by playing with the points and
handles I will fast forward this part so
practice this tool and try your best to
have beautiful and good-looking natural
curves finalize the first path by adding
a subdivision value of 30 to smoo
everything repeat repeat the same
process for a second path play with the
rotation angle to add a unique
look we have now created the two paths
needed for our animation on a second
look I am not completely satisfied with
my curves so I will continue editing
them until I reach the desired
result now let's bring our path to Life
by adding a gradient of multiple colors
the hex codes will appear on the screen
if you wish to follow along or you can
use your own ones click on the color
stop to change the color just click on
the color bar to add new color stops
change the angle to
90° adjust the color stops as
follows if you are satisfied with your
gradient you can save it as a material
click on the four dots icons next to
material click on the plus sign to save
it rename it to gradient path to save
some time I will also apply that new
material to path
2
if you wish to rearrange the points how
they overlap each other click on the
isometric View and drag the point as you
like but be careful not to distort the
path we have now completed our custom
design using the path
tool if you struggle with creating the
path you can import the original image
into spline and trace it over with the
tool it is with practice that you will
Master the path
tool one of the better option beside
drawing with the path tool is to import
a SVG file directly into spline here we
have the SVG file for our Apple
inspiration if you wish to follow along
download the SVG file in the description
below the file is opened in figma and we
can clearly see its Vector points in
spline click on import at the bottom
left select Vector SVG and choose the
appropriate file you can also drag and
drop your file directly into spline
don't worry the SVG was imported
correctly but the vector shows the fill
instead of the outline because the lines
intersect to fix that issue select the
first layer and click on convert to path
add a subdivision value of 30 to smoo
the
edges repeat the same process for the
last
layer you will notice that even with a
subdivision value of 30 the intersection
points are not smooth you can play with
the handles just a little and this will
smooth everything you might need to
adjust the handles again to not lose the
original path after adding a gradient to
our path there is still some visible
minor issues by adding around caps both
extremities ends with the same color
even though the first and last color are
different to fix that make sure to use
the same color for the first and last
color stop also we have a weird blending
of colors when the path
intersect you can fix that by adjusting
the camera view by holding option on the
Mac keyboard and dragging with your
mouse then move the intersection Point
slightly to give the the effect that it
is on top of each other repeat the same
process for the other intersection be
careful to not distort the original path
too
much with our paths finalized it's time
to add some states to create a nice and
simple
animation select path and under States
click on the plus sign to add a new
state both States will be identical so
you will need to edit them
properly select base State under path
Extrusion change the value of depth to0
which is the length of the mesh along
the path now select state and put back
the value of depth to one under events
click on the plus sign to add an event
we will use start and the action will be
transition the target is path number one
will be base State and number two is
State the animation duration will be 5
Seconds now let's click on the play
button to test our
animation great it works let's add the
same logic to path two if you wish to MK
the Red Dot entirely at the beginning of
the animation we need to add a third
state select base State depth will be
zero and reduce the opacity of lighting
and gradient of the material to
zero on state put back 60 for lighting
and 100 for gradient add a third state
select state two and change depth back
to one under events click on the plus
sign to add an event we will use start
with a transition action the target is
path two number one will be base state
with a duration of zero and number two
is State add a third transition and
select state two the duration will be
2.5 seconds in the sequence delay add
0.5 second that means that the animation
will start after 0.5 seconds once we
click on the play button both animations
works but we need to add a delay between
each animation so it doesn't start
simultaneously now to set the animation
sequence properly remove the event on
path two select path and on the start
event add a second transition that
targets path to note that the new event
will be placed on top number one will be
base State and number two will be state
with zero for the duration number three
will be state two with a duration of 1
second we want the animation to start
after the first one is completed so add
a delay of 5
Seconds
great everything works as planned we
just completed a simple animation on our
custom path using States events and
actions the possibilities are endless be
creative and explore how you can create
awesome interactions I hope you've enjoy
it so see you on the next
one in this section you will learn how
to craft captivating 3D wave animations
that can elevate your web designs
product presentations and much more all
with the assistance of spline we will
dive into the art of creating
customizing and animating both colorful
and glass
waves we will explore various material
effects and animation settings to bring
your ideas to
life the wave animation can serve as a
captivating backdrop for your website's
hero section immediately grabbing the
attention of visitors alternatively it
can offer an elegant and straightforward
product presentation elevating its
visual appeal with a of beauty and
creativity the spline Library offers a
bunch of samples to jump start your
project and explore its various elements
among these samples you'll find a wave
example that can be employed to get you
started if you're new to this concept
you have the flexibility to duplicate
the sample and customize it according to
your unique preferences whether it's
altering the shape or modifying the
material effects however in this
tutorial we will walk you through the
process of creating the wave completely
from scratch so let's Dive Right
In all right let's open spline in your
browser or desktop app and create a new
file to stay organized rename your
design file by double clicking on the
default Untitled label and giving it a
meaningful name for your project let's
say wave animation for the best visual
experience choose any dark background
for your scene black for example or dark
blue is your choice it offers excellent
contrast which is ideal for creating a
vibrant colorful object with a nice
glass effect so it's best to use a
fairly dark background you can see your
element clearly right when you open a
new file it comes with a default
rectangle layer that we won't need so
delete it let's begin by creating our
first shape select the vector tool which
allows you to create a custom path click
anywhere on the canvas to establish the
first point and then skillfully shape
your wave add the necessary anchor
points and click and drag to make a
curve once your wave is precisely as you
you want you can simply press the Escape
key to
finish now direct your attention to the
shape section within the property panels
on the right side bar here you will find
two options edit and convert to path opt
for convert to path and you'll notice
that the fill color turns into defined
outlines this step marks a significant
transformation in the appearance of your
Wave by default my base shape is round
here you have the options for your
shapes like rectangles circles Pol poons
or Stars if you wish to create something
unique and fully express your creativity
you have the freedom to craft your own
custom designs by selecting the custom
option we may want to create a different
shape from the options available let's
design the basic shape manually using
the vector tool once again you can even
create a heart or a random shape as you
like of course so let's go for random
all right now let's rename our custom
shape to base shape this simple
adjustment makes it easier to identify
layers
and rename the path to colorful wave
I'll be making a few more adjustments to
give the base shape a more elegant look
note that the final design may not be
exactly the same as the original as
we'll be customizing it from scratch but
don't worry you'll have access to the
final result for inspection all right is
better now great next select the wave
path and go to the path Extrusion
section on the right sidebar choose
object and select the new shape we've
just created which is base shape so that
the new shape will be on the two side of
the path okay maybe we can adjust the
wave a little bit as well maybe we can
leave a little space and make it more
curvy because the shape is too sticky
let's make a nice curve like
so there you go much better now okay
next let's adjust the size of the path
the X position can be any number so
let's try setting it to maybe 1,800 and
keep the rest
unchanged feel free to experiment with
it until you're happy with the result
let's experiment with the sub division
settings to observe the changes not like
that let's set it to 30 for a rounder
shape this provides a better
understanding of how to manipulate the
wave's form and complexity for the depth
I think we're fine with a value of one
but we can still test it now let's
proceed to the twist setting and
determine which value will produce the
most favorable
results H maybe like this but before
moving on to the next step I'd like to
extend the wave a bit cool to give our
wave a truly stunning appearance we're
going to introduce a series of material
effects let's start with colors although
we've already created a custom gradient
color you have the option of choosing
your own color palette let's detach the
color style since we want to add a
custom gradient for this particular
section we'll incorporate three
gradients into our Design This creative
freedom allows you to infuse the project
with your own unique style let's add the
first gradient locate the material
property on the right side bar and
change our initial solid color to a
gradient then click on the Color Picker
to access the color settings all right
I've already prepared a selection of
vibrant colors for this purpose set the
first color to this pink include one
more color at the midpoint to this
yellow and the last one to this purple
let's arrange the angle of the
gradient let's say
90° now let's proceed by adding a second
gradient you can either click the plus
icon and follow the same process or for
a faster approach right click the ex
existing gradient duplicate it and make
color
modifications this time we're expanding
the palette with four colors add an
additional color to the middle of your
selection start with the first color a
royal purple and set its opacity to 0%
move on to the second color pink the
third color this one finally the last
color light Violet with 0% opacity for
this second gradient there's no need to
adjust the angle so simply set it to
zero now decrease the opacity of the
second gradient group to
60% all right let's proceed to add the
final gradient to our project duplicate
the second gradient the only
modifications needed are the colors 2
and three while other aspects remain the
same color 1 and four remain purple with
their opacity
unchanged color two is this vibrant
orange and the third color is this cool
blue and then keep the rest
unchanged now let's introduce another
effect the fresnel effect which creates
a beautiful light reflection set the
main color to a lovely pink shade while
keeping the rest of the settings
including scale intensity and Factor
unchanged then adjust the opacity to 30%
in the final section we'll be looking at
the complexities of the depth effect
which adds an extra Dimension to the
animation of our waves a carefully
selected color ramp is used to add depth
to the animation three specific colors
are used in the ramp each adding a
unique shading and dimension to the wave
now let's change for the color code here
keep the mode for color the origin for
Vector the depth originates from the
vector ensuring that the waves
appearance remains coherent change the
blending mode to smooth for a
beautifully Blended color effect set the
type for linear instead radial is better
suited for round shapes change the
position for World specific coordinates
for the origin of the depth are X
position is minus 33 y position
152 and Z position
515 the direction in which the depth
effect is applied is established with
these coordinates let's set one to X
position and the rest position remains
zero the near- depth value is set at
243.166 depth and
dimensionality as you can see the colors
here don't look good they lack some
blending modes to improve the material's
visual appeal let's start from the
bottom for gradient one maintain the
blending mode as normal but for gradient
2 and gradient 3 set the blending mode
to Overlay do the same for light as for
fresnel change the blending mode to
screen to make it more vibrant and for
depth set it to Overlay as
well now we have a visually pleasing and
colorful wave right
beautiful now it's time to shift our
attention to the captivating glass wave
effect where we will create another
shape or duplicate the existing colorful
path layer with some key modifications
duplicate the colorful wave layer by
pressing the command D shortcut rename
the duplicated layer to Glass wave or
any other name you prefer remove the
gradient for now from the duplicated
path switch the fral effect to Glass
modify the depth setting to mat cap and
choose a glass-like option from the
spline library or upload your own image
let's go with this one it resembles a
mirror more closely let's move the glass
wave slightly so that it doesn't hide
the colorful wave allowing us to better
observe the changes as you can see the
glass wave should ideally be transparent
but it appears black which is not what
we want in this case let's apply a
blending mode to the mat cap and choose
the screen effect to increase its
brightness and transparency allowing the
background to become visible back to the
glass material let's fine-tune the
effect to create a convincing water-like
appearance here the blur is already set
to 10 by default so keep it like this
Define the thickness as 141 which
contributes to the glass effects visual
weight and depth enhancing the
water-like
appearance and the refraction is already
set to 1.50 by default as well we can
keep it like that this effect provides a
visual Distortion that mimics the
behavior of light as it passes through
water adding to the realism of the glass
wave effect
okay now let's modify the opacity of the
displace material by increasing it to
48% so that we can better perceive the
texture next let's introduce another
material effect by selecting frel it
brightens up the texture but how about
adding an overlay effect to seamlessly
blend it with the colorful wave let's
reorganize the order of the material
Effects by moving the fresnel down below
the mat cap this adjustment results in a
slightly darker appearance the order of
effects plays a crucial role in
achieving a pleasing final result all
right let's make some adjustments to the
glass shape otherwise the path behind
won't be visible select the edit path to
adjust
manually select the two points to edit
at the same time and bring them to the
top a little bit like
this okay cool now set the twist to any
value as you
like let's say -
720 I'm might want to increase the Y
position in the size value let's set it
to
3,652 fantastic now it's time for the
exciting part we're going to animate the
two Waves by using the states and the
events properties we're going to start
with the colorful wave first for now
let's hide the glass wve layer and focus
solely on one layer for the
animation click on the plus icon located
next to the states section on the right
sidebar this opens up two options base
state which signifies where the
animation begins and state which defines
the state of the animation at its
conclusion since we want to make
adjustments to the second state select
state this setting is pivotal in
determining how the animation finishes
all right let's make some changes to the
states navigate to the angle property
and increase the angle to
40 then increase the twist too maybe
313 next let's add the event to create
our wave animation
click on the plus icon to initiate the
addition of an event select transition
as the action for this event this choice
will Define the type of Animation that
occurs make sure that you select the
appropriate path as the Target in this
case you'll choose colorful wave
aligning the event with the correct
element in your animation set the
duration for the transition to 50 this
determines how long the animation will
take to complete configure the
transition as linear this option ensures
a smooth and consistent animation flow
no delay is added with a setting of 0
seconds this means the animation event
will begin immediately without any pause
let's go to the play mode to see how the
animation
looks here we can see the wave moving
slowly and smoothly gently twisting
according to the settings we just
configured in the states
property if you wish to have the ability
to zoom or rotate while the animation is
playing you can adjust the play settings
click on the export button choose play
settings settings and enable the options
you require such as Zoom pan and orbit
all right let's try it once more you can
use the same keyboard shortcut for both
actions to rotate use the option key and
drag for zooming hold down command and
scroll the mouse wheel up to zoom in or
down to zoom out now let's apply the
same process to the glass wave reopen
the glass wave layer and hide the
colorful wave for the time
being first let's add States and then
make the necessary property changes
within the state for the angle value we
can set it to five and for the twist
let's set the value to maybe
371 you can decrease the size of the
start scale value to make it unique what
do you think let's go for 0.20 KN if
everything is configured correctly we
can now proceed to the events simply
select the plus icon and follow the same
process as with the transition of the
colorful
wave make sure the target is the same
name which is glass wave that we wanted
to animate we can maybe reduce the
duration of 30 change the transition to
linear as well and the rest keep
unchanged let's previous one more time
nice right all right now let's combine
the animations of the two waves to see
the harmonious effect reopen the
colorful wave layer and click the play
button again to see how they interact
together beautiful how about adding
another motion to the glass wave this
time let's try for a snake or mermaid
move
okay make sure to select the state
option and make an adjustment here
increase the offset until it reaches a
value of one then go back to the base
State and make another change from
here reduce the depth to
050 now play the preview to see the
result this is just an option and there
are several ways to animate your project
feel free to experiment with the
settings and let your creativity flow
maybe reduce the duration of the
colorful wave since is a little bit too
slow so we can change it for 30
instead congratulations you've
successfully completed the Journey of
crafting a stunning and dynamic wave
animation I hope you thoroughly enjoy
the process and find inspiration in your
new found abilities this is just the
beginning of your creative journey and
we look forward to witnessing the
incredible projects you'll bring to life
see you on the next
video hello everyone welcome to a new
episode of
spline this section will teach us
another exciting topic
creating a 3D card with a parallax
effect this technique involves arranging
elements at different depths creating
the illusion that they move at varying
speeds and introducing a glass layer
that acts as a portal into a hidden
background you can check out the
community for more examples like this
one this technique adds depth to your
design and offers a unique visual
experience whether designing a website
or app interface the 3D Parallax effect
can make your creation stand
out in this section we'll start by
creating the main card with the
composition and learn how to use glass
layers to create the
portal here is an overview of this
section we will incorporate various
elements some in the foreground and
others in the
background this Arrangement produces a
parallax effect characterized by
elements moving at varying speeds the
glass layer in the background hidden in
a box create an illusion of a
portal the first step is to add a
background element for our scene so you
will need a wallpaper a blob or any
other suitable image or
animation you can import an existing
file or use assets from your spline
Library the second step is to create our
3D card starting with the base using a
rectangle this rectangle will form the
outer shell of our
card to give our card a 3d effect and
create the illusion of glass we'll apply
Extrusion and
[Music]
materials including color
lighting and the most important thing
the glass
layer the third step is optional which
is to create the card's front face by
using another glass layer to place text
content
later you will notice that it doesn't
show other glass layers and its
appearance changes based on the material
you use in this case we will use the mat
cap material which provides distinct
appearance and will be changed in color
and reflection it will create an
illusion of a mirror effect which I
really
like the fourth step is to hide the
background or whatever is inside or
behind the glass layer by creating a
cube the Cube's purpose is to conceal
all the elements inside except the card
for the fifth step you will need a 3D
icon such as the weather icons from our
spline course library or 3D assets from
your spline
library in the final part of this
section we will explore different
settings to enhance user interaction
with your 3D card you'll learn how to
implement play settings like orbit soft
Orbit on Hover effects and orbit limits
allowing you to customize the behavior
of your 3D card and make it even more
captivating now that you're more
familiar with the steps open a new
document with your chosen background I
will choose the wave animation
background from section six of our
spline
course we can change the background
color of our entire scene to a dark blue
or you can choose your own color if you
want the exact same color here is the
hex
code when you create a new document it
automatically includes a directional
light and a rectangle click on the
rectangle we're going to adjust its size
the size doesn't matter but if you want
to create the exact same size here are
the dimensions also we're going to set
the corners to
20 navigate to the Extrusion property
and set to
10 now let's apply the materials you'll
notice that you already have options for
lighting and color I'll keep the
lighting settings as they are but for
the color let's choose a darker shade
like dark
blue we're going to reduce the opacity
to
50% we will also apply a blending mode
and select
multiply now let's apply the glass
layer click the plus icon located in the
material
section and select
glass set the blur value to 30 and leave
the other settings as they
are next we're going to add an
outline and change the color to
white choose the blending mode to
overlay we're going to organize the
layers in the material
section the correct order for the layers
is lighting glass color and
outline I think my width size is too
large I will reduce it to
one now we're going to duplicate the
rectangle move the two layer rectangles
to the bottom of the list name the
rectangle layers by glass UI for the
front glass layer and glass card for the
base of the card
select the glass card and change its
size to 393 and
575 after that set the subdivision to 15
and the Extrusion to
20 now select the glass UI and change
the position to Zer - 180 and
64 then select the glass card and change
the position to
0 25 and
34 so I've positioned my two cards with
the one in front slightly forward and a
bit
lower if you want to see the details of
the background hide the glass material
let's add met cap to create a reflection
select the glass card and remove the
glass outline and hide the
lighting we're going to use another
material instead the mat cap choose the
reflection five
Now set the opacity to 30 and choose
screen for the color you can keep it as
it is or opt for a slightly paler shade
I'm choosing a slightly paler shade but
it's very subtle this time I change the
blend mode to
Overlay place the mat cap layer under
the color layer and reduce the opacity
to
30 the next step is to hide the
background select the cube from the
toolbar the size doesn't matter as long
as it covers the entire background
completely for a better orientation
switch your camera to isometric
mode be sure to mask the background
fully it's very important not to hide
the
card make sure my background doesn't
extend beyond my
box the Cube's color should match the
background effectively concealing
everything behind
it so change the cube color to the same
background color as the
scene
now you're wondering why our portal
doesn't
work we need to add a glass layer to our
Cube we must place the glass layer below
the color layer for our portal effect to
work there you go our portal is
working click on play to have a better
look at our 3D
card amazing right I love the mirror
reflection so much you see how how easy
it is to use spline we can do so many
things we're almost done we just need to
add a 3D icon and play with the play
setting let's get 3D icons and put it in
our document you will find this icon on
our spline course file once you have
your 3D icon we're going to position
it
-9
16 and
1,316 so the icon is positioned slightly
in front of of our card not too far
away we'll place the directional light
completely at the top of the layer
list and then set intensity to
one click on the plus icon at the
toolbar we're going to add
camera we're going to place the camera
in front of the 3D card set the position
to
250 then 50
and
1,00 so you can see that the camera is
well positioned in front of my 3D
cards hold on I'll turn it on its side a
little so you can see
better now let's go to the play
settings normally when you add a camera
it's not automatically set in the play
setting otherwise it's the personal
camera so make sure to set to the
camera we're going to go down a bit and
we're going to set no to pan and
zoom then we're going to disable page
scrolling and we're going to activate
the on Hover and leave the settings as
they
are then activate the orbit limits we're
going to change the value for the top
and bottom to 15 then 30 for left and
right we'll leave the rest of the
settings as they
are then let's visualize our 3D card
congratulations you've just created a 3D
card with a parallax effect in spline
this effect adds depth and interactivity
to your design making it visually
engaging and unique don't hesitate to
continue experimenting and refining Your
Design to make it even more impressive
we'll see you in the next section where
we'll explore button
components hello everyone in this
section we're going to learn about
components in spline similar to
components in design tools like figma
these components are are invaluable when
you need to replicate elements multiple
times to ensure consistency in your
designs creating components in spline
allows you to make Global changes
efficiently we will also complete the 3D
card from the previous section by adding
text and an icon and we'll create two
more cards with buttons that will serve
as components to create pricing 3D cards
so let's get
started if you're not already familiar
with components they are objects that
can be reused multiple times throughout
your scene when you change the main
component all the copies automatically
change
too components help you stay organized
and maintain consistency by enabling you
to create a design system that can be
reused throughout your
scene this is the button we're going to
create together in a few moments we'll
create a component for this button by
right-clicking and selecting create
component from the object context menu
or by using the shortcut shift command
K when you create a component there is
the main component and the instance the
main component is the central object
that all instances will refer back to
and where you can make changes to update
all
instances to create an instance of the
main component duplicate it by simply
dragging it using the command key to a
different
[Music]
location to identify which layer is main
component and instance component
contains four squares and instance only
two instances are objects that follow
the main component property properties
changes to the main component affect the
instances unless some properties have
been modified
separately components provide
flexibility you can modify individual
instances without affecting the main
component within an instance you can
customize properties like color
roundness and more while keeping the
main component size and other features
this lets you create various unique
instances based on the same original
object when I change the size of the
main component
you will notice that we still maintain
the size relationship because the size
is not being override in this
object you can detach an instance which
mean it's no longer connected to the
main component and any changes to the
main component won't affect the detached
instance to do this select the instance
rightclick and choose detach instance
from the menu or use the detach icon in
the instance
panel you can reset any changes you've
made to an instance this can be done
from the instance panel you can reset
everything or just specific properties
to match the main component again in the
instance panel you can swap instances
with different components this is useful
for experimenting with different designs
or
variations we've covered the basics and
can now move on to the 3D card if you'd
like to learn more about this subject I
recommend you watch their official video
on component you can also explore the
component library in spline which is
interesting
let's continue from where we left off
open the 3D card file we used in the
last section in
spline to create text click on T on the
toolbar write 25 or any other amount
then we're going to adjust the size 260
and 50 set the font size to 80 and we're
going to use the inner font for
today select the semi bold weight for
the horizontal and vertical alignment
set to Center
go to the material panel hide the
lighting for now and change the color to
white now we're going to add a currency
symbol next to the
price adjust the size to
260 and
30 the font size is going to be
40 the weight is going to be semi-
Boldt and the alignment center for both
directions again the color is going to
be white but this time we're going to
reduce the opacity to 30
to avoid repeating the same steps we'll
simply duplicate them simply drag and
hold on the command key change the text
to Pro and change the size to 20 again
we're going to duplicate change the text
to per month build
monthly also change the size to 17 and
the regular
weight we will move the 3D icon upwards
because we need space for the
information including the
button
then select all the texts and move them
upwards
too now name the
layers now we need an icon the icon we
need is a check mark you can find free
icons online or in figma and import an
SVG
icon I'll show you how to export to SVG
and you'll see how easy it is first find
your icon I'll take this file as an
example let's see if there's the icon we
want select the check icon then go to
export and select SVG and click on
export then save where you
want once you have your icon drag and
drop it onto the scene position the icon
on the card it's normal that you can't
see your icon so we're going to change
the color to white and change position
we'll place the icon at the bottom of
per month build
monthly now we'll duplicate the text and
place it next to the icon and change the
text to all courses and
videos set the horizontal alignment to
left go to color set the opacity to 50
instead I'm going to name my layers then
I'll select the icon and text together
I'll put them in a
component let's create two instances by
duplicating the main
component we're going to change the
text type course designs source
files and CER certificates and
tests now let's create our button by
starting with a rectangular shape click
on rectangle in the
toolbar place it at the bottom of the
features we're going to change the
dimension to 338 by
64 we're going to set the corner to 16
and the Extrusion at 12 then the bevel
at
1 go to the material places the
Highlight layer at the bottom complement
of the material list set open capacity
to
100 add a material that will be
glass next we're going to add the matat
material and select this
reflection select the multiply blending
mode and reduce the opacity to
69 add a new material this time we're
going to choose
fresnel reduce the opacity to 60 and
choose overlay we're going to add a
darker reflection choose mat cap
keep it at 100 and choose the blending
mode
screen we'll group the elements into a
group and name it card except Direction
light camera background and
[Music]
cube with the materials we've used look
at the beautiful reflection of our
button cool
right we've almost finished our button
but the text is still missing let's add
subscribe change the size to 260 and
30 set the font size to
17 and align it centrally in both
directions and of course the font should
still be
inter hide the Highlight then change the
color to white and reduce the opacity to
50 after that let's visualize our 3D
cards with text and button you might
notice there's no reflection on our
button which is due to the background
we've chosen I'll demonstrate this with
a different background and we'll create
two more
cards we're now going to duplicate two
more
cards we can remove the 3D icon from the
instances we'll reduce the height of the
glass
card I'll round up to 370 do the same
thing with the other glass
card let's visualize our pricing cards
you can still experiment with the portal
effect using a different background like
a
blob you can find backgrounds in the
spline
Library as you can see there's a lot to
choose from and you can even modify it
as you wish there's a blob here we may
use but this one looks interesting too
open the file group The Elements and
copy and paste into your document you
may modify it like the materials but
I'll take it as is you're going to place
your background in the cube as we did in
the last
section I'll increase it a little and
then I'll visualize
it this is only optional in case you
want to change your background basically
your 3D cards are distinct from the
background you
choose back to the component we created
a component for this feature because if
for example I need to change the icon
the change will automatically apply to
all the other icons this way I won't
have to manually update each one
individually for the button if I change
my mind and want to modify the color or
size it will update automatically
additionally we can have variations of
the
button as I explained at the beginning
if you modify the main component the
rest
follows I may easily modify the
instances without affecting the main
component let's change the text label to
create
account when I want to edit my text in
the main component the changes I make
will only affect the instances I haven't
modified
yet the final step is to check and
manage the components you can modify if
the text icon or button as
needed I may also create a button
variation and make a kind of disable
button there's a lot you can do with
buttons in fact for example I'm going to
add a color a dark
blue another example of why to use
components I haven't created a component
for my entire card I only created one
for the feature and one for the button
but if I want to modify for example my
text isn't aligned here I have to do it
manually for the other two cards if I'd
made a component I'd have saved a lot
more
time so we're done with this section in
summary components and spline are
versatile tools applicable in different
situations including 3D scene creation
Design Systems and icon design they
promote efficiency consistency and
creative exploration in your 3D projects
see you in the next section we're going
to learn about screen resize adaptive
layout in this section we'll explore the
screen resize event a tool that helps
you create layouts that adapt to
different screen sizes this feature
enables you to trigger actions based on
canvas size making it a crucial tool for
adapting your projects to various screen
dimensions in today's world where people
use different devices to access content
having a layout that adjusts is crucial
it ensures that your spline Creations
appear and work beautifully on desktop
and mobile devices making users happier
and improving performance this guide
will teach you how to make sure your
spline designs look and work perfectly
on screens of all sizes we will focus on
creating adaptive layouts for the 3D
pricing cards we previously worked on
together so let's get
started let's open your 3D pricing card
project and we will continue our work on
this document I'm going to reposition my
cards this part is optional and you
don't have have to do it it's only for
replicating the same 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 not be familiar
yet select the first card from the left
which is card three and leads to the
section position set-
415 and -
21 then 82
2 now select the initial card in the
middle set zero on the X
position and -21 on the Y
position then 758 on the
Z Now select the last card set
415 and
-21 then
825 we're going to group the three cards
and Name by cards
just to avoid any confusion I'll rename
the first card on the left to card two
and the last one to card
three when you want to animate and add
interactions to your scene add States
events and actions will explore all its
settings starting with
States I want my first card to be at the
top of my initial card and the last card
below the initial card so what I have to
do is to add a
state so select the first card from the
left the card two and add a state then
place it at the top of the initial
card when you click on the base state it
returns to the same
position to help you position your
element go to isometric mode I align the
glass card and leave the glass UI a
little to the
front
we're going to do the same thing with
the last card select card three and
place it below the initial
card now we'll explore the screen resize
event settings including type
breakpoints actions and
transitions to add the screen resize
event select the group and click the
plus button next to events a panel will
appear showing a flag with start click
on that and you'll find several options
choose screen
resize you you can define whether the
break points on the event will be
horizontal or vertical this is crucial
because it determines how your actions
will be triggered based on the canvas
size horizontal the event will trigger
actions based on the canvas's width
vertical the event will trigger actions
based on the canvas's
height we're going to choose the
horizontal
type pixel values and operators Define
break points 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 let's explore the operator
available less than is actions trigger
when the canvas size is less than the
defined pixel value and more than is
actions trigger when the canvas size
exceeds the defined pixel value then
between is actions trigger when the
canvas size Falls within the specified
range we will customize the first break
point and set the operator to less than
and values to 1024 then we're going to
customize the second break point to more
than
1024 usually a breakpoint should be
created for each mobile tablet and
desktop I put it less than 12200 and
more than 12200 to avoid making a third
one by creating two break points this
will work for all three devices and also
because we use cards
we can't divide the Cards into two first
rank cards and one second rank card for
the
iPad I'll leave the third breakpoint
setting as is custom between and the
value to 768 between
1200 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 now let's add an action
screen recy event can trigger various
actions to adapt your canvas content to
the new screen size we're going to focus
on the 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 now let's customize our
transitions Target is where the
transition will happen the object you
want to change let's select card three
transitions is where you decide which
states the transition will go through
you can set the duration and other
properties for each part of the
transition then 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 I will
leave the setting like
this when you click on the line
connecting States you can adjust
properties for each part of the
transition you can select the
transition's
appearance we'll stick with ease in
out you can also specify the duration of
the change from one state to
another we'll set it to
one next you can Define the delay before
it begins set it to zero you can decide
whether the transition should return to
its initial starting point we'll set it
to none
finally you can establish how many times
it repeats set it to
none now that you know the settings and
properties of screen size event
breakpoint actions and transition we'll
focus on adding other transitions as we
still have a few to
add for the transitions we're going to
set to current to
State then we're going to add another
transition this time the target is card
two the transition is current to State
for the second breakpoint we'll add the
same transition but instead of choosing
State we'll choose base
State add another
transition select the target to card two
select the transition to current to
State okay let's review what we've
accomplished thus far right now we have
the cards stacked on top of each other
resulting in this layout which isn't
very visually appealing is it what we
aim to achieve is a layout like the one
shown with some spacing between each
card and the top and bottom ones not
having the glass card only focusing on
the glass
UI by the way you can find this
interactive background in our spline
course file I'm going to raise my glass
card up this part is optional but I did
it in my original file so I'll do it for
here
too select only the glass card in card
two and card three
make sure it's properly aligned to have
the same alignment set the Y position to
64 for both glass
cards now put all the cards in
state ensure to rename the layers to
Glass Card
3 glass card 2 and glass card 1 to make
it easier for us when we add transitions
for the new States otherwise we might
get confused if the names are the same
select glass card one and add a state
then move it down to align with the
glass
UI repeat the same step with the other
two glass cards two and three add a
state and hide the glass card behind the
glass UI the spacing is a bit too far
apart I'll bring them closer
together I'm going to reselect all the
layers I put in a state to return to the
base
State the final step is to add new
transitions in our screen resize events
setting for the three new States we've
added so it's going to be the same as
what we did earlier adding a new
transition next set the target to Glass
card one and it's crucial to choose the
transition current to State repeat the
same step by adding the two other glass
cards
we're going to add the same Target but
this time make sure to select base
State now let's check to ensure that
we've configured our settings
correctly perfect we have configured our
settings
correctly you can share your scene with
others and you can also view it on your
iPad or mobile to check if it works
properly just copy the link and pass to
I'm connecting my mobile to my computer
to show you you can see it works
perfectly on my cell phone that's
fantastic we've completed this section
now that you've learned how to create
adaptive layouts you can practice with
your own designs have
fun in this section you'll learn how to
animate this beautiful glass tab bar
from figma and turn it into a 3D design
using spline this design includes a
captivating Crystal Floating Action
button which adds A Touch of Elegance
and a captivating Crystal marble effect
similar to series interface this design
will Elevate the visual appeal of your
mobile applications creating a truly
shining user
experience we're going to focus on
making the tab bar look Lively with
animations we won't be working on the
top part of the credit card design but
you'll still have access to the whole
design for inspection we will import the
original tab bar design from figma and
animate the icons after that we'll
create the Floating Action button from
scratch making it look like a
see-through marble that floats above the
design so let's Dive Right
In as usual open a new file and rename
our project tab bar
animation then delete the default
rectangle because we don't need it we'll
start by taking the finance app design
from one of my courses using this tab
bar as a starting point in spline for
our design project choose the tab bar
base layer then click the plus icon in
the export panel and opt for the SVG
format to initiate the export to spline
SVG stands for scalable vector graphics
which is a widely used format for
vector-based images that retain high
quality and scalability select the
export button and save it to your folder
back to spline navigate to the left
sidebar in the bottom section choose
import you can either opt for Vector SVG
or simply drag and drop the SVG file
Direct for the import
process when you import the tab bar base
into spline you can see that it appears
in solid black this transformation is
the result of several Design Elements
such as drop shadows and background
blurs which spline cannot fully match
due to differences in the feature set
consequently we'll need to make manual
adjustments to align the design with our
intentions keep the original shape and
delete the rest then rename the
remaining shape to tab bar base let's
add the glass material to the shape set
the blur value to 20 would result in a
moderately blurred or frosted appearance
next adjust the thickness to 20 which
implies that the glass material has a
substantial thickness set the value of
refraction to three this indicates that
light passing through this glass
material would experience a moderate
degree of bending or Distortion next
let's add the mat cap material choose
the initial option from the top left
corner of the mat cap material selection
which sets the foundation for the
material's appearance adjust the opacity
of the material to 30% to control the
transparency level allowing other
elements to show through partially set
the blending mode to screen which often
results in brightening the underlying
elements and creating a specific visual
effect next add the color material and
take this color code which is a dark
shade apply a 30% opacity to this color
and choose the overlay blending mode to
achieve a specific blend of the material
with the underlying
elements to improve visibility let's
introduce a vibrant background since the
shape has a glass effect making it
currently difficult to discern against
the
background nice
right all right we're going to add the
Extrusion which determines how far the
shape extends in the third dimension
creating a 3d effect for example a value
of 20 means the shape extends 20 units
in the specified
direction for our design let's set the
Extrusion to 10 there you go
next we will integrate icons from figma
into our project these icons are sourced
from SF symbol and will be converting
them into outline Strokes to enable path
animation this is necessary because SF
symbol is designed for use as text by
Apple and cannot be used on other
platforms now let's export the icons
using the same method we employed for
the tab bar
base and simply drag and drop the icons
to seamlessly integrate them into your
project let's separate the icons and put
them at the top for now all right before
moving on to the next steps it's
essential to convert all the icons to
paths select all shape layers at the
same time by holding down the shift key
and clicking on each of them to modify
them all at once then in the rightand
sidebar select convert to
path after conversion the shapes will
increase in size to address this
manually reduce the size to one and
increase the depth to one while leaving
the other parameters unchanged
to ensure your Tabs are positioned
correctly you can add a new material and
then select and upload an image of the
entire tab bar that you'd like to use as
a
reference all right next let's add text
to our tab beginning with the Home tab
use the text tool to create a text box
and drag a dimensions of 40x 20 and type
the label home for our initial tab
adjust the font size to six choose the
font to enter instead and then align the
text both horizontally and vertically to
the center set the scale to 1.64 for all
the positions and set the color to white
with 40% of opacity now let's align the
icon and the text in accordance with the
tab bar image as a visual
reference for precise placement you can
also use the grid plane feature in the
global settings and select the front
back
option the front back option in a plain
grid setting allows you to specify
whether an object should be placed in
front of or behind other objects when
they overlap in the same plane this is
particularly important when creating
complex designs or scenes where you need
to control the visual hierarchy of
elements to group the icon and text
simply press the command G shortcut and
rename the initial tab as home to
expedite the process duplicate the Home
tab rename the duplicated tab as search
adjust the label as needed and copy the
new icon use the paste in place option
to precisely position the new icon in
the same location as the previous one
you wish to replace the paste in place
function ensures that the new object
occupies the exact spot as the one you
intend to replace you can either drag it
down here and manually position it by
referencing the tab bar and repeat the
same process for the rest of the tabs
all right now that everything's in the
right place we'll fine-tune the corner
of our tab bar base choose the two lower
Vector points and set the corner radius
to 200 creating a smooth and rounded
shape to enhance the visibility of the
tab bar shape and achieve a seamless
blend with the background will create an
outline stroke hide the reference and
open the tab bar base we created earlier
Begin by duplicating the tab bar base
and rename the layer as outline and then
convert it into a path to create a
stroke set the size to 050 for both the
X and Y positions this defines the
thickness of the outline stroke start by
removing any unnecessary elements
retaining only the color change the
color to white maintain the blending
mode as overlay and increase the opacity
to 100% all right make sure you bring
the outline to the front of the tab bar
base for improved visibility now let's
open the background to evaluate the
contrast with the entire
element now let's move on to crafting
The Floating Action button which
resembles a mesmerizing Crystal marble
that will later be
animated to begin select the plus icon
on the left of the toolbar choose the
sphere option and set the size to 56 for
all positions
position it in the center of the tab bar
curve you can also use the grid setting
to assist with precise placement there
you go for the lightning material set
the blending mode to Overlay and set the
opacity to 100% let's rearrange the
material order by moving the lighting
down and change the color to the glass
material set the blur to 50 thickness to
60 refraction to 1.10 and blending mode
to screen duplicate the glass material
and switch to the matte cap material
select the white right globe and set the
blending mode to
multiply create a duplicate of the mat
cap and apply it to the first black
sphere with the blending mode set to
screen duplicate the existing material
and switch to the
fresnel configure the color with this
code and apply the blending mode
overlay next let's create the second
sphere Begin by duplicating the existing
sphere layer and maintain the same
lighting settings then change the glass
material to normal which will give a
different visual effect switch the m cap
to fresnel and adjust the blending mode
to
Overlay then configure the color as
black and set the bias to
0.14 for the third material keep it the
same change the effect for the third
globe and keep the same blending mode
configure the last material as
depth choose the type as linear and
fine-tune the Y position of the
direction to 50 for a horizontal
gradient
effect next incorporate five colors
using the dropper to acquire the color
code for each
position the third color slightly
adjacent to the second creating a subtle
separation add the green color right
here and extend the final green shade
beyond the shapes boundaries let's play
around until you're
satisfied now reduce the scale size to
0.95 for all positions allowing room for
the glass sphere to evoke a crystal-like
appearance select both spheres group
them together and rename the group to
sphere or any name you prefer let's say
action button
let's dive into the creation of the
selected shape which will serve as a
captivating glowing light effect when a
tab is selected this shape will follow
producing a delightful effect behind the
glass tab bar adding a touch of
transparency we'll start with the design
and later we'll incorporate four states
for interactive
functionality let's remove the
background for now all right select the
sphere tool again and drag a circle with
dimensions of 48 for all positions let's
position it here for now set the light
liting opacity to 100% to ensure a full
and Vivid lighting effect switch the
color material to the top and change to
normal for a standard color appearance
duplicate it switch the material to
fresnel and change the color to black
with a bias of
0.14 leaving the other settings
unchanged finally set the blending mode
to Overlay next add a mat cap material
with the third Globe effect providing a
crystal-like appearance and set the
blending mode to
screen finally add a depth material
switch the type to linear and introduce
five vibrant colors using the following
codes feel free to experiment with the
gradient by tweaking the direction and
origin
positions all right let's rename the
shape to selected to position the shape
accurately let's navigate to the back
behind the initial tab like so let's
rotate around to get a complete view of
the entire scene and see how it
looks all right to enhance interactivity
we will add four states to the selected
shape each state corresponds to the
position of the selected shape when a
specific tab is chosen click on the plus
icon in the states panel to begin the
process of adding States the base state
is the default starting point for the
animation and the second state
represents the change that occurs let's
rename state two and all we have to do
is modify the X
position on state two move position x to
the second tab let's say -
8.75 next let's add another State and it
will be automatically named state three
configure the new position to maybe
7225 then add the final state which will
be named State four and this time let's
go for
13925 for the X position great now it's
time to group and organize our layers
although the layer order doesn't impact
the design as significantly as it does
in figma it can affect material
properties making it important to
maintain a well organized order however
we also want to keep Ouray layers well
organized in the left panel to prevent
confusion when working with multiple
layers in the design drag down the
selected and action buttons to be
positioned above the outline then select
all of them and press command G to
create a group selection and rename the
new group tab bar now let's dive into
the exciting world of animating the
entire element beginning with the
captivating icon path animation it
follows the same process as the wave
animation using depth values adding a
dynamic Dimension to your design
Begin by selecting the icon within the
Home tab and add a state to initiate the
animation sequence in the base State we
want to make the path gradually appear
to achieve this hide the path by
decreasing the depth to zero so now the
shape
disappears please note that the base
State functions as the main component
while the state is similar to an
instance typically when you make changes
to the main component the instances will
also update in that cases remember to
reset the value to its initial state
which is a depth of one repeat these
steps for the other tabs ensuring that
each tab's icon path animation is set up
similarly next select the home group and
add events then select Mouse down as the
trigger which functions similarly to
onclick select the action as transition
make sure that the transition Target is
set to selected which will link to the
shape we've created States for earlier
this shape is the one the transition
corresponds to
adjust the duration to 030 milliseconds
and choose the transition to be a spring
effect spring typically creates a bouncy
elastic motion as if the object is
attached to a spring next adjust the
stiffness to 50 now let's apply the same
events to the other three tabs to
expedite the process right click on the
home group choose copy
event then select the remaining three
tabs and paste the
events this will apply the same event
settings to all of them
next all that's left is to manually
adjust the destination for each
transition for instance if you click on
the second tab the selected State should
be set to transition to state two
similarly clicking on the third tab
should direct the destination to state
three and so
on all right let's preview
it when I click on the second tab the
selected shape moves simultaneously
similarly when I click on any other tabs
it promptly moves to the corresponding
tab everything appears to be functioning
perfectly now let's establish an
animation for the outline shape using
the same method as we did for the icon
path animation start by introducing a
new state and modifying the base state
by reducing the depth to zero also
ensure you reset the depth to its
initial value in the state option
otherwise you won't notice any changes
because the instance automatically
aligns with the primary state so be sure
to set the depth value back to one next
add an event maintaining the default
start event select the transition for
the action ensure that the target is set
to outline be certain that the second
destination is the designated State and
specify a duration of 5
milliseconds keep the default transition
ease and
out okay let's preview
again so we can see the outline path
smoothly following the Contours of the
tab bar shape pretty cool
right next let's animate the two spheres
as well beginning with the sphere one
add a state and make a change to this
state the only change is setting the
opacity of the first mat cap material to
0% for better visibility of the changes
let's temporarily hide sphere 2 by
closing it next add an event and keep
the event to start option choose the
action to
transition ensure that the target is
correctly set to sphere and the
destination is set to State set the
duration to 10 select the infinite
option for the loop this ensures that
the animation continues playing
indefinitely with no interruptions set
the cycle option to pingpong this means
that the animation will alternate back
and forth between its start and end
States creating a continuous seamless
loop with a back and forth motion great
next let's do the same process by adding
an extra State and events on the second
sphere let's hide the sphere one
first as usual let's add a new state to
create a more compact gradient let's
find the far and near values to enable a
smoother transition of
colors then add the event and set the
same setting as the sphere one now let's
establish a state and event for the
entire sphere's group as usual Begin by
adding a new state from this state make
an adjustment to the Y position raising
it slightly to bring the group to the
top afterward include an event with
settings similar to the sphere event
except for the duration which should be
set to 2 milliseconds
instead let's quickly preview the
animation
okay I think the Y position is too high
let's make some extra
adjustments you can further enhance the
gradient by increasing the Y position of
the rotation like this then proceed to
decrease the Y position of the group's
position let's play it
again nice much better
right all right it's time to animate the
entire tab bar Begin by choosing the tab
bar group adding an event and selecting
the start option next select the first
transition and set the target to play
icon the one in the Home tab configure
the first state as the base state which
serves as the default State and
designate the second state as the state
representing the state for the
transition or
change leave the sequence unchanged for
this first transition now proceed to add
the second transition set the target to
search which represents the second Tab
and set the same state
then adjust the delay to 0.20 for the
third transition designate the target as
cloud with the same States and set the
delay to
0.40 continue this pattern incrementing
the delay by 0.20 seconds for each
subsequent transition great our actions
are set up correctly for our icons keep
in mind that the tab setting has two
paths which is why we have setting one
and setting two inside the setting tab
giving us a total of five
actions okay let's preview the changes
I'll switch the background to Black to
improve the contrast for a better view
so now we can see the icon path
transitioning from the base state to the
state this is more like a demo of the
presentation but you can also configure
the path animation to trigger a mouse
down
event okay now to add a final touch of
uniqueness let's introduce a look at
event similar to the hover effect the
object will follow the cursor as it
moves making your project even more
engaging and
attractive okay why don't we include the
credit cards in the demo so we can
visualize the whole design the design
has already been created so all I need
to do is copy it from the original file
and paste it right here let's ensure the
cards are positioned
correctly there you go make sure to
group both the cards and the tab bar
together because we intend to apply a
lookout event to the entire element so
group them and rename them as UI
afterward add an event and configure it
as a look at event
the target is already set on the cursor
by default so there's no need to do
anything here as the settings should be
fine so you can use them for now all
right let's see what it looks like with
the new event now you can see the entire
element following my cursor as it moves
that's pretty awesome you also have the
option to test the event first and make
adjustments as needed by experimenting
with the settings later on here I've
increased the speed to 13 making the
movement a bit faster however I prefer
the default speed of five as it results
in smoother and perfect
movement perfect as an additional tip
you can improve the entire scene by
adding the effect property toggle the
effect switch to the on to have access
to a variety of effects for your scene
let's incorporate Some Noise effects to
make your glass elements appear more
realistic reduce the opacity to 25% and
select the blending mode as soft light
soft light enhances the contrast and
subtly affects the brightness and
darkness of the underlying layers it
typically darkens or lightens the base
layer depending on the brightness of the
blend layer feel free to experiment with
other effects as well depending on your
requirements let's take a final look to
witness the entire animation playing
seamlessly in the same scene
congratulations everyone we've
successfully created this entire design
and animation from scratch including
path animations on the icons and outline
a floating action button
animation and the selected State for the
tab
bar all right I hope this is has been
easy for you to follow this marks just
the beginning of your creative adventure
and we're excited to see the Fantastic
projects you'll create with your new
found skills see you in the next
one variables are like Magic ingredients
that make your interactive designs come
to life they are values that can change
or be modified you can think of
variables as assets that can be assigned
to multiple objects a variable can be a
number text or Boolean value the cool
thing about variables is that you can
use them to control and change parts of
your project you can connect them to
actions and make things happen when
specific conditions are met it's like
giving your designs a mind of their own
in this section we will do three
exercises that provide an in-depth
understanding of
variables so let's get
started what are variables variables are
the foundation of interactive
experiences in spline they are values
that can change or be modified you can
think of variables as assets that can be
assigned to multiple objects however the
critical difference is that variables
provide finer control a variable can be
a number text or Boolean value true or
false you can combine variables with
events to trigger actions and employ
conditional logic to create actions
driven by mathematical
Expressions the best way to understand
the variables is to create one so let's
open the
project for this section you'll need
three files the UI charts and variables
exercise and the UI charts and variables
exercise 2 and then the variable time
all available in our spline courses
Library we're going to start with the UI
charts and variables exercise when you
open the project you'll see that the 3D
design is already done and the camera is
set up for you so no adjustments are
needed we'll focus on working with
variables open the variable table from
the right sidebar when no objects are
selected the first thing we'll do is
create our variable and then apply it to
our objects variables offer different
types of variables to help creators
manage and animate objects these
variables have specific uses and can
make your projects more interactive and
dynamic let's look at the three main
variable types spline provides then
we're going to learn about Dynamic
variables after that numbers are used
for handling numerical data in your
projects you can use them to control
object properties such as position
rotation scale and opacity
select the number variable type double
click the variable name to rename it by
show number and the value is zero this
variable will represent the number here
we're going to add another number
variable and change the name by angle
and the value to 45 this variable will
represent the angle from the progress
layer string variables are for working
with text you can use them to create
labels display messages or update text
in your projects dynamically add the
string variable type rename it by
porcentage then change the number to
12% we're not going to use booleans for
this exercise but I'll explain it for
you booleans have two states which is
true and false you can use them to
trigger actions or change an element's
behavior in response to user
input the last variable I'm going to add
is counter which is part of the list of
dynamic variables let's explore the
three options Dynamic variables like
time counter and random are constantly
changing value
these can be utilized to create
time-based animations and other Dynamic
effects in your projects use time
variables to create Dynamic animations
and transitions which will be our third
exercise so I'll talk about that later
random variables Generate random values
within a defined range these are great
for introducing Randomness and
unpredictability into your project like
creating miname logic or procedural
visuals the counter variable starts
counting in seconds at a defined
interval this is useful for iterating
through Dynamic sequences or Loops such
as animation driving in our case we'll
use it for our progress bar now let's
add the counter variable and name it
progress and value is zero now open the
counter
variable so the counter starts counting
from zero and increases at a specified
time interval in seconds so we're going
to leave the value to zero we're going
to set the interval to
0.01 because 1 second would be too long
to animate our progress bar from 1 to
100%
for the steps we're going to put a value
of
0.30 set yes for the N
value for the N value it's going to be
100 so as you can see this is a progress
bar with a percentage so we need to set
the N value to
100 and on end it's going to be stop now
that we've finished creating our
variables we're going to assign a
variable to an
object we're going to select the text
and hover over the text property you
will notice a variable icon in the
corner
click on the icon to open the variable
selector where you can choose the
variable you want to assign to that
property which is the
percentage next we'll select the
progress layer head to angle and add the
angle
variable now we're going to add a little
animation because right now there's no
life in our
object so here's the demo this is the
animation we're going to set up where
the progress bar increases from 1% to
100% select the progress
layer we'll now add the variable change
events which is a special type of event
that happens when a variable's value is
altered it's particularly useful for
dynamic variables like counters enabling
you to create animated changes in an
object's
properties with variable change events
you can trigger actions or animations in
response to changes in variable
values now we're going to select the
progress
variable next we'll select the set
variable iable action which allows you
to modify a variable's value using an
expression this expression can involve
other variables or variable helpers it's
an action that assists in adjusting
variables and object attributes you can
utilize another variable or create a
custom calculation for this
purpose select the angle variable to be
updated add an expression to update the
selected variable which is
progress for our our animation to work
we need to add math operations that can
be used in
formulas I invite you to take a look at
the documentation on splines it's very
important that you know the formulas for
your animation to work so if you want to
an addition a variable use the plus
symbol to subtract use the minus symbol
and I don't know why multiply is still
subtract anyway use this symbol if you
want to
multiply and then you have the division
which is the SL
symbol and random and group calculation
with parentheses we'll get to all that
in a few seconds here are a few examples
for
you let's do our first mathematical
formula I want to multiply my total
angle which is 360 divide by my
percentage which is
100 so my formula will be asterisk
360
100 next we're going to add new action
select the porcentage variable to show
number
variable we're going to add another
formula for my text which will increase
the number of percentages so we have to
choose addition the formula is plus
quotation mark percentage and quotation
mark I know it's not easy with the
formulas I'm here to guide you but
you'll see with a little practice you'll
become a real Pro and better than me add
another set variable
action select the show number
variable then type round the formula is
open parenthesis and select progress
variable then close parenthesis the
round option allows us to have rounded
numbers without
decimals well the last thing to do in
this exercise is to go and see if
everything
works perfect we've done well and can
now move on to the second
exercise open our second exercise the
charts and variables exercise 2 as
mentioned the design is already done the
camera is already configured for you so
we'll just focus on the variable so I'm
only going to show you how to do the
First Column then it's the same for the
other three columns this will serve as a
homework assignment to help you practice
to begin let's create the variables open
the variable table from the right
sidebar we're going to add the number
variable type double click the variable
name and rename it to column one then
set the value to 100 we're going to add
another number variable type so we can
just duplicate it rename it to column 1
and percent then set the value to zero
next we're going to select the string
variable type and rename it to column
text one set the value to 20% now that
we've finished creating our variables
we'll assign them to our objects select
the text layer and go to the content in
the text property then click on the plus
icon and choose column text
one now select the column
layer go to the Extrusion and select
column
one we'll set up the plus button
animation to increase both the column
and the number when clicked using Mouse
down events and conditional
actions select the butt plus
layer and add the mouse down
events we are choosing the mouse down
interactivity because we want users to
click on the plus button and when they
do everything in the column will
increase by a certain
percentage for the mode we're going to
set to repeat each time the trigger is
going to be on this object now we're
going to add the conditional action
which allows you to activate actions
under certain circumstances like
distance value comparisons or changes in
state in the settings you'll find the if
condition and the else you can also
include actions the if conditions Act
Like rules determining what happens when
specific conditions are met they help
you recognize when an object changes to
a particular State and then allow you to
make something happen in response either
in the same object or a different one
else expression mean that the condition
is false we have nothing to Setter in
this
part let's add a condition and choose
the column one then we have another
formula to add if you look in the
options by clicking on the drop down a
little lower in purple you'll see the
formulas we're going to choose less than
and type 500 which is the maximum of our
progress bar then we're going to add
action which is the set
variable and select the column one
variable then add expression and choose
column one
again we're going to add a formula which
is+ 50 so let me explain my formulas
here you can see that my maximum is 500
so this is 50% of 500 which means my
progress bar is
250 if I click on column 4 my Extrusion
is set to
250 and the maximum is
500 here when you click on the plus
button I want the progress bar to
increase by 50
and 50 is
10% before going any further it's always
a good idea to test your animation to
check if your setup is working
properly great it
works but if I click on the minus button
it does absolutely nothing and my text
doesn't increase either so that leaves
us with two things to configure so let's
keep going
now select the minus layer I'm going to
do the steps a little faster because
it's the same configuration except for
the formulas add the mouse down events
the mode is repeat each time and the
trigger is on this project add the
conditional action and select the column
variable for the formula this will be
the opposite of what we set for the plus
button so it's going to be greater than
zero add the set variable action and
select the column one
variable
add expression choose again column 1 the
formula will be the opposite of the plus
button which is minus
50 well let's test it and see if it
works okay the plus and minus buttons
work now we just need to configure the
text now select the text and add the
variable change event then select the
column one
variable after that add the set variable
action select the column one in percent
variable to column one
variable add new actions choose the set
variable select the column text one
variable to the column one in percent
variable well am I missing something
let's
see something wrong right right what do
you think I forgot to do remember our
first exercise it's the same principle
that's right we forgot to add our magic
formula let's start here the formula
will be sl5 which is divider by
five so if you divide the total which is
500 by what it will give me a total of
100 the answer is five this formula will
enable me to have my number as a
percentage based on my progress
bar let's let add the other formula
which is going to be plus quotation mark
percentage and quotation
mark okay it's
working well done you've completed the
second exercise however please keep in
mind that you still have the other three
columns to complete for your personal
exercise now let's move on to our final
exercise now open the variable Time
Project we've reached our final exercise
this part is very quick and easy we'll
use the time Dynamic variable for this
part in the earlier section I provided
an explanation of dynamic variables I've
already covered counter and random and
now I'll focus on explaining
time open the variable table from the
right sidebar when no objects are
selected then select time time is a
valuable tool for creating Dynamic
animations and smooth transitions you
can use it to incorporate a time element
into your projects it involves defining
a string that you can apply as the
content of a text object time is
categorized into three types clock timer
and stopwatch each with its own set of
property options which we'll explore
next open the time property
options with the clock type you can
choose to update time based on either
local time or a specific time
zone the timer type allows you to
countdown from a predefined time such as
from 30 seconds to 0
seconds the stopwatch type counts up
from a predefined time for example from
0 seconds to 30
seconds for the type set to clock and
for the format we're going to choose the
first option with the hour minute and
second you also have several options
such as hour and minute just hour just
minute or just second including year
month and many more in our case it's an
alarm so the first option suits Us best
then you have to choose between 12 hours
or 24 hours so a day is 24 hours so
we'll select this
option for the time zone you have
several options but we're going to stick
with none which is the local
time so when I click on the play mode
the time doesn't move what's left to do
is to assign the text to the variable
time we've just
created this time you don't even need to
use events or
States let's go back to play mode to see
if everything works great everything is
working perfectly so that's it by the
way I strongly recommend that you refer
to the spline documentation for a better
understanding of variables additionally
explore the other sections you've
learned you'll find in the documentation
the topics we've mentioned in this
section you've now learned how to use
variables in spline to create
interactive and dynamic 3D content feel
free to experiment and push the
boundaries of your creativity with
variables and spline see you in the next
section where we will learn how to
animate objects with scroll interaction
and scene
transitions in this section we will
learn how to create scroll based
interactions and scenes for your web
design projects by the end of this guide
you'll have a solid understanding of the
essential Concepts and steps to add
multiple scenes and scroll events to
enhance your web designs the scroll
event relies on the user's scrolling
action to progress through the
transitions you've added inside it
as users scroll up or down your web page
they trigger animations and transitions
that can make your content come to life
whether revealing hidden content moving
elements on the screen or fading
elements in and out the scroll event
adds a dynamic layer to your web design
so let's get
started we're going to do two exercises
on scroll interaction and scenes you'll
need the two files we'll be working 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 we'll start with scroll
interaction and scenes exercise so open
this file to create scroll 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 anim
camera placement and using States and
events I'll explain how I placed my
elements so I prepared three screens
that I want to
scroll the first screen the second
screen and the third
screen I created an invisible frame that
will be the size of my screen to guide
me and better visualize how my element
will look and also to align it properly
because looking like this it's hard to
imagine how my elements will
animate now we're going to reset our
scene when we reset we see the first
scene for the moment our animation is
only the iPhone rising to the top I
can't do anything else to interact and
see the other two scenes because I
haven't set up the interaction
yet we're going to add new camera go to
the viewport next to personal camera and
click on add new
camera also you can add new camera from
the toolbar by clicking on the plus
button
this window is the preview of the camera
to be able to use it you need to use
personal
camera first it's very important to add
a state before making a new movement for
the
camera we're going to rename it by
screen
two then we're going to move the camera
down to the second
screen you can see the view change on
the
preview
you need to change the viewport to
camera to see a single
screen see the spacing here that means
our camera isn't centered properly
because we can see the size of our
screen here so we're going to lower our
camera until we can't see the frame
anymore move to position Y and lower the
number the camera will lower and stop
until the frame is no longer
visible we have our base State and we've
set our second state screen two we're
missing another screen so we'll add
another
state let's rename by screen
three to move it return to personal
camera mode and move it to The
Right Use the preview to guide you where
to
stop I'm going to click on the camera
again so that it recenters my screen you
may still see a spacing I'll do the same
thing this time adjusting the X position
adjust directly in the position value if
you do it from the scene the elements in
the frame will scale
too it's important that the value in
rotation is all zero so make sure your
three states have a value of zero in
rotation so we've got our three states
in place in the camera property we'll
leave the setting as it is now let's add
the scroll event click on the plus next
to events and select scroll the scroll
event allows you to add scroll based
interactivity to your project it lets
you define Transitions and animations as
the user Scrolls through your web page
with the scroll event there's only one
type of action you can trigger which is
the
transition add the transition action
this is the action that will occur when
the user Scrolls through the specified
number of
steps the target will be the camera then
for the transition is base state to
screen
two then add another transition and it
will be screen three we're going to
change the transition curve to
linear for the type we're going going to
set it to steps the primary property
associated with the scroll event is
steps which represent the amount of
scroll needed to go from the beginning
of a transition to The End by adjusting
the number of steps you can control the
speed and fluidity of your scroll
triggered animations fewer steps will
make your animations faster while more
steps will slow them down we won't use
the scroll type because the scroll mode
only works when exporting for spline
viewer so we will be focusing on the
step I'll hide the frames and we'll
visualize in play mode to see if our
scrolling interaction
works perfect everything's in order now
I'll show you how to make a scene
transition in the spline editor on the
left side you will see a list of scenes
you will see scene one and scene two you
can add a new Scene by clicking on the
plus icon and import Your Design we'll
just focus on one more Scene click on
the scene two you will see this screen
you can create multiple scenes within
the same spline file and you can trans
transition between scenes with the event
system by using a scene transition
action to add a new scene transition
select the object to which you want to
apply the scene transition to in our
case is the credit card from the scene
one go to events and click on the plus
icon to add the mouse down events the
mouse down event will trigger the
actions as soon as 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 then you
have the repeat each time we're going to
set to once so when a user click on the
card the transition will go to the scene
two for the trigger select on this
object which is the credit card oh I
unintentionally added an action so I'll
remove it to show you the step so you
see the list of actions and you will of
course select screen
transition now let's click on the scene
transition to open the edit action the
target will be scene two for the for the
transition you have none and for the
fade in I will choose
none Let's test if the interaction that
we set is working so I'm going to scroll
scroll and scroll again and here is my
credit card I'm going to click on it
good it works
perfectly so I added a close button so
when a user clicks on it it will go back
to the first
screen I'm going to show you quickly the
step because I already said it go back
to scene two click on the close button
it is exact the same setting add the
mouse down event with the scene
transition
action well we finished with the first
exercise would you like to do another
exercise yes I'd love to now we're going
to open the second
exercise so in this project we have two
screens the first screen and the second
screen do you notice anything strange
the two screens are not in the same
position the first screen is on the
front and the other is on the side so
when we make the transition it's going
to rotate a little to Pivot towards the
second element you can simply select the
access points on the left now we can see
the second screen in front then we can
go back to the right first click on
reset and add a
camera then add States it'll be the same
steps as the first
exercise we'll move the camera to the
second
screen it's very important to change the
rotation in the Y position to
90 sometimes you can't see any changes
in the preview just click on another
layer and come back and change the axis
to the left so the camera will be in
front I'm going to zoom in because it's
too small position your camera using the
preview as a guide then click on
camera next we're going to add the
scroll
event we're going to focus on the step
type and add transition action
the target will be the
camera the transition is base state to
screen two change the transition to
linear instead of ease in out now let's
click on the play mode so I'm going to
scroll until I see the second
screen perfect it works perfectly so
that's it for this section now you know
how to use scroll interaction and scene
transition don't hesitate to experiment
with your design see you in the next
section creating 3D models is an
exciting process but what makes it even
more thrilling is seeing your Creations
come to life in an augmented reality AR
environment Universal scene description
is a file format developed by Apple for
augmented reality AR and 3D content it
allows you to create 3D assets that can
be easily viewed in AR apps on iOS
devices spline a powerful 3D design tool
makes it easy to export your models in
the usdz format making them ready for AR
on iOS devices in this section we'll
dive into the process of exporting 3D
objects from spline to make your iosr
experiences even
better we'll explore how to export for
iOS AR optimize your objects to improve
performance by reducing file size and
refining textures and seamlessly
transfer your optimized 3D models to
your iOS device preparing them for an
engaging immersive AR experience start
by building your 3 D model using spin's
intuitive design tools you can create
shapes add textures and manipulate
lighting to get the look you want
alternatively you can select from the
pre-existing samples in splines library
such as icons avatars or any object of
your choice for testing
purposes once you've achieved the
desired design it's time to proceed with
the export for
AR all right for our demonstration let's
use this credit card design as an
example but before exporting it's
important to evaluate the performance of
the scene to ensure fast
loading let's go to the export button on
the toolbar to access different export
types so let me provide you with a quick
explanation of the meaning behind each
export category let's start with the
public URL the public URL link is
typically employed for scene sharing
through a direct
link on the other hand the embed code
option serves the purpose of integrating
your scen seamlessly into ious tools
such as notion webflow WordPress framer
typ dream and
more exporting as code you can export
your scene as code in formats such as
vanilla JS three.js react and react 3
fiber this can be useful for embedding
it into websites or applications you
have the option to either copy the code
create a code sandbox project with it or
download the files for local hosting
please take note that animations and
events are exclusively enable abled when
exporting to vanilla JavaScript and
react exporting as image this option
exports your scene as a static image
before exporting your project as an
image it's a good idea to set up the
frame mode the frame mode allows you to
define the area of your project that
will be included in the image
export you can choose between jpg and
PNG formats you can choose the pixel
density ratio and you can show or hide
the background then export your project
as an image
image video recording this option allows
you to capture your scene as a video
recording frame by frame here you can
choose the video format and you'll find
a wide range of options available for
customizing your recording settings you
can choose to either use a fixed
duration or a manual duration for your
recording for example if you select a
fixed duration and press start to start
recording it will be automatically
stopped at the set duration and if you
select a manual ual duration you can
keep recording until you decide to click
stop to stop the recording after your
video is recorded you'll be prompted to
save it gltf an open- source file format
designed for 3D scenes and models is
under the development and maintenance of
the Chronos group you have the option to
export the scene with a single color
material or exports the scene with
material layers including textures note
that some material layers are not fully
supported by the gltf Format such as
gradient material and glass in that case
you need to optimize your scene an
exporting gltf with color and texture is
a paid feature you'll need to have an
active super or super team subscription
to use it iosr Universal scene
description is a file format developed
by Apple for augmented reality and 3D
content it allows you to create 3D
assets that can be easily viewed in AR
apps on iOS devices we'll delve deeper
into this shortly exporting is STL 3D
printing STL is a 3D format commonly
used for 3D printing or C A D all right
let's go back to our scene before
proceeding with the export it's
essential to assess the performance of
the 3D model and optimize it if
necessary creating striking 3D scenes
using spline is just one side of the
coin the other side ensuring these
scenes load quickly and perform smoothly
we will guide you through optimizing
your spline scene using the performance
panel and other key techniques to
evaluate the performance initiate the
process by clicking the export button
next select public URL from the type
dropdown menu and then click run
test to help with optimization the
performance panel offers some key
metrics and opportunities for
improvement to keep the load times and
performance of the scene fast and
efficient red color means critical for
performance and overall scene State
yellow important but not critical gray
suggestions for housekeeping and
removing unused assets sets though not
directly related to performance on
parametric objects control the number of
sides to increase performance when your
loading time score is green it means
your performance is good you don't need
any further optimization but you can
always clean up unnecessary layers and
materials now let's explore another
example such as the tab bar to better
understand any potential performance
issues in this case the model presents
more obvious problems than the previous
one it contains a high number of
polygons and materials which can have an
impact on performance although the
presence of yellow indicators is less of
a concern it is possible to optimize the
number of polygons on the other hand it
is essential to solve the problems
associated with red coated areas as an
excess of materials can significantly
affect the performance of the scene as a
whole when working with smooth
subdivision objects avoid using more
than three subdivision levels unless
necessary if you import objects from
other software or libraries ensure you
use an optim optimized in lower polygon
version you can use the compression
settings to improve the loading
performance of your exported scenes
Please be aware that higher levels of
compression can also reduce Precision or
quality in the geometries under public
URL viewer or code export depending on
your desired export type switch to the
play settings tab scroll down to find
the compression settings turn it on with
the switch from the preset dropdown
select performance to optimize for
improved
performance having too many objects in
your scene can make it load slower and
perform poorly more objects mean more
polygons and materials which can be
resource intensive delete objects that
aren't visible like inside another
object or behind other objects if you
think people won't be seeing these
objects in the final experience you can
delete them avoid adding images textures
to your materials if possible use Simple
lighting we recommend working with less
than three lights per scene Too Many
Lights can reduce the performance of the
scene try to keep the material simple
don't use too many layers if not
necessary okay once your scene is set
for export you can proceed to export it
in usdz format simply return to the
export button and choose iOS AR from the
drop- down menu but please note that
there are both advantages and
disadvantages to using usdz it can be
enjoyable to export your objects in usdz
format but there are certain rules and
limitations to keep in mind the export
process supports only a limited set of
features such as geometry simple color
layers and some basic
textures unfortunately it does not
support more advanced elements like
multiple material layers postprocessing
animation physics environmental effects
complex lighting and fog additionally it
does not handle States events
interactivity assets components or
variables in essence your scene should
be kept basic and straightforward when
when working with
usdz great it's time to export the scene
and save the file in a location of your
choice now that you have your usdz file
you can open it on your iPhone or iPad
to experience your 3D model in AR make
sure to have iCloud simply navigate to
the file on your device and tap to open
it or simply airdrop directly to your
device your device will automatically
launch the AR viewer and you can place
and interact with your model in your
real world environment isn't it
fantastic creating 3D models for AR is a
thrilling journey and with splines
intuitive tools and Export options
you're well equipped to bring your
Creations to life but remember
optimization is key to smooth
performance by following the strategies
outlined in this tutorial you can ensure
your AR models don't just look great but
also load swiftly and perform
efficiently now it's time to create
optimize and immerse yourself in the AR
experience in this video we're going to
learn learn how to bring your 3D spline
assets into a website so for example you
can use it as a
background but also you can use it for
its own section with
interactions so you can make this
adaptive as well by using the screen
resize
feature and you can also bring it to
code sandbox and take advantage of some
of these more advanced interactions such
as
scroll so far we've created a lot of
these 3D assets again you can put them
on a website in any section as a
background interactive 3D element or
entire
Pages we'll focus on implementing on
framer since it's the easiest way to get
started let's dive into publishing your
components starting with the export
process first we'll explore the use of a
public URL this URL essentially allows
you to open your 3D asset directly from
the spline website it's a handy way to
preview how your component will look in
a web
browser now let's Circle back for a
moment another option is to use this
specific link go ahead and copy it and
then we'll transition to using framer
remember to publish your components you
need a tool like webflow or framer so if
you haven't already create an account
with one of these platforms and get
ready to launch their
application once inside framer start by
creating a new
project our Focus here will be on
embedding the spline 3D asset navigate
to insert and then locate the embed
option
upon clicking it the embed tool will
appear simply drag it into your
website's
frame setting it to full screen by
adjusting the margins to zero on all
sides in the embed tool you'll find a
space to enter the URL from
splain after entering the URL and
pressing enter your spline asset will
appear now you're ready to publish and
integrate your 3D asset into your
framework
website the key Advantage here compared
to just viewing it on the spline website
is the level of control you gain you can
utilize the 3D asset as a background a
specific section or even the entire
Website Layout for instance you can
further enhance your design by adding
more elements start with a header bar
then include a title after that you're
free to add any content you desire such
as text
buttons additional sections and find fin
a
footer now your website is fully
integrated with framer complete with 3D
assets the final technique to publish
your 3D site involves using Code you
have two options here either download
the zip file containing the HTML files
and the JavaScript package or directly
edit in code
sandbox for those comfortable with
coding this approach allows you to delve
into the package examining the code
files and JavaScript
setup
after making your adjustments you can
directly publish your project to the
preview site on code
sandbox whether you're quickly
publishing your 3D assets and framer as
a background an interactive section or
building a full-fledged website with
scroll interactions using the spline
viewer the flexibility offered by the
spline export and Publishing tools is
immense you can start incorporating your
3D assets into your website with just a
few simple
steps I hope you found this course
valuable every asset we've discussed is
available for download allowing you to
use them alongside community and Library
files to jump start your 3D website
project thank you for participating in
this course enjoy exploring these tools
and I look forward to seeing you in the
next
one