3D Scroll Interactions in Webflow

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

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

  • @stylesraw
    @stylesraw 27 дней назад

    EXACTLY what I was looking for, and concisely put with no fluff. Well done!

  • @hoaithuong8088
    @hoaithuong8088 Год назад +10

    Finally found a video talking about scroll trigger for Spline x Webflow instead of Framer. Love it so much, thank you 🥰

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

      So glad to hear this! Thank you!

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

      and I can't find the framer version

  • @davdfranzen
    @davdfranzen Год назад +18

    This video was a real work of art! You managed to pack so much content into just 5 minutes. I would love to see more of these shorter videos from you. Keep up the great work.

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

      this video is not beginner friendly💀 but its a 5mins tutorial so its justifiable

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

    based TRicks your videos are always so clear and concise. thank you again!

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

      Thanks so much! I’m really glad these help

  • @3dkiwi920
    @3dkiwi920 Год назад +6

    Spline/Webflow would be cool if you could output raw html/css/java, this dependencies bullcrap is out of hand; it's like every website is built like a house of cards.

  • @tshmn
    @tshmn 11 месяцев назад +2

    Oh my god, I was looking for this for a long time, thank you

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

    Simple, short, on point tutorial, Thanks 🫡👍🏻🙌

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

    Thanks a lot for all the information on this tutorial! I always wanted build something like this, but I never knewd how to start without be a great developer! No-code tools are the bridge in these days.

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

      It’s amazing how easy no code makes this!

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

    amazing tutorial as usual

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

    Thanks Timothy!

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

    Amazing Timothy !

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

    Awesome video and very easy to follow along! I've never used spline and I noticed that to remove the logo it's a monthly subscription, if I only want to use it once for a specific website is there an option to purchase the file or something?

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

    Hey Tim could you make a video about how to set lottie animations as a full-width background with other elements on top and make it scale the same way an image does when set to "cover" please? I could not figure it out after spending the whole day searching online although there's many people with the same issue, I'd really appreciate it, thanks!

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

    Incredible! How did you learn to use spline so fast!? It looks amazing!

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

      Thank you! I’ve been watching their official tutorials which really help. The learning curve isn’t huge

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

    Great as always!!!

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

    Good tutorial) But how to make scroll animation duration not in pixels but in % of page or vh? Now you have to make individual animations with different durations for different width of screen, right?

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

      We can use the page or the canvas as the start trigger, but the end offset can only be set in PX currently. Hopefully, Spline adds other unit types in the future. From what I tested though, the px offset seemed to work well for most screen sizes.

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

      I heard that webflow working on a feature where you can upload 3 object files that you can then animate with interactions, that would be 1000% better, but we always appreciate the content Timothy 🔥 @@timothyricks

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

    This absolute content man! Are able to do something like this with the same embed file on figma?

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

    @Timothy Ricks ? How do you learn these things ? Why do you know all the Background information about these Programms.

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

      I watched some of Spline's own tutorials which helped a lot, did some research on Google, and a bit of testing things on my own.

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

    Damn that was cool 👏

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

    Hi Timothy, was wondering when bringing the spline object to webflow, what's the advantage of using this route instead of used spline - scene native component, to animate?

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

      Hi, this tutorial was made before Webflow released the spline element natively. The Spline element offers more control by allowing us to animate the element using Webflow interactions.

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

      @@timothyricks ahh I see, OK then . Thank you 🙌🏼

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

    I need help hiding the background colour it still showing black when i put it onto webflow?

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

    Amazing tutorial as usual, do you have any suggestions for optimizing this for Safari? Spline behaves really poor there, sometimes it doesn't load the scene at all, sometimes lags insanely

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

    Is it possible to remove the "built with Spline" watermark? I have the most expensive version (Teams) so..

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

    I need some help, how did you manage to have the text float above the spline scene?

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

    How about change to state 3 after 500px ? :) I mean : how to map page scroll position to different _STATES_ so they change accordingly ? :)

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

    that's really good, but that 3d element weights a lot

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

    Thank you for the tutorial.
    I want to clarify something. I'm currently using the free plan on Webflow for learning purposes. I plan to create a portfolio for my website using Webflow, which will require embedding some code that requires a paid plan.
    Once I've paid for the plan and successfully built my website, do I need to keep paying for the plan to ensure my website continues to function with the embedded code, or will it still work even after my plan has expired?
    Thanks in advance

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

      I think once the code is in the site, it will stay there even after the plan ends. You just can’t edit it anymore. I could be wrong about that, but I know when cloning a cloneable with custom code in it, the custom code still runs on the free plan

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

      @@timothyricks Thank you!

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

    can the samething be done in squarespace? Please help :)!!!

  • @Anayaadhikencana
    @Anayaadhikencana 2 дня назад

    how do you test the scroll in play mode?

    • @timothyricks
      @timothyricks  День назад

      We can’t with this old method, but Webflow released a native spline integration now that works with Webflow interactions and play mode.
      ruclips.net/video/NhtNciucUOE/видео.htmlsi=lRo4RwjBSIXoQz6w

  • @מיטליימר
    @מיטליימר Год назад

    we need this in framer

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

    How about responsivity? I insterted the embed in Webflow and it looks fine on desktop, but on smaller devices it does not scale like an image.
    I've tried to set the camera to Perspective and size to Responsive in Spline, did not help either:(
    Anyone know if it's possible to make it responsive in Webflow?

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

      Good question! Under events, Spline has a resize event where we can adjust the camera for each breakpoint.

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

      @@timothyricks Didn't know about this one. Thanks!

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

      @@blasty3661 did it work? I wasnt able to do it with the laptop from Spline library.

  • @000SilaS000
    @000SilaS000 Месяц назад

    this is spline and it takes 2 hours to load a website like that

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

    Niceee

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

    😮