I found the PERFECT duo for 3D web animations

what if I told you that using 3D in web is so simple that once you start you won't want to go 2D again no no don't take the blue pill you don't have to use 3js or speedrun the blender donut tutorial even though I think you probably should at some point in the future but you can start from something simpler you can make cool 3D websites with complex animations and scroll effects just using a spline and gsap spline is a free web-based and real-time 3D design tool with cloud-based storage that has great export options for JavaScript react 3js and so many other formats gsap is a JavaScript library that makes animating the web so much easier and prettier and just so you know this is not an ad I like them so much I might even prefer this to no code Solutions like spline and framer or webflow so let's see how these two can make a website like this which is a concept designed for a custom keyboard company that makes absolutely useless gaming keyboards Step 1 design a website okay hold up but jokes that's literally the trickiest part I know but just look at this or this or this great examples of both 3D models of their product with simple minimal UI so the first question is what do you need at 3D model for for example here I want to showcase a keyboard so I started with a very simple hero section showing the model and a text saying your games your keyboard I mean it's catchy right please say yes next we can scroll down to see two features of this keyboard and that's about it now I need an actual model of a custom gaming keyboard Step 2 3D modeling this is a spline workspace it has some of the basic functionalities you often use in blender or other 3D tools like editing sculpting materials animations physics and even game mechanics but much simpler the keyboard is somewhere inside this Cube and we just need to take it out this is the general process but if you want you can slow it down and follow along or let me know in the comments if you'd like to know more about spline itself so here's a simple keyboard with wasd E and Q nope no jumping or reloading for you we have several export options like an embedded viewer code export image video answering file formats step 3 preparing the code first you got to do the basics good old HTML CSS JavaScript whatever framework you want here I'll just use vanilla JavaScript so once I'm done with HTML and CSS I'll go around the spline and grab this JavaScript code it creates a new app and loads a spline file to make this work we need to create a canvas in HTML and once that's done the model loads instantly now it's time to animate I mean animate first we need to access the keyboard through the code and do stuff with it directly instead of the whole canvas I know you guys all name your layers in every single design software but I secretly don't so I'll group every key and board and name it then I'll create a constant and find the object keyboard from spline step 4 GSAT Basics we need to add these gsap scripts to The Project which will help us create animation timelines and Trigger certain actions at the same time while scrolling let's get into action now in the beginning I'll set a scale and position for the keyboard which places it right here and then I wanted to go through these sections and reach the bottom of the page so let's create an animation timeline that's triggered while scrolling down to each of these sections like part one two and three then start each at a certain point for example when the top of part one reaches the center of the screen and end it when the bottom of part one reaches the bottom of the screen plus enable scrubbing so the animation progresses as we scroll now we can go to the end of the timeline and use the to method to basically add an animation to the keyboard so it changes to a certain position scale or rotation which makes the overall animation look like this now it's time to bring the big tools out step 5 spline and gsap animations spline itself has built-in animations for example I created one that simulates clicking by basically creating two states for each key and transitioning between them and another one that kind of turns around and reveals more Colors by creating several States for each key and assigning different colors then I'll select the keyboard itself and create two events key down for the clicking animation and mouse down for the color switcher I'll set up transitions between different Estates for different keys or objects now all the animations are triggered by one object the keyboard why the keyboard why not just trigger each key or object on its own great question you don't have to we're just doing this because in the code we can easily trigger an event assigned to the keyboard upon entering a section like the key down event and have all the animations play together as planned instead of triggering events for objects one by one that's right work smarter not harder but wait how do we even know about these spline features in code well thanks to the spline API it lists all the information you need to interact with your objects in the code step 6 the little things now this works well and all but this keyboard is kind of Frozen in its place which is just devastating let's fix that by adding an animation to the keyboard so it rotates 360 Degrees around the y-axis make it repeat with a value of -1 a duration of 10 seconds so it would rotate slowly like this and set ease To None So it would rotate with a monotonous and linear speed all right now we've only just scratched the surface of the capabilities these two platforms give us do you see that yeah that that's us and we kind of need to print and find out what's down there sometimes it's the little things like this keyboard effect on the text that says keyboard if you ever need inspiration you can find them on a stacksworded.com which is an open source collection of the best design effects based on elements and you can contribute to it too anyway that's all for this video if you liked it make sure to do your magic down there and see you on the next one

Channel: Juxtopposed

Views: 119,445

Keywords: spline, gsap, animation, web animation tutorial, spline tutorial, spline for web, spline and framer, spline and webflow, 3D design, 3D design for web, web 3D, threejs, blender, blenderdonut, 3D design tutorial, gsap tutorial, greensock animation platform

Id: x3m1PGEfG5c

Length: 5min 52sec (352 seconds)

Published: Wed Aug 16 2023