3D Scroll Interactions in Webflow

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

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

  • @stylesraw
    @stylesraw 17 วันที่ผ่านมา

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

  • @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 11 หลายเดือนก่อน +1

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

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

  • @3dkiwi920
    @3dkiwi920 11 หลายเดือนก่อน +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.

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

  • @tshmn
    @tshmn 11 หลายเดือนก่อน +2

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

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

    amazing tutorial as usual

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

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

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

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

    Amazing Timothy !

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

    Thanks Timothy!

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

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

    Damn that was cool 👏

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

    Great as always!!!

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

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

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

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

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

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

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

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

    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  4 หลายเดือนก่อน +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 4 หลายเดือนก่อน

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

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

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

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

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

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

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

  • @מיטליימר
    @מיטליימר ปีที่แล้ว

    we need this in framer

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

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

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

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

  • @000SilaS000
    @000SilaS000 หลายเดือนก่อน

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

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

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

    Niceee

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

    😮