I found the PERFECT duo for 3D web animations

Рет қаралды 187,079

Күн бұрын

Let's make a quick website with scroll animations using Spline and GSAP. In my opinion, these two go very well together. So why not try out some ideas?
// ✨ Demo on CodePen:
codepen.io/Juxtopposed/full/x...
// ✨ Helpful links:
stacksorted.com
spline.design
greensock.com
github.com/splinetool/react-s...
// ✨ Become a supporter:
ko-fi.com/juxtopposedme
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
Dribbble: dribbble.com/juxtopposed
Github: github.com/juxtopposed
---
// Timestamps:
00:00 Intro
00:54 Step 1: Design a Website
01:29 Step 2: 3D Modeling
02:07 Step 3: Preparing the Code
02:49 Step 4: GSAP Basics
03:46 Step 5: Spline + GSAP
04:52 Step 6: the little things
--------
Music:
pixabay.com/music/beats-again...
---
#spline #gsap #animation #3danimation #3dmodeling #webdesign #web3d #codepen

Пікірлер: 219

@moazamdev 10 ай бұрын

The videos never disappoint. It would be much appreciated if you could create a detailed tutorial on how to do that.

@adarshagnihotri3228 10 ай бұрын

I'm a new subscriber, is this something that she frequently does? 🙄

@thenonfurry 13 күн бұрын

@@adarshagnihotri3228yes, she’s a coder

@juxtopposed 10 ай бұрын

Do you guys have any experience with 3D or animations in web? How do you like Spline + GSAP? (btw, memberships are on now! You'd be getting a cool badge, funny emojis () AND supporting me all for only $0.99 ehehe)

@tubbystubby 10 ай бұрын

No experience. Just a BE dude who likes these videos :)

@cypherusuh 10 ай бұрын

I used GSAP, but mostly for animating 2D stuff. Never bothered with 3D modeling.

@alex.g7317 10 ай бұрын

U look like Asian Half Squat

@Nekroido 9 ай бұрын

I had skin previewer with three.js for my heavily modified private Minecraft server. Both modeling and animations were done with vanilla JS. Ah, the times.

@marshall49 Ай бұрын

change ur username 😭

@xore_1798 10 ай бұрын

Wow, like I'm not even a frontend designer, but seeing you doing things like that gets me inspired. You're really great!

@lucaseastman1877 10 ай бұрын

I feel the same way. This stuff is really cool and the way it's presented is inspiring.

@yehudit4824 9 ай бұрын

GIRRRRL you ROCK! Thanks for sharing, this is so inspiring, and not only design-wise, you just re-ignited my love for 3D and coding awesome stuff

@xKond3i Ай бұрын

Love the explaining - the corresponding visuals are awesome! Keep up the good work! 😍

@egriff38 10 ай бұрын

Great video. I liked that you showed your process from top-level page design to 3D modeling to scroll transitions and animations. It makes the iterations feel more approachable.

@juxtopposed 10 ай бұрын

Just showing my general design workflow. Glad you liked it :)

@harryphillipsdev 10 ай бұрын

This is soooo helpful, thank you! Amazing how you're able to make me go from "3D looks so impossible" to "Hey, maybe I can do that" in just 5 minutes!

@npxww 10 ай бұрын

never disappoints

@doge0069 10 ай бұрын

never

@alex.g7317 10 ай бұрын

Or else…

@dreambug6564 10 ай бұрын

Jux is a legendary channel right out the gate. Always impressive and worth watching, thank you!

@taiwojolomi2638 8 ай бұрын

I love this way of demonstrating cool stuff on the web, just like the Hyperplexed Channel... Which I also love. I'm subscribing 💕

@rikkilanz 9 ай бұрын

I love this editing style so much, the humor is just immaculate 🌟 got me motivated to make fun websites now lol

@carlosfelipesantiago4314 10 ай бұрын

You're videos are awesome! I always learn something super cool from them💯

@kevingonzalez2120 10 ай бұрын

the subtle animation on the word "keyboard"

@sleepy_jinn 8 ай бұрын

I just discovered your channel and I LOVE EVERYTHING ABOUT IT

@Diego_Cabrera 9 ай бұрын

Bro you took my whole career here on yt with one video. Amazing explanation btw, i'm looking forward to making some videos on 3D!

@marcomargittai7386 3 ай бұрын

One of the most important channels on KZfaq for me rn. Thank you!

@brycecox8249 10 ай бұрын

The diversity and depth of the skills displayed in your videos are a strong flex. Well done!

@victorconopliov5083 10 ай бұрын

Your documentation tip (Spline docs) is valuable - thank you for sharing it! Your videos are great ❤

