You should totally make a youtube-short or a shorter video from the same Material that just focusses on "How to integrate a spline scene "manually" in webflow". I think this aspect of your tutorial is kind of hidden and some ppl are maybe just looking for that. 🙂
I'm starting to grasp the train of thought behind custom code with your approach of explaining everything, step by step, line by line. Really appreciate you putting the time and effort into recording this. Hope you’re having a good day, cuz you’ve made mine a great one.
Bro you have a talent for explaining things, I follow pretty much all the Webflow content creators and your tutorial pace, content, and quality of design, is among the best. Please keep making videos.
Dude, you can't imagine how happy this makes me. Before my first tutorial, I was unsure if I could do this. Reading this motivates me so much, thank you!
Thank you! This is perfect. Webflow for REAL design, not just coffee shops… We want MORE 😅 MORE 😅 Pleeeease. Webflow + Spline + Code, for creatives who know design really well, and don’t want prebuilt sections and templates and tragic typography and AI-generated content.
Honestly, amazing tutorial! I'm not a developer but do have some basic understanding of coding/JS so this is the perfect pace for me. Thanks a lot for also integrating the setup, as a lot of coding tutorials skip that part! Watching you makes it seem pretty achievable and makes me want to play with it! Thank you so much Dirk!
RU-vid recommend me your content and i very happy to fall here ! I need to know more about GSAP and you explain very well how build amazing interaction and animation. #feedmemore
this is amazing, beautiful design and excellent tutorial. how is the performance with something like this? I'm not sure how diplace layers affect polygon count, but I've found that small files with large poly counts still lag my existing webflow interactions (like infinite marquee).
Hi Dirk, quick question: When I implement the gsap animation like you did for my title, it doesn't happen in quite the same way. your h1 is put in 1 div and you split it via SplitType and then you animate the yPercent 100. In your case it looks like each of the H1-lines is animated from it's own div with overflow hidden: each word kind of gets revealed on it's own. In my case, the words are just located 100 percent further down, but not hidden as in your case, if you understand what I mean. Do you know why that happens? I've checked your HTML setup and I couldn't figure out why your animations looks different!
Hi Johannes, when you applied SplitType, you can simply give the .line class an overflow: hidden. Then you can animate the .word via yPercent and it will be cropped.
Ah okay, therefore the h1 has to be a , right? because my h1 doesn't get split into lines, my p does tho.. @@design2code and would you assign the class in the global-stlyes embed? Also overflow: hidden; on the .word class should work too, right?
@@JohannesFraundorfer It should work with every HTML element. I quickly created this CodeSandBox for you, there I used a H1: codesandbox.io/s/suspicious-bush-d448vm … I usually add CSS via embed. So then it is directly visible in the Webflow designer.
@@design2code thanks so much, weird... I kind of did the same, still not showing like this... well gonna have to troubleshoot later, if I find the problem I'll let u know haha
In general, GSAP is in many cases more scalable than the Webflow Interactions. In this video I did not animate the Spline elements directly via GSAP, but only the corresponding HTML wrapper. If you use the native Spline integration in Webflow, you can't animate the elements separately with GSAP (as far as I know). If you want to animate Spline elements with GSAP, you have to include Spline via custom code (JavaScript), then you have full access to the Spline objects and can control them via GSAP.
Oh, and by »more scalable«, I mean you can edit, add and remove timings and animations much faster with GSAP. You have more control over the entire timeline.
Thank you so much! That's exactly what I'm planning right now. I'm currently considering whether Slack or Discord is better for it. When the community is online, I'll be happy to let you know.
