Design an animated 3D weather landing page with Spline - Tutorial

hey everyone today I'm going to show you how to make this really cool 3D weather landing page so we're going to use fly to create a 3D and then integrate it to the website using frameware so let's get into it so here we are in sply and I am creating a new sply project so first let's remove the rectangle and then create a sphere by clicking on this list right here and select sphere and click on the screen and make it bigger like this and then let's go to the right panels and click on this material panels and you can see we have a lot of different material press here uh so I'm going to select this ceramic and marble category and here you can see there's a lot of different colors and texture combination so I'm going to select something that look closer to the Sun like probably this one and then let's click here to open the material properties and then let's adjust the base color layers to something a little bit more vibrant and then let's open this mat cap layers and I'm going to change this one to something a little bit more matte uh like this maybe this a little bit too bright uh let's try this so we have something like this so it doesn't look too shiny and then next thing I'm going to create a new layer for this materials and for this layer I'm going to switch it to image and I'm going to use this AI generator to to generate some textures for our sphere so basically you can just type in anything and it will generate for you so let's try something like ground surface textures and then it's going to give you something like this so I think it's looking pretty cool you can try with a lot of different keywords combination to come up with different result so after a few try I think this one uh probably is going to work so I'm going to go back here and adjust the size a little bit so it look a little bit bigger and I'm going to apply an overlay blending mode so it can blend into the rest of the materials and another very cool feature of this material is that if you open this lighting panels and make sure that you are in the font shading type uh and down here you can see there's a bum map option so basically it's using this image right here to create a bum map so you can just select it and you see that it's creating a more realistic rough surface and this BM map works independently from the a layer so if I turn this off you can see that it still have this bum effect so it will give you a lot of control to achieve the look and feel that you are trying to do and let's go back to the lighting panels and from here you can even like increase the shininess so you can see that it's still have that rough effect but it's a little bit shinier and you can also like increase or decrease the intensity of the bum so you can see it's looking much more realistic than without the bum effect and another cool thing is that I can even go back to the image layer and generate a different textures and it will automatically update the bum textures so yeah I think this one is even better than the other ones it's looking really good so I'm going to go with this one and moving forward to the next step so now let's open this noise panels and from here you can adjust the size of the noise uh so I want it to looks a little bit bigger maybe 200 so we have something like this and you can also change the colors so I want some area to be more orange and a little bit darker like this so yeah I think this working really well it create this really realistic uh sphere so I think we're good with this so um another thing that I don't like the way that the light is just kind of shining directly to the front of the Sun so I'm going to adjust it maybe a little bit to the size so yeah something like this and let's um reduce the intensity a little bit all right so I think we good for the Sun so let's uh move forward to making the clown so let's open the library from the bottom left and from here you can search for the clown motor so here what we have I think this is looking good so let's just drag it into the scene so we have the clown here so let's make it bigger and move it in front of the Sun and then on the right panel let's open the clown textures and and I'm going to switch this colors layer to depth and open the property panels and use this handle here to control how the uh depth radiant works so I'm going to create this kind of a translucent look and feel so let's change the color to white and for the middle one so I'm going to reduce the opacity by zero so now we have something like this so let's close this and go back to the layer panels and from here I'm going to create a new layer so for this one I'm going to select glass and move it down below the depth Channel and then let's click on this to open the property panels and increase the blur to 30 so you can see that it's looking so much better now so next thing I want to do is to make it a little bit more randomly distorted so I'm going to create another layers and for this one I'm going to select display and then let's click here to open the display property panels and from here let's switch this to Simplex fracture and increase the intensity by 20 so now we have something like this so next I want to create some water drops so let's just go back to library and just uh drag this icon to the scene and with this one I only need the water drop so let's remove the cloud and then I'm going to change the color of the water drop to something more white and then next let's create a backdrop from the list here and then scale it up really big like this and then change the color to something like this and you can even use the depth Channel instead of the color channel to create this kind of a fake Shadows uh bright beneath the whole sun and clown setup like this all right so this is what it finally look like so I'm happy with this overall looking field so now let's move forward to the animation process so first let's make the sun spinning around so let's click here to create the state so we have the two state so with the second state selected I'm going to set the rotation value to uh minus 360 so it will create a full rotation look um so now let's create an event so we're going to start event and click transition and from this let's transition from Bas to State and make sure to select linear animation and for the duration maybe something like uh 10 seconds and down here let's select the infinite Loop uh that's it so let's click it to preview and now it's spining really nicely so next for the cloud uh make sure to select the layer inside the group and then unlink the material so it can be animated uh via different state so let's go back up here and create a two state so with the second state selected I'm going to uh go to the display channels and change this movement uh value to 50 and create an event so we're going to go with start event and select transitions so we going to transition from base state to state and same here linear animations and duration should be 10 second and down here let's select infinite and for this one I'm going to use uh ping pong reverse so let's give it a look uh click here so now you can see it create this really nice uh display transformation animation so finally for the water drop I'm going to animate this water drop but we just need to use one so I'm going to remove the other one and keep only one water drop here so I'm going to create two state for this water drop for the first state let's move it inside the clown and for the second state we're going to move it down to this position so we have the two different state with two different position and with the second state selected uh let's unlink the material so we can animate the property inside um so with you know again with the second state I'm going to reduce all of these layer opacity to zero so now we have a choose State like this uh so next let's create an event for it uh so we're going to set up the same as the other ones except for this one I'm going to uh select the animation type is um ease out so it would go like this um so looking pretty good but I want it to repeat um over again and let's go back here and select infinite and then we have something like this so now all we need to do is to duplicate this one into a multiple water [Music] drop and one trick here is to add a slight delay to some of the water drop to make it appear more randomly and after that this is what we have so final step I'm going to create a point light and use this to make the scene a little bit more kind of a glowy effect so let's move the light to this position and make sure to turn off the shadows and change the color to a more yellow color like this and then you can adjust the position of the light until it look more natural and then this is the final result look like all right so lastly let's click here to export and think it's good so let's go to play setting and turn these off and then just update the public URL and then just go back to the overview Tab and copy this link all right so here we are in framer and you can see that I already have this UI layout uh set up here here so all we need to do next is to go to the insert Tab and search for the ambed components and then just drag it into the screen and then make sure that it is Ali properly and also distributed so it can be responsive and then finally just paste the slide link that we just copied to this import form and then voila it's worked like magic and then finally let's click here to preview a full screen so yeah it's looking really good on my computer screen so this is the end of my tutorial today so I hope you find this one helpful and I will see you in the next one all right

Channel: Minh Pham

Views: 39,462

Keywords: tutorial, 3d, animation, weather, design, visual, web design, web development, three js, 3d design, ui design, ux design, ui ux, web designer, ai

Id: rkclxD7gmN0

Length: 11min 36sec (696 seconds)

Published: Tue Aug 29 2023