@user-mu4kv8bc8h 9 ай бұрын

I am so amused and awe of such inspiration in design

@thecrazymoon6578 10 ай бұрын

The first video of yours I'm watching, good video.

@Metruzanca 10 ай бұрын

Jux, your editing just keeps getting better.

@PourasRaut 4 ай бұрын

This is my first time watching your video and I’ve already subscribed! Your work is undoubtedly great and your narration kept me engaged thill the end of the video. Keep it up and bring us some more great videos🫶🏻

@komododragon6126 10 ай бұрын

Your videos have convinced me, a backend developer to finally try out frontend and ui design :^)

@WellDressedMuffin 8 ай бұрын

Awesome demo! Very inspiring.

@devardilshad3944 Ай бұрын

the delivery and jokes you put into this video is too good that you want to watch more than once

@highnitin 7 ай бұрын

never had such a fun, loved every bit of it :)

@mattshnoop 10 ай бұрын

As a frequent user web... I feel the need to implore-nay, beg-any web designers who come across this video and are now looking to do fancy animations on scroll to **PLEASE** not screw with my scroll wheel. 🤣 Animating things _on_ scroll is fine; it's changing the actual speed/flow of the scroll itself that sucks. Nothing turns me off of a webpage faster than when the page insists on scrolling super "smooth" and it feels like I'm dragging the page through molasses. Or, when I'm scrolling down and suddenly the page stops moving and some carousel starts sliding in from the right-hand side, stopping me from going down even though I can see the next section right there. Just... please be careful when you mess with scrolling 😅

@juxtopposed 10 ай бұрын

very true.

@igormatos1535 10 ай бұрын

It's my page, i do whatever i want sir

@bozzhik 10 ай бұрын

this video is awesome tutorial guide. you have very hard skills in design also. you are making crazy good videos. thank you for existing

@happyd6426 10 ай бұрын

i'm just starting to get into coding but my god your videos are awesome! they always make me hopeful for my own coding journey :D so many possibilities

@Enormousguy 10 ай бұрын

I love this channel It's straight to the point

@nibs_fpv 10 ай бұрын

As a "full stack engineer definitely not a designer" these videos are always eye openers to all the possibilities! Already getting ideas for new projects from this

@nibs_fpv 10 ай бұрын

@@looksmatteronly UI/UX designer

@keemkorn 2 ай бұрын

@@looksmatteronly backend rust api developer

@Houseready01 10 ай бұрын

Wow, I’m a swe with zero knowledge on 3D graphics but this video is so clean, subscribed! This was also the first video I’ve watched from this channel. Great job!

@JaymeWilde 10 ай бұрын

Another stunning vid from the legend herself

@oscarvasquez5033 10 ай бұрын

Love you, we were looking for something like spline. Thanks!

@MiDoUx91 28 күн бұрын

where have you been all my life :D thank you for the amazing video

@eunayu527 3 ай бұрын

DIS IS SO HELPFUL, THANKYU

@QwertyAndrew 10 ай бұрын

Interesting! I will try to implement spline for my portfolio website.

@nicolasaudepin1622 10 ай бұрын

You are a life saver this is exactly what I needed for my website

@boomeroo 10 ай бұрын

First time catching one of your videos. Just deluxe! I know where I'll be hanging out on YT for a while. Thanks!

@pablocortes682 10 ай бұрын

Wow! this tutorial was amazing, thank you so much!

@asimshamim113 10 ай бұрын

she don’t miss!

@shuccle6161 10 ай бұрын

actually the best tutorials on KZfaq fr

@thebread1034 10 ай бұрын

You make me dig down the landfill called my mind and bring back frontend design. There is a reason why most of my projects are purely CLI, but this will change :D. Already have an idea for a website :DDD.

@Carhill 10 ай бұрын

Another absolute banger!

@thewebstylist 6 ай бұрын

SO grateful for Spline and GSAP!!

@MAW__ 4 ай бұрын

This video is FIRE 🔥 THANKS A TONNNN

@TozzaYT 9 ай бұрын

0:46 DUDE THAT IS SOOOO COOOL

@juanmacias5922 10 ай бұрын

That keyboard was so cute!

@libinthathappilly 10 ай бұрын

I follow a lot of webDev based creators of KZfaq. You are one of the best! I love your content so much. Rule always girl! ❤

@flammea_ 7 ай бұрын

Loved that keyboard effect on the "keyboard"

@nezbro2011 7 ай бұрын

I put off watching this for awhile thinking it wouldn't be that interesting...sorry...but it was a really good informative video! Subscribed!

@quick-bytes 10 ай бұрын

Dedicated Spline Tutorial needed at any cost!!

@dzienisz 7 ай бұрын

