3D Scroll Interactions in Webflow

แชร์
ฝัง

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

  • @davdfranzen
    @davdfranzen ปีที่แล้ว +17

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

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

  • @hoaithuong8088
    @hoaithuong8088 ปีที่แล้ว +8

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

    • @timothyricks
      @timothyricks  11 หลายเดือนก่อน +1

      So glad to hear this! Thank you!

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

      and I can't find the framer version

  • @christhedon420
    @christhedon420 5 หลายเดือนก่อน +1

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

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

      Thanks so much! I’m really glad these help

  • @tshmn
    @tshmn 8 หลายเดือนก่อน +1

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

  • @3dkiwi920
    @3dkiwi920 9 หลายเดือนก่อน +4

    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.

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

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

      It’s amazing how easy no code makes this!

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

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

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

    amazing tutorial as usual

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

  • @davidkathrein9644
    @davidkathrein9644 11 หลายเดือนก่อน +1

    Great as always!!!

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

    Damn that was cool 👏

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

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

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

    • @timothyricks
      @timothyricks  2 หลายเดือนก่อน

      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.

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

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

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

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

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

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

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

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

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

  • @solomonadlam8083
    @solomonadlam8083 11 หลายเดือนก่อน

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

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

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

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

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

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

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

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

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

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

  • @Layquins
    @Layquins 11 หลายเดือนก่อน

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

      @@timothyricks Thank you!

  • @user-kn1bl4ud6m
    @user-kn1bl4ud6m 11 หลายเดือนก่อน

    we need this in framer

  • @blasty3661
    @blasty3661 11 หลายเดือนก่อน

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

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

    • @blasty3661
      @blasty3661 11 หลายเดือนก่อน

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

    • @vlastimilslechta8927
      @vlastimilslechta8927 11 หลายเดือนก่อน

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

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

    Niceee

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

    😮