Create 3D UI Interactions for Websites with Spline - Free course

Поделиться
HTML-код
  • Опубликовано: 12 янв 2025

Комментарии • 208

  • @thepneumanator
    @thepneumanator 10 месяцев назад +40

    Don't let the AI voice scare you away, these are some great tuts if you are just starting with Spline. Good job peeps!

  • @ShampooAki
    @ShampooAki Год назад +26

    Great, the course is finally out! 🎉 😊

  • @jeromebrown20
    @jeromebrown20 Год назад +23

    Thank you for this, I have been afraid of Spline. This looks like a great to start

  • @brobinbraauw5523
    @brobinbraauw5523 11 месяцев назад +17

    Me: "Oh it's only 2 hours and 41 minutes I can finish this in an afternoon"
    Also me: pauses and rewinds every 5 seconds cause I've already forgot what the next step is

    • @kickassmovies5952
      @kickassmovies5952 7 месяцев назад

      hheheh😂

    • @frankiet3034
      @frankiet3034 4 месяца назад

      That's me too hahahahaha. Thank you for letting me know that i'm not the only one :)

    • @akanahketo5823
      @akanahketo5823 24 дня назад

      That is a big mistake. If it says somewhere that a tutorial takes 3 hours, you can expect to spend several days on it. I only became aware of Spline today. So far I've only tried to do something with Three JS.

  • @wilmertheliooon
    @wilmertheliooon 5 месяцев назад +1

    Holy sh1t! I’ve been waiting for something like this for years!!!!!

  • @victorlin8307
    @victorlin8307 Год назад +7

    Feedback: Not sure if I missed something during video observation.
    50:45 Path Animation: "Path" or the "Apple" part of this file initially only has 2 states for animation transitions. After deleting the event for "Path 2" or the "Leaf" part of this file, "Path"/"Apple" has 3 states for animation. After rewinding that portion multiple times, I still did not see when "State 2" was added to "Path"/"Apple" although "Path" was selected by the user after the event for "Path 2".
    So my question is: What were the state settings in "State 2" for "Path"/"Apple" at 52:00? I did not anticipate frustration at that point although most of this video is nicely thorough and clear so far. I understand that there is really no wrong way to go about this specific thing and it doesn't matter eventually, but I am just trying to ask questions.

  • @GG-yc3sp
    @GG-yc3sp 11 месяцев назад

    I've been looking for such a good tutorial for days, thank you so much! And if I may say so: a great clear and very present voice! No "uh yes, then click here, or no, better there..."

  • @polatff6559
    @polatff6559 Месяц назад

    Hello in 1:41:39 i just cant find the TAB BAR animation thing because idk how many times I have tried to open the dropbox you have provided below ur description, it just gives me an error, can you let me know if you can make the link active agaain :)
    Thanks

  • @JesseMoffett
    @JesseMoffett Год назад +7

    Sold. Signing up for Spline now!

  • @BlayneOliver
    @BlayneOliver 10 месяцев назад

    WOW!! This is exactly what I’m after 🎉 THANK YOU 🙏

  • @JoaoPauloDev
    @JoaoPauloDev 9 месяцев назад

    So perfect, you're a excellent teacher, congratulations!

    • @sakhiwodlalisa4844
      @sakhiwodlalisa4844 9 месяцев назад

      I use an I7 12th gen G series 16GB RAM and yet it lags when I use Spline...how do I fix this?

    • @JoaoPauloDev
      @JoaoPauloDev 9 месяцев назад

      @sakhiwodlalisa4844 Same thing here, 3D is so cool but I think is not for now

  • @gabrielegelfofx
    @gabrielegelfofx Год назад +3

    2D UI feature was added recently. I'd like to see a course of the new Spline features. Thanks.

  • @dance4technolife
    @dance4technolife Месяц назад

    This is extremely valuable.

  • @cekuhnen
    @cekuhnen Год назад +1

    They are today actually pretty good

  • @pfzen2851
    @pfzen2851 Год назад

    cool soft, very variable & simple/user friendly

  • @jdfer1157
    @jdfer1157 Год назад +1

    28:27 The material assets is to pro. How can i use it o ricreate by my self?

  • @darialysak4591
    @darialysak4591 11 месяцев назад +3

    Thanks, first steps loooks nice! My wi-fi icon looks great. The question is how to understand what numbers I should apply for different tasks, now you just said to me "here is 200 and here is 140 and position on 0 here and 45 here..." but how to inderstand it to work alone without hints?

  • @boladeatiaro7957
    @boladeatiaro7957 11 месяцев назад

    Thank you for this wonderful video on creating 3d interactions for websites with Spline.
    RUclips recommended your video when I was watching CJ Gammon's channel.
    Liked this video and decided to subscribe.

  • @ed61730
    @ed61730 6 месяцев назад

    Amazing! More courses like this please :) Looking to offer ux spline as part of my 3d ux packages

  • @StevoCappuccino
    @StevoCappuccino Год назад +2

    you can tell the voice is AI generated, now maybe that's not an issue, but 13:27 - it's bevel not extrusion that's being adjusted to 10.

    • @natekuehl2678
      @natekuehl2678 Год назад

      Bingo. That confused me for a second.

  • @katolakehinde7141
    @katolakehinde7141 Год назад +9

    Quick note: at 13:27, you said "Extrusion" instead of "Bevel"

  • @InverserPro
    @InverserPro 8 месяцев назад +1

    inspirational video!

  • @AlbaEdits
    @AlbaEdits Год назад +2

    is sooooo cool. 3d is the futur 👌

    • @DesignCodeTeam
      @DesignCodeTeam  Год назад

      Definitely, Apple and other big tech are starting to use it more and more

  • @scottonanski4173
    @scottonanski4173 Год назад +6

    "As intuitive as Figma..."
    Glad to see you have sense of humor. lol

    • @DesignCodeTeam
      @DesignCodeTeam  Год назад +1

      Having tried so many 3d softwares, we find it pretty intuitive. What part is difficult for you?

    • @scottonanski4173
      @scottonanski4173 Год назад +8

      @@DesignCodeTeam
      Oh, it's not the 3D I mind, it's Figma. lol
      Example: A 'mask' implies it 'covers' that which is behind it. Like wearing a 'mask'.
      In Figma, you put a mask BEHIND all the elements - which is flat out stupid.
      It's like putting a mask on the back of you head expecting people not see your face. lol
      At any rate, I love your content. I just thought it was funny to hear someone refer to Figma as 'intuitive'.

    • @heretikpapy
      @heretikpapy Год назад

      I used masks a lot before figma, in adobe fireworks. But im doomed since then. @@scottonanski4173

    • @elpedomasgrande1
      @elpedomasgrande1 Год назад

      @@scottonanski4173masking is an established principle across all 3D/Graphic/CAD-Software. I understand your view regarding the mask metaphor, regardless it is the norm to use it this way. It refers less to the analogy of wearing a “mask” and more like “masking” known from painting, where you block out parts by covering them, for instance, with masking tape, so it is actually quite close to that principle.

  • @justrelax8199
    @justrelax8199 Год назад +2

    Is it possible to bind scene elements to the gyroscope?

  • @dizelvinable
    @dizelvinable Год назад +2

    Amazing!

  • @TheInternetsAttic-i3o
    @TheInternetsAttic-i3o 3 месяца назад +1

    it appears the spline files on Dropbox don't show, any help?

  • @trattface
    @trattface 5 месяцев назад +1

    Haven't been able to open the dropbox link. Have tried many times over weeks

  • @GrayscaleFashion
    @GrayscaleFashion 25 дней назад

    this is awesome

  • @PradipPaul-c9t
    @PradipPaul-c9t 7 месяцев назад

    Very good... 👍👍👍☺

  • @santhoshkumar-go6pg
    @santhoshkumar-go6pg Год назад +1

    i have a issue i create a 3D model in spline and export as react code and implement in my react project and i can't change the size of the 3d model it take the full width of the my screen how to solve this problem

  • @alikaram98
    @alikaram98 Год назад +2

    wow so nice
    tank's alot

  • @PhantasyAI0
    @PhantasyAI0 11 месяцев назад

    Please do more spline courses! Can you show us how to make cute pets with fur?

  • @martinzutelman1018
    @martinzutelman1018 11 месяцев назад

    can you program those buttons to do something? like for example, subscribe? or are they just used for decoration an background

  • @arthur_adams
    @arthur_adams Год назад

    is there a Figma file for the tab bar animation? idk maybe I missed it on the dropbox

  • @arcticxFF9
    @arcticxFF9 11 месяцев назад

    its very helpful thanks

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Год назад

    Thanks for video

  • @MantasVEVO
    @MantasVEVO 5 месяцев назад +1

    Dropbox link doesn't work :(

  • @mbrdesigns24
    @mbrdesigns24 7 месяцев назад

    Would I use it in free figma or should I buy the professional one or more..?

  • @andrewselivjorstovs1379
    @andrewselivjorstovs1379 5 месяцев назад +1

    Amazing video, guys! Well done and thank you on putting this together.
    Just wanted to let you know that the link to the files has expired.

    • @mornov379
      @mornov379 5 месяцев назад

      Please get it back, I want to learn the scroll interaction 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼

  • @orionblue7938
    @orionblue7938 11 месяцев назад

    Hey bro great content! could you help me suggest how can I use the same course but tweak it to present in my portfolio?

  • @clementbassey
    @clementbassey 8 месяцев назад +1

    How about a Rive tutorial?

  • @enjoynime7102
    @enjoynime7102 10 месяцев назад

    Front end developer : alright my ui designer try to killing me againts

  • @fbnxo
    @fbnxo 10 месяцев назад

    Is there any website that actually uses the tab bar navigation for mobile? Would like to test that

  • @אוריתמרגולין
    @אוריתמרגולין Год назад +3

    Is it possible to give the buttons on the cards "href", and make them work?

    • @DesignCodeTeam
      @DesignCodeTeam  Год назад +4

      Yes, you can do that by creating a mouse down event: docs.spline.design/7d99d64235414795a3c4237366c26060

  • @olivierturpinlavallee6153
    @olivierturpinlavallee6153 Год назад +3

    Thanks!

  • @sakhiwodlalisa4844
    @sakhiwodlalisa4844 9 месяцев назад

    I use I7 12th gen 16G Ram and yet it lags a lot when i use Spline. How do i fix this?

  • @nihalshaikh5530
    @nihalshaikh5530 11 месяцев назад

    can we later transfer the files to developers or he needs to make it from scratch just like figma

  • @CLY_-mj5tg
    @CLY_-mj5tg Год назад +2

    Can a flutter be integrated?

  • @ChrisTian-ox5nr
    @ChrisTian-ox5nr Год назад

    awesome thanks.

  • @MoreCreativeGFX
    @MoreCreativeGFX Год назад

    Amazing

  • @Janio4646
    @Janio4646 10 месяцев назад

    Oi. Tem alguma aula completa em português Brasileiro?

  • @InfoBlob
    @InfoBlob 4 дня назад

    Kindly Provide the Spline Files
    The Older file is not opening

  • @IFennecYouCODM
    @IFennecYouCODM Год назад +1

    to learn from this course do we need to buy spline subscription or Free one will do the job?

  • @martinzutelman1018
    @martinzutelman1018 11 месяцев назад

    Can you click those buttons?? do they work??

  • @Viva-07
    @Viva-07 Год назад +1

    Thank you

  • @haya3sa
    @haya3sa 4 месяца назад +1

    Dropbox link doesn't work

  • @ahaydnjones
    @ahaydnjones 6 месяцев назад

    Hi there. The Dropbox link for the files doesn't seem to work?

    • @DesignCodeTeam
      @DesignCodeTeam  6 месяцев назад

      Hi, we have tested the Dropbox link and it should work. Please try again thank you

  • @olyapustovalova9537
    @olyapustovalova9537 8 месяцев назад

    Thank you very much for the content! I started to follow this course 2 weeks ago and all worked good, but 2-3 days ago I tried to download files for last 3 lessons, and the dropbox link doesnt work anymore. Have you deleted the file? Or maybe the link is expired? Could you have a look please?

    • @DesignCodeTeam
      @DesignCodeTeam  8 месяцев назад

      Thanks, I updated the link: www.dropbox.com/scl/fo/6jr06jbjiktkgq2ex7sz1/ABPyUF_Yd8wDmAhH-voZ8hk?rlkey=wuspz1h39ijptf4255ezdqmbc&st=wj0t79j6&dl=0

    • @olyapustovalova9537
      @olyapustovalova9537 8 месяцев назад

      @@DesignCodeTeam Thank you!

  • @nosirve9458
    @nosirve9458 Год назад

    is it possible to do this with blender?

  • @PaulFidika
    @PaulFidika Год назад +1

    so what's the point of doing this? Unless you're creating an in-browser game this doesn't seem to make sense.

    • @Infinatummedia
      @Infinatummedia Год назад +1

      Flat sites are flat. You can fudge it a bit with absolutes, shadows, z-index, transforms and some react tricks, but at the end of the day all the content is physically fixed to a single plane. I don't know whether splines will help me get where I want to go, but I'm happy to try anything to stop being limited by that plane in my design. The current other contender is learning the whole stack for 3js or aframe

  • @varunsalat619
    @varunsalat619 Год назад +1

    if there was a human voice it would be great but still a great tutorial for beginners 🎉
    Waiting for more beginners friendly tutorial 😊

  • @jonnysolaris
    @jonnysolaris Год назад +220

    These AI voices are everywhere now, am I the only one that finds them uncomfortable and distracting?

    • @DesignCodeTeam
      @DesignCodeTeam  Год назад +109

      We believe this is a better experience. Most of our team isn't native English speakers (we're French). We have thick accent and it wouldn't be consistent across the whole video working as a team. So we picked the most natural AI voice using Eleven labs.

    • @jonnysolaris
      @jonnysolaris Год назад +27

      ​@@DesignCodeTeamI understand. It's a cheap and easy solution. Maybe I was asking about the big picture. Literally every other video has these, or the TikTok voices, they're a little creepy. The 'uncanny valley' for voices!

    • @mustafahadi3613
      @mustafahadi3613 Год назад +28

      Very uncomfortable and most of the times i skip these videos even the shorts

    • @amanjeetshrivastava1448
      @amanjeetshrivastava1448 Год назад +5

      ​@@DesignCodeTeamyou did good❤️ but voice is a sharp pitchy, maybe that's making people uncomfortable.

    • @vitalysuper3193
      @vitalysuper3193 Год назад +1

      @@DesignCodeTeamthe main problem is that youre using generated voice, you should use some fancy new ai tools either translate the video from your native language or generate it using newer tools so it sounds fluent

  • @huynhkhoiminh
    @huynhkhoiminh 10 месяцев назад

    Nice design, but I have a question, how can I realize all of them to a real website, I mean that Which framework and library can I use to develop all of 3D design above?

    • @DesignCodeTeam
      @DesignCodeTeam  10 месяцев назад

      Spline lets you embed their 3D asset to any site, using React with ThreeJS or directly to Framer, Webflow, Wix, etc.

    • @huynhkhoiminh
      @huynhkhoiminh 10 месяцев назад

      @@DesignCodeTeam thank you so much

  • @literallyme.memes.
    @literallyme.memes. 6 месяцев назад

    the dropbox file is showing error when opening. pls fix it

  • @VonMellArevalo
    @VonMellArevalo 8 месяцев назад

    I can't group the the four shapes, why?

    • @VonMellArevalo
      @VonMellArevalo 8 месяцев назад

      Whenever i am dragging the cursor , it end up exchanging position of eclipse instead of grouping. What i need to do?

  • @InfoBlob
    @InfoBlob 4 дня назад

    It says dropbox is empty

  • @gustavoalonso8931
    @gustavoalonso8931 10 месяцев назад

    I miss your videos... 😭

  • @Lamya-dm1bs
    @Lamya-dm1bs 9 месяцев назад

    Do you this in fgma?

  • @Arthuur9
    @Arthuur9 4 месяца назад +1

    dropbox folder not wokring

  • @joeldrennen
    @joeldrennen Год назад

    Anyone else getting flashbacks to when Flash was everywhere on the web?

  • @SXsoft99
    @SXsoft99 Год назад

    it's not that 3d is not cool but i think most developers forget that people still use old phones and laptops, and 3d will kill their GPU
    when I started web development 8 years back there was a course saying that your website needs to be reachable and interacted with even by people that have styles disabled
    lately i feel there is too much "flash" on my screen

  • @ivancalisaya4218
    @ivancalisaya4218 Год назад

    buen video

  • @silver10188
    @silver10188 Год назад

    5:10 this course isn't free. It says get Pro at %50 off.

    • @DesignCodeTeam
      @DesignCodeTeam  Год назад +2

      That's for the premium courses on the site, not for this course specifically. We have some free courses there.

    • @MACH_SDQ
      @MACH_SDQ Год назад

      go ahead i already did get Pro !!!!

  • @warsin8641
    @warsin8641 Год назад +1

    this looks just as hard

  • @diogomosaic2177
    @diogomosaic2177 7 месяцев назад

    the donwload isnt working

  • @3ric908
    @3ric908 Год назад

    Can’t understand why they don’ add a timeline 😢

  • @RyuBeach
    @RyuBeach 11 месяцев назад

    무슨 프로그램인가요

  • @gunadAgp
    @gunadAgp Год назад

    i likeed you jood jobs

  • @MoreCreativeGFX
    @MoreCreativeGFX Год назад

    Great

  • @برنامجبانوراما
    @برنامجبانوراما Год назад

    Thanks

  • @why
    @why Год назад

    insane

  • @vladterra7353
    @vladterra7353 Год назад

    is it possible to integrate into Shopify themes? If yes, tutorial will be very helpful for many

  • @Lichtsucher
    @Lichtsucher 7 месяцев назад

    💙💙💙

  • @yuritian8830
    @yuritian8830 8 месяцев назад

    Я так и не понял. Зачем?

  • @SehrishMoujahid
    @SehrishMoujahid Год назад

    can i use blender instead of spline

  • @SOULITUDE-xoxo
    @SOULITUDE-xoxo 10 месяцев назад

    🐼- was here

  • @matthew33.714
    @matthew33.714 10 месяцев назад

    This introduction needs an introduction.

  • @uxkayan
    @uxkayan Год назад

    Hi! Can you generate a certificate?

  • @akanahketo5823
    @akanahketo5823 21 день назад

    Animations doesn´t work.

  • @InfoBlob
    @InfoBlob 7 часов назад

    Is anyone here to help? Please

  • @f7kev
    @f7kev Год назад

    Noice!!!

  • @user-il9qo4qc4n
    @user-il9qo4qc4n 11 месяцев назад

    Why the AI voice over?

  • @themotivationlive
    @themotivationlive 4 месяца назад

    😊😊😊😊😊

  • @zharrysssn1861
    @zharrysssn1861 Год назад

    what software is this i am new

  • @Formadvpart2BillionaireGuillen
    @Formadvpart2BillionaireGuillen 10 месяцев назад +1

    Formadv_part2_100 luxury edtion

  • @zion-faithakakpo6602
    @zion-faithakakpo6602 9 месяцев назад

    13:10

  • @ianthehunter3532
    @ianthehunter3532 Год назад

    Looks cool, is it free.

  • @桑千蕴
    @桑千蕴 Месяц назад

    Spline is a web??? Figma???

  • @windows12r
    @windows12r 2 месяца назад

    You were sponsored by Spline, yet we can't follow the course because the files mandatory for the course have a broken link.
    People have been complaining for months and requesting a new link and you have been lethargic at best, to provide a new one.
    You're doing a disservice to Spline, the community and your own reputation.