wow this video is amazing!!

@Dino-pb4di 10 ай бұрын

great content, great editing, great cats, thank you!

@Another-Sound 8 ай бұрын

I don't know who you are, but your videos and your voice is just what I need

@rajat0610 8 ай бұрын

even the rough sketch of the keyboard at 01:14 looks sick

@srijonp4 7 ай бұрын

Great video, Subbed

@thip1754 10 ай бұрын

Amazing work :)

@XEQUTE 10 ай бұрын

I gotta learn marketing from you girl , everything you do ties with your work nicely , which creates a brand churning machine ( if you will) , in a way thats too great ( from a channel that seems small and run by one person)

@naufalamiruddin5798 10 ай бұрын

Great video! Gonna try it soon

@Jacob_Price 10 ай бұрын

You're just too much of a gamer. Great video again.

@Quickartflicks 8 ай бұрын

What a video this is amazing I found This video showing me the way I wanted to choose , nice video

@mogipls 10 ай бұрын

u just don't miss at all

@miguelp2979 10 ай бұрын

Subscribed. Like, so fast. 👏🏼 Happy to be part of the ‘below 1M subscribers’ club 🎉

@Nab_001 10 ай бұрын

I'm not a warlock but I see this channel going all the way to +1M subs soon

@get_video 10 ай бұрын

Great video!

@Aragos207 9 ай бұрын

Very good video. You just earned a sub!

@kata1000 7 ай бұрын

I’m a backend data scientist and always struggle with visualizing things from my terminal code. Something like this is extremely helpful and I definitely need to learn about it. I’m also wondering if a static website generator like Hugo can incorporate something like this into it

@overrevvv 9 ай бұрын

Your videos and explanations are so good that even worse type of newbie web developer like me see hope to become better in future.

@vanvanni_nl 8 ай бұрын

Amazing tutorial!

@yasabhishek 10 ай бұрын

best animation explained in most simple words!!!!!!!!!!!!!!!!

@toshirohitsugaya1465 10 ай бұрын

I was about to start with 3d animations. Perfect video at the right time

@JaymeWilde 10 ай бұрын

Same here! In a middle of a project for showcasing a product I'm designing. Best of luck to us and our journey!

@toshirohitsugaya1465 10 ай бұрын

@@JaymeWilde best of luck Jayme, wishing you a successful journey ahead

@MrChrisk8er 4 ай бұрын

great explanation... thanks

@adevikthur 9 ай бұрын

This is super cool! 😎

@zenlanfleek6580 8 ай бұрын

She ate and left no crumbs.

@Teh-Penguin 10 ай бұрын

"The keyboard is somewhere inside this cube and we just need to take it out" 🤣😂👌

@monat_son 4 ай бұрын

Thank you, this is neat.

@dotpenji 9 ай бұрын

Wow, your video is incredibly informative! The way you explain the process of creating 3D websites using Spline and GSAP is so clear and easy to follow. I appreciate how you break down each step, making it seem much more accessible than I initially thought. One key takeaway I got from your video is how you demonstrated the power of combining Spline and GSAP to create seamless and captivating animations for web designs. It's impressive how you showed the potential of these tools for web development.

@PourasRaut 4 ай бұрын

Btw this video is really helpful! Thanks❤

@mdrifat6941 10 ай бұрын

Loved the content

@Kimarauskas 9 ай бұрын

you deserve more subs

@XerosXIII 10 ай бұрын

Thank you! Thank you! Thank you! Thank you! - love from "a full-stack wannabe that stucked with bootstrap"

@SRG-Learn-Code 10 ай бұрын

Simply wow.

@anaaragonvaz 2 ай бұрын

Did you use free version of Spline and Gsap for this example? Awesome work!😍

@spiderone_ 8 ай бұрын

Oh wow I think it's the first time I've seen my work showcased in a video 0:45 Cool video btw

@CreativeDrone 10 ай бұрын

I knew u would make a spline tutorial!

@szymonkucharski4311 9 ай бұрын

Kickass video 😎

@thetrends5670 10 ай бұрын

Yes, your game, your keyboard is catchy.

@asdasdaa7063 4 ай бұрын

please make a more detailed video some time in the future about using spline:)

@Kappu_ch 8 ай бұрын

Im not even a web designer and I still found this video so damn interesting.

@thevikingsock8527 9 ай бұрын

The holy grail of Frontend animation and memes on KZfaq

@kobilovilkhomjon9502 7 ай бұрын

Nice video, I like it

@KaramAlayan Күн бұрын

well your magic worked on me gotta say it doesnt always happpen i like the simplicity BUT as always the complex stuff are the ones i love maybe another video of Blender with Three.js combo???