I found the PERFECT duo for 3D web animations

Поділитися
Вставка
  • Опубліковано 2 жов 2024

КОМЕНТАРІ • 224

  • @moazamdev
    @moazamdev Рік тому +198

    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 4 місяці тому

      @@adarshagnihotri3228yes, she’s a coder

  • @npxww
    @npxww Рік тому +114

    never disappoints

  • @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 5 місяців тому

      change ur username 😭

  • @xore_1798
    @xore_1798 Рік тому +63

    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.

  • @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 😅

  • @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

  • @KaramAlayan
    @KaramAlayan 3 місяці тому +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???

  • @QwertyAndrew
    @QwertyAndrew Рік тому +5

    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

  • @МойМульт-е2х
    @МойМульт-е2х 8 місяців тому +1

    you a very very best woomen!!!
    (sorry my errors, im from russia), but help me. thahk you!!!

  • @nibs_fpv
    @nibs_fpv Рік тому +12

    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 5 місяців тому

      @@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!

  • @approxahmed
    @approxahmed Рік тому +2

    1:20 yes

  • @kata1000
    @kata1000 11 місяців тому +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

  • @herestoeveryone
    @herestoeveryone Рік тому +1

    Slightly misleading that you didn’t mention this keyboard is based on an existing popular Spline tutorial. Otherwise, good video.

  • @Cuwubiq
    @Cuwubiq Рік тому

    i personally don't like working with gsap, so much more prefer motion one nowdays..

  • @kides6537
    @kides6537 Рік тому +1

    JUX STOP LIKING EVERY COMMENT

  • @xKond3i
    @xKond3i 5 місяців тому +1

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

  • @thecrazymoon6578
    @thecrazymoon6578 Рік тому +1

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

  • @Rundik
    @Rundik Рік тому

    Why would you use some proprietary thing when blender is both more powerful and free and open source

  • @abdemanaf1219
    @abdemanaf1219 Рік тому

    Can you pls make video about building animated websites in Framer.
    I’m facing some difficulties building cool animated websites in Framer can you pls make a tutorial 🙏

  • @somefishhere
    @somefishhere Рік тому +1

    Instead of 'wasted' it is 'wasded' 1:55

  • @hineko_
    @hineko_ 8 місяців тому

    gsap is 200$/year for commercial use. Another junk conditional access technology.

  • @thecuriouskid3606
    @thecuriouskid3606 Рік тому

    Do you understand what do your magic down there from a girl sounds like? 😅 Just saying. Just found you today but I already love your contents, keep it up.

  • @piyushhsainii
    @piyushhsainii 7 місяців тому

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

  • @quick-bytes
    @quick-bytes Рік тому +2

    Dedicated Spline Tutorial needed at any cost!!

  • @randint
    @randint Рік тому

    Thanks for the great video. I don't know why, but your voice kind of sound both AI generated and human.

  • @fahmifachrizal9172
    @fahmifachrizal9172 Рік тому +1

    Great work and naration,
    do a collab with @Hyperplexed please, you guys is the best

  • @akiohayato9845
    @akiohayato9845 Рік тому

    Bruh how many cool websites are there... Infinite maybe.. If anyone ever gives me a list of all those awesome designed websites and tells me go through every single of them... I don't think I'll ever get tired cause those always inspires me the most...

  • @soundrraj3880
    @soundrraj3880 Рік тому

    Hi, Please tell me where can I get all your meme cat's. I want to create a game with them. Can you help me by sharing those sources. Thank you🙏.

  • @anaaragonvaz
    @anaaragonvaz 6 місяців тому

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

  • @MiDoUx91
    @MiDoUx91 4 місяці тому

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

  • @4nuragKr
    @4nuragKr 7 місяців тому

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

  • @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

  • @komododragon6126
    @komododragon6126 Рік тому +1

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

  • @timandroja3388
    @timandroja3388 7 місяців тому

    But how do you optimize this for mobile? UX and performance can be an issue in my experience

  • @dreambugofficial
    @dreambugofficial Рік тому +2

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

  • @kumarvlogs298
    @kumarvlogs298 2 місяці тому

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

  • @srijonp4
    @srijonp4 10 місяців тому +1

    Great video, Subbed

  • @x_techno_pro
    @x_techno_pro 10 місяців тому

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

  • @Furetto126
    @Furetto126 Рік тому

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

  • @get_video
    @get_video Рік тому +2

    Great video!

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

  • @XerosXIII
    @XerosXIII Рік тому

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

  • @AsadKhan-gp9sk
    @AsadKhan-gp9sk 8 місяців тому

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

  • @Alex-xl4xe
    @Alex-xl4xe Рік тому

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

  • @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

  • @modprog
    @modprog 11 місяців тому

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

  • @PourasRaut
    @PourasRaut 7 місяців тому

    Btw this video is really helpful! Thanks❤

  • @asdasdaa7063
    @asdasdaa7063 7 місяців тому

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

  • @aidenberzins
    @aidenberzins 8 місяців тому

    now to add an easter egg that WASD actually moves the keys.

  • @kevingonzalez2120
    @kevingonzalez2120 Рік тому +1

    the subtle animation on the word "keyboard"

  • @dopamine_quest
    @dopamine_quest 11 місяців тому

    your voice so much matches with Switch&Click channel

  • @Indainna
    @Indainna Рік тому +1

    Another stunning vid from the legend herself

  • @CuriousSpy
    @CuriousSpy Рік тому +1

    Thank you

  • @nezbro2011
    @nezbro2011 11 місяців тому

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

  • @mogipls
    @mogipls Рік тому +1

    u just don't miss at all

  • @JoeyJooste
    @JoeyJooste Рік тому

    "Useless gaming keyboard", every OSU player just cried inside knowing that they have been looking for keypads forever.

  • @carlosfelipesantiago4314
    @carlosfelipesantiago4314 Рік тому +1

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

  • @miguelp2979
    @miguelp2979 Рік тому

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

  • @rsalinaszambrano
    @rsalinaszambrano 10 місяців тому

    I'm just debating on Spline/Webflow vs Spline/Code. I can do things much faster on Webflow, but I think Code is more stable, what do you think? I know how to use both btw

  • @kerwinjoelsandovalsanchez4031
    @kerwinjoelsandovalsanchez4031 5 місяців тому

    The permormance with spline is very sloooow :´v

  • @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!

  • @lifeofturu
    @lifeofturu 11 місяців тому

    I wanna ask question from ThreeJS and R3F developers. Is this really simpler way to do it ? and what if i want to add custom shaders on it? is there anything about this duo is bad ?

  • @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

  • @4twi352
    @4twi352 Рік тому

    The only "bad" thing is that you have to pay GSAP a lot of bucks per year if you want to go commercial ^^

  • @JordanMattKim
    @JordanMattKim 10 місяців тому

    would this have been easier if you had used framer?

  • @jamesualized
    @jamesualized Рік тому

    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!

  • @sleepy_jinn
    @sleepy_jinn 11 місяців тому

    I just discovered your channel and I LOVE EVERYTHING ABOUT IT

  • @Rockittyy
    @Rockittyy 2 місяці тому

    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

  • @corsto
    @corsto Рік тому

    If we already have 3D models we made in blender, can we still use them? or do we have to make new ones in spline? (also can we use textured models with UVs?)

  • @Carhill
    @Carhill Рік тому +1

    Another absolute banger!

  • @Ccb780
    @Ccb780 Рік тому

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

  • @kamranjokhio8647
    @kamranjokhio8647 11 місяців тому

    hehe wow first time watch and boom im just been fan

  • @x1expert1x
    @x1expert1x Рік тому

    Am I going insane or did you change the name of this video from "the perfect duo" to this

  • @StefanH
    @StefanH Рік тому

    These videos are great! Can't wait for the dark web one

  • @sabrihakuli9713
    @sabrihakuli9713 Рік тому

    Ahaaa, so Jux is your name? Until now I was reading JustOpposed :D

  • @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)

  • @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.

  • @benjeminstar
    @benjeminstar 7 місяців тому

    I like the idea of this website. But it is sooooooo slowly.

  • @mohitashliya8750
    @mohitashliya8750 8 місяців тому

    She really just mentioned Blender guru 😂😂😂

  • @Another-Sound
    @Another-Sound 11 місяців тому

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

  • @peopleneverdieinmiami
    @peopleneverdieinmiami Рік тому

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

  • @osaroadade
    @osaroadade Рік тому

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

  • @hurka.design
    @hurka.design Рік тому

    What the actual *brain damage noises.

  • @Aragos207
    @Aragos207 Рік тому

    Very good video. You just earned a sub!

  • @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!

  • @brycecox8249
    @brycecox8249 Рік тому +1

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

  • @guapshonen
    @guapshonen Рік тому

    Hi, do you know if one can write custom gsap code in framer or webflow?

  • @asimshamim113
    @asimshamim113 Рік тому +1

    she don’t miss!

  • @tacticalassaultanteater9678

    No need for a spacebar, real gamers bind jump to the scroll wheel anyway.

    • @juxtopposed
      @juxtopposed  Рік тому

      hell yeah. improvise. adapt. overcome.

  • @libinthathappilly
    @libinthathappilly Рік тому

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

  • @Teh-Penguin
    @Teh-Penguin Рік тому

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

  • @cryMoreLoL
    @cryMoreLoL Рік тому

    A tutorial of a tutorial. If you know you know 😂

  • @Suz4n650
    @Suz4n650 Рік тому

    Yes, it's catchy, don't worry.

  • @gerry._.y
    @gerry._.y Рік тому

    guys2, are there any comparison on performance on doing this in spline vs three js?

  • @gayspunchbop
    @gayspunchbop 6 місяців тому

    pleaseeee do a video on spline if you have time!! i'm not a graphic designer but a frontend dev and i imported some 3d objects i created on my portfolio website but i can't seem to make them "lighter". in fact even a simple object slows down my website immensely and even the spline app gets laggy and i have a m2 macbook air so i don't think my laptop is the problem!
    i'm most likely missing some steps while creating the objects, i'd love to see how you do it :)

  • @Quickartflicks
    @Quickartflicks Рік тому

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

  • @ottersmeep25
    @ottersmeep25 Рік тому

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