GSAP with Webflow development - Part 1 - The Setup

[@Saiidsadiikii]

thank you so much for this useful video 😊😊😊

[@dimitrisqq]

I have been using for a little over a month Armand's template and it works wonders! One thing though, i have noticed some difference in latency when deploying solely from netlify. At the moment i'm leaving Netlify's server only for testing between different devices and when finalized i'm just inserting the code inside project settings! Cheers and thanks for the gsap, waiting for the upcoming parts!⚡

[@desluv-now]

Absolutely, great point! I also think on real project, once the development is finished, I would also insert the final codes into Webflow. At least we would have all of the developed code backed up on GitHub and ready to be used again if necessary. On upcoming part 2 will be covering GSAP tween. Thanks!

[@Hysteriamute]

Thanks! I think this is a great technique and can’t wait to try it out. Personally I’ve been using a codesandbox js file for developing and then pasting the code in the project settings when ready for production. I saw Timothy Ricks doing it in his tutorials recently and it’s a pretty quick and easy with the same result.

[@desluv-now]

Very true! The codesandbox is really awesome, and you can achieve the same result without the live load feature. I just thought to show an alternative method to do the development that feels more like a full stack dev environment. Also, I am curious if using this technique can work for Three.js and Webflow... remains to be seen.

[@dimitrisqq]

Codesandbox's technique is probably better for a very small & quick project and you can anticipate the results, or a more beginner-friendly, somebody that probably follows someone else's code.. When testing thoroughly more javascript lines, Armand's vite-js-webflow template (and any kind of these templates) have live-reload feature where when you save it is automatically reflected in the browser without Reloading. This can be a HUGE time-saver!

[@Hysteriamute]

Good point! This would work great for threejs I feel. I think the vite-js-webflow method is superior, however, for something small and quick codesandbox is a nice option too. Thanks again, and keep it up! Enjoying your videos.

[@desluv-now]

You both got me thinking now... I think for the future videos of this series, I may switch over to codesandbox to show GSAP stuff so more people can follow along. Rather, save the advanced technique for three.js tutorials. Thanks so much for the feedback!!

[@dimitrisqq]

@@desluv-now please dont! Code is the same! You may just show the way to do it with codesandbox but stick with the faster one!

[@F1veD0llarShake]

This is awesome. Thank you very much. Im looking forward to your gsap videos.

[@desluv-now]

Thanks! More to come!

[@sebobastiseppobas]

Nice tutorial, thank you!

[@desluv-now]

You're welcome!

[@mohammadjavad1136]

Wow very usefull

[@desluv-now]

Glad to hear that

[@konohadesign1471]

Hi, thanks a lot for this tutorial. There are two things that i am asking myself right away after seeing this. Is it possible to upload the whole code (also from webflow) to netlify and have everything in one place? Is it possible to also add HTML pages to the code?

[@stasbondar1135]

WOW Thank you! It was really useful for me Can we upload difirent scripts for diferent pages. For example: .../home.js for home page or .../about.js for about page?

[@desluv-now]

Great question! I believe you can. In the main. js, I use it to write the code, but you can use it as a trigger file. So what I mean is, add a js folder in the src folder, and in it, add your home.js, about.js...etc. And in the main.js file, just add import './js/home.js' and import './js/about.js' ... etc. There you can write your js codes separately. Although I haven't tried it, if you are willing, please report back if it works. Thanks! 😄

[@stasbondar1135]

@@desluv-now Hey there! Is here any possible way to divide the code for projects? Because now when I run local server the code run on all projects. We can change the link inside of the Webflow code to Local server, but it's not really useful

[@desluv-now]

@@stasbondar1135 If I understand correctly, do you mean maintaining your codebase in your single local set-up to manage multiple Webflow projects?

[@BGary65]

Thank you!!

[@desluv-now]

You're welcome!

[@davidjirschitzka2775]

why did part 2 never saw the day of light? are you still producing it ?

[@desluv-now]

Thanks for your comment! I just so busy with my day job and family duties that I did not have time. Also, there are so many amazing Webflow tutes that are popping up all the time that I feel like I am over saturating the system. ;-) Also, I have been getting interested in Bricks WP builder lately because more projects are requiring WP dev. Sigh... I will love to continue when some time frees me up. Thanks again!

[@isaacosei8299]

@@desluv-now I was literally about to ask the same question above. I cannot fault you on this, life happens to all of us. Thank you for this video, I can safely move forward.

[@dylancozian]

Thanks for your tutorial mate :) !! But I've an issue, everything goes well, until I change something in the main.js. For exemple, if I erase all the code (as you do), and save the file, have got que 500 error 😢

[@dylancozian]

Well, I find the issue :D

[@zayndejohn2432]

You never made a continuation

[@desluv-now]

Thanks for your comment! I was so busy with my day job and family duties that I did not have time. Also, so many amazing Webflow tutees are constantly popping up that I feel like I am over-saturating the system. ;-) Did you, by any chance, check out some tunes from Finsweet? They go into much more in-depth than mine. Also, I have been interested in Bricks WP builder lately because more projects require WP dev. Sigh... I would love to continue when some time frees me up. Thanks again!

[@zayndejohn2432]

You are definitely not oversaturating because I have watched finsweet but never grasped everything the way I did with this video start to finish this took me 30 minutes so you definitely helped, thank you very much 🤝🏼🤝🏼

[@zayndejohn2432]

When you do get back to the gsap geeky stuff I will be watching