Video transcript:
If you've ever wanted to integrate 3D into a website, your kneejerk reaction is probably one of: 'This is going to be a pain in the *ss", but that isn't the case anymore.
In fact, this is the project you're going to learn how to create in this super quick, super simple tutorial.
We're going to be using Spline, which is a robust, freemium web-based app for creating all sorts of cool sh*t in 3D.
So here's the stack for this particular project:
Spline, Vanilla JS, SplitText, and GSAP, or the greensock animation platform.
Let's rock.
Getting Started
After creating a new Spline project, go ahead and delete that starting plane.
Then, because this is a physics based project with things interacting with each other, enable "Physics" on the right property inspector.
Next up, we want to add a cube.. A big old beefy cube, like an ice cube on steroids.. Then, switch to the isometric perspective.. It's like a normal perspective, except you've tripped on acid and things don't look quite right.
Now go on and add a much smaller cube.. When you click play, nothing happens and your life feels worthless. Let's fix this by selecting the small cube and enabling Dynamic, under body type. Click play, and now you shit just got real.
Go ahead and give the cubes some color, and then hit CTRL-D to duplicate these suckers, grab a bunch of them and duplicate them some more.. Randomly rotate them, and adjust the gravity parameter to make them fall at different speeds.
Look at that, freaking awesome. Although, did you notice that one lonely cube fell to its death? So sad.
Next up, let's add a couple point lights and situate them so that are big cube looks cooler. Now, we're ready to hit export, after which we copy the URL as so.
HTML & CSS
Now it's time for some good ol' fashion BBQ sauce like my granpappy .. Wa.. I mean, HTML and CSS.. Let's paste that URL in, but in order to get this sucker full screen, we need to add a couple of simple CSS rulesets to make sure it's all big n' beafy, right in our faces.
Notice that damn black background? Go back to spline, click export, and disable the background field, damnit.. I forgot that part.
Ah, there we go. Now, let's add a headline and a sub-headline, and style them up. Note, in order to hide the type initially, we're going to use clip-path here.
After this, we're going to import both Split Type and GSAP via CDN. Split Type literally splits the type up into their own HTML elements with their own classes, so that we can animate individual characters later on with GSAP.
Now, all we need to define a timeline with GSAP, and then use the .from method to animate each character on the Y axis. We can also chain multiple .from methods together to create more complex animations sequences. Trust me, this way is a million times better than doing this all in CSS alone.
To make this stuff even cooler, go back to Spline, select the big cube, and add a state. States allow you to do cool interactive stuff. With the new state, move the cube down and out of view. After that, we add a transition event where after a 3.5 second delay, we'll make it transition from the base state, to the new state. Hit export.
And here's the moment we've all been waiting for, for uhm.. the last 3 minutes and 12 seconds..
Ain't she a beaut? I think so.
If you thought so too. If you like this new style of video tutorial, which took me for freaking EVER, subscribe up and let me know your thoughts in the comments.
Good bye.