I found the PERFECT duo for 3D web animations

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ธ.ค. 2024

ความคิดเห็น • 223

  • @moazamdev
    @moazamdev ปีที่แล้ว +203

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

    • @adarshagnihotri3228
      @adarshagnihotri3228 ปีที่แล้ว +2

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

    • @thenonfurry
      @thenonfurry 6 หลายเดือนก่อน

      @@adarshagnihotri3228yes, she’s a coder

  • @juxtopposed
    @juxtopposed  ปีที่แล้ว +90

    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
      @tubbystubby ปีที่แล้ว +9

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

    • @cypherusuh
      @cypherusuh ปีที่แล้ว

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

    • @alex.g7317
      @alex.g7317 ปีที่แล้ว

      U look like Asian Half Squat

    • @Nekroido
      @Nekroido ปีที่แล้ว

      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
      @marshall49 8 หลายเดือนก่อน

      change ur username 😭

  • @xore_1798
    @xore_1798 ปีที่แล้ว +66

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

    • @lucaseastman1877
      @lucaseastman1877 ปีที่แล้ว +2

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

  • @egriff38
    @egriff38 ปีที่แล้ว +21

    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
      @juxtopposed  ปีที่แล้ว +1

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

  • @itsyehudit
    @itsyehudit ปีที่แล้ว +7

    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

  • @nibs_fpv
    @nibs_fpv ปีที่แล้ว +14

    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
      @nibs_fpv ปีที่แล้ว +2

      @@looksmatteronly UI/UX designer

    • @musilicks
      @musilicks 8 หลายเดือนก่อน

      @@looksmatteronly backend rust api developer

  • @harryphillipsdev
    @harryphillipsdev ปีที่แล้ว +5

    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!

  • @kevingonzalez2120
    @kevingonzalez2120 ปีที่แล้ว +1

    the subtle animation on the word "keyboard"

  • @npxww
    @npxww ปีที่แล้ว +114

    never disappoints

  • @mattshnoop
    @mattshnoop ปีที่แล้ว +11

    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
      @juxtopposed  ปีที่แล้ว +2

      very true.

    • @ywhym
      @ywhym ปีที่แล้ว

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

  • @xKond3i
    @xKond3i 7 หลายเดือนก่อน +1

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

  • @brycecox8249
    @brycecox8249 ปีที่แล้ว +1

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

  • @dreambugofficial
    @dreambugofficial ปีที่แล้ว +2

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

  • @marcomargittai
    @marcomargittai 10 หลายเดือนก่อน

    One of the most important channels on TH-cam for me rn. Thank you!

  • @devardilshad3944
    @devardilshad3944 8 หลายเดือนก่อน

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

  • @QwertyAndrew
    @QwertyAndrew ปีที่แล้ว +6

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

  • @Nab_001
    @Nab_001 ปีที่แล้ว +3

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

  • @toshirohitsugaya1465
    @toshirohitsugaya1465 ปีที่แล้ว +3

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

    • @Indainna
      @Indainna ปีที่แล้ว

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

    • @toshirohitsugaya1465
      @toshirohitsugaya1465 ปีที่แล้ว +1

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

  • @quick-bytes
    @quick-bytes ปีที่แล้ว +2

    Dedicated Spline Tutorial needed at any cost!!

  • @asimshamim113
    @asimshamim113 ปีที่แล้ว +1

    she don’t miss!

  • @komododragon6126
    @komododragon6126 ปีที่แล้ว +1

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

  • @rikkilanz
    @rikkilanz ปีที่แล้ว

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

  • @kata1000
    @kata1000 ปีที่แล้ว +2

    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

  • @taiwojolomi
    @taiwojolomi ปีที่แล้ว

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

  • @Rockittyy
    @Rockittyy 5 หลายเดือนก่อน

    I felt the dopamine and adrenallin rush high up in my vain, as I slowly introduced to this toppest part of a gigantinc ice berg

  • @thecrazymoon6578
    @thecrazymoon6578 ปีที่แล้ว +1

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

  • @rajat0610
    @rajat0610 ปีที่แล้ว

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

  • @Indainna
    @Indainna ปีที่แล้ว +1

    Another stunning vid from the legend herself

  • @thewebstylist
    @thewebstylist ปีที่แล้ว

    SO grateful for Spline and GSAP!!

  • @CjDamayo
    @CjDamayo ปีที่แล้ว

    I am so amused and awe of such inspiration in design

  • @Houseready01
    @Houseready01 ปีที่แล้ว

    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!

  • @KaramAlayan
    @KaramAlayan 6 หลายเดือนก่อน +1

    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???

  • @Another-Sound
    @Another-Sound ปีที่แล้ว

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

  • @shuccle6161
    @shuccle6161 ปีที่แล้ว

    actually the best tutorials on TH-cam fr

  • @XEQUTE
    @XEQUTE ปีที่แล้ว

    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)

  • @nicolasvallejos5950
    @nicolasvallejos5950 ปีที่แล้ว

    ¡Gracias!

  • @Teh-Penguin
    @Teh-Penguin ปีที่แล้ว

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

  • @Diego_Cabrera
    @Diego_Cabrera ปีที่แล้ว

    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!

  • @thevikingsock8527
    @thevikingsock8527 ปีที่แล้ว

    The holy grail of Frontend animation and memes on TH-cam

  • @boomeroo
    @boomeroo ปีที่แล้ว

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

  • @sleepy_jinn
    @sleepy_jinn ปีที่แล้ว

    I just discovered your channel and I LOVE EVERYTHING ABOUT IT

  • @flammea_
    @flammea_ ปีที่แล้ว

    Loved that keyboard effect on the "keyboard"

  • @Metruzanca
    @Metruzanca ปีที่แล้ว

    Jux, your editing just keeps getting better.

  • @mogipls
    @mogipls ปีที่แล้ว +1

    u just don't miss at all

  • @thebread1034
    @thebread1034 ปีที่แล้ว

    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.

  • @victorconopliov5083
    @victorconopliov5083 ปีที่แล้ว

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

  • @srijonp4
    @srijonp4 ปีที่แล้ว +1

    Great video, Subbed

  • @oscarvasquez5033
    @oscarvasquez5033 ปีที่แล้ว

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

  • @nezbro2011
    @nezbro2011 ปีที่แล้ว

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

  • @zenlanfleek6580
    @zenlanfleek6580 ปีที่แล้ว

    She ate and left no crumbs.

  • @miguelp2979
    @miguelp2979 ปีที่แล้ว

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

  • @carlosfelipesantiago4314
    @carlosfelipesantiago4314 ปีที่แล้ว +1

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

  • @Kappu_ch
    @Kappu_ch ปีที่แล้ว

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

  • @XerosXIII
    @XerosXIII ปีที่แล้ว

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

  • @highnitin
    @highnitin ปีที่แล้ว

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

  • @spiderone_
    @spiderone_ ปีที่แล้ว

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

  • @MiDoUx91
    @MiDoUx91 7 หลายเดือนก่อน

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

  • @bozzhik
    @bozzhik ปีที่แล้ว

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

  • @Jacob_Price
    @Jacob_Price ปีที่แล้ว

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

  • @TozzaYT
    @TozzaYT ปีที่แล้ว

    0:46 DUDE THAT IS SOOOO COOOL

  • @eunayu527
    @eunayu527 10 หลายเดือนก่อน

    DIS IS SO HELPFUL, THANKYU

  • @juanmacias5922
    @juanmacias5922 ปีที่แล้ว

    That keyboard was so cute!

  • @thetrends5670
    @thetrends5670 ปีที่แล้ว

    Yes, your game, your keyboard is catchy.

  • @yasabhishek
    @yasabhishek ปีที่แล้ว

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

  • @nicolasaudepin1622
    @nicolasaudepin1622 ปีที่แล้ว

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

  • @Enormousguy
    @Enormousguy ปีที่แล้ว

    I love this channel
    It's straight to the point

  • @libinthathappilly
    @libinthathappilly ปีที่แล้ว

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

  • @PourasRaut
    @PourasRaut 10 หลายเดือนก่อน

    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🫶🏻

  • @Quickartflicks
    @Quickartflicks ปีที่แล้ว

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

  • @overrevvv
    @overrevvv ปีที่แล้ว

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

  • @pikazap6672
    @pikazap6672 ปีที่แล้ว +1

    4:19 The Keyboard

  • @modprog
    @modprog ปีที่แล้ว

    I mean... I hate when websites do this to me... but I have to admit it looks good :D

  • @approxahmed
    @approxahmed ปีที่แล้ว +2

    1:20 yes

  • @Furetto126
    @Furetto126 ปีที่แล้ว

    This is probably the first time i heard the phrase "vanilla javascript" XD

  • @AsadKhan-gp9sk
    @AsadKhan-gp9sk 11 หลายเดือนก่อน

    I wish i could recreate it.
    Also it would be great if you could make a tutorial to create this

  • @get_video
    @get_video ปีที่แล้ว +2

    Great video!

  • @PhantasyAI0
    @PhantasyAI0 10 หลายเดือนก่อน

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

  • @happyd6426
    @happyd6426 ปีที่แล้ว

    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

  • @ottersmeep25
    @ottersmeep25 ปีที่แล้ว

    I name my layers. Layer 1, Layer 2, Layer 3. I trust Figma's choices.

  • @WellDressedMuffin
    @WellDressedMuffin ปีที่แล้ว

    Awesome demo! Very inspiring.

  • @dopamine_quest
    @dopamine_quest ปีที่แล้ว

    your voice so much matches with Switch&Click channel

  • @Carhill
    @Carhill ปีที่แล้ว +1

    Another absolute banger!

  • @Alex-xl4xe
    @Alex-xl4xe ปีที่แล้ว

    lmao, this is like Fireship but in female. Awesome content.

  • @pablocortes682
    @pablocortes682 ปีที่แล้ว

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

  • @jameshuisangkim
    @jameshuisangkim ปีที่แล้ว

    This might be a bit off topic from the types of video you create, but I'd love to know your thought process for learning new tools and skills!

  • @anaaragonvaz
    @anaaragonvaz 8 หลายเดือนก่อน

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

  • @Dino-pb4di
    @Dino-pb4di ปีที่แล้ว

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

  • @amir_7alle9
    @amir_7alle9 5 หลายเดือนก่อน

    Very nice!! Great video!!

  • @kumarvlogs298
    @kumarvlogs298 5 หลายเดือนก่อน

    Do we need to buy the premium version for code exports through vanilla js ?

  • @x_techno_pro
    @x_techno_pro ปีที่แล้ว +1

    make them 3D models complex enough and you will need a gaming PC to use the website

  • @peopleneverdieinmiami
    @peopleneverdieinmiami ปีที่แล้ว

    where did you randomly pop out of? lol, creating all this amazing content out of the blue

  • @4nuragKr
    @4nuragKr 10 หลายเดือนก่อน

    Hi, help me please, my 3d object is not going below the screen height. It's dissapearing. Help please

  • @osaroadade
    @osaroadade ปีที่แล้ว

    More cats!!!!!! We demand even more cats!!!
    Great content as always.
    Oh and yes, more spline content.

  • @Ccb780
    @Ccb780 ปีที่แล้ว

    What did program/workflow did you use during the stage of designing the website?

  • @tanbir5263
    @tanbir5263 ปีที่แล้ว

    wow we can use this video as a tutorial too

  • @PsychoDude
    @PsychoDude ปีที่แล้ว

    Hey! Maybe you will answer me :) Can I do with spline only transitions os my website so while I scroll it is animating? for example as i scroll it goes in a 3d tube?

  • @piyushhsainii
    @piyushhsainii 10 หลายเดือนก่อน

    Hey , how did you make the thing responsive? can you pls provide the source code?

  • @naufalamiruddin5798
    @naufalamiruddin5798 ปีที่แล้ว

    Great video! Gonna try it soon

  • @dotpenji
    @dotpenji ปีที่แล้ว

    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.

  • @logo-mo2ij
    @logo-mo2ij 10 หลายเดือนก่อน

    how to achieve this in react any tutorial?