GSAP & ScrollTrigger Crash Course for Webflow
HTML-код
- Опубликовано: 5 дек 2023
- Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=g...
Join my Webflow Wizards Community
/ timothyricks
GSAP Ease Visualizer
gsap.com/docs/v3/Eases/ 
Хобби
I always wonder why webflow interactions aren't based on gsap. It would make things so much easier and there would be more options when it comes to making creative animations
I still have hope that we'll get that update one day
Webflow's interactions are (in my opinion) the weakest/most limited feature of Webflow, which is the reason why I decided to start learning JavaScript and that brought me to GSAP animation library. Amazing that you are now creating Webflow x GSAP content - exactly what I need now! :D
Mee too
amen
I would not say Webflow's interaction is the weakest feature of Webflow since lots of Webflow users come to webflow for it and we can still create cool stuffs with it. I think of it as a drug, you come to webflow for the interaction then you got addicted and want more, that's when GSAP comes to play. And yes, I'm addicted.
@@thaitranvan8646 do you have portfolio? I would like to see the implementation of GSAP functions with Webflow.
do you have any idea where I can find beginner-friendly tutorials for Jscript I want to learn as well
One of the best GSAP tutorials out there. Loved the pace, designs, explanations, everything was really clear. Thanks!
This was the video I've been waiting for. Thank you for the quick walk-through.
THANK YOU FOR THIS! I really needed someone to explain me GSAP for webflow from scratch , and you explained everything.
Thanks for breaking down the process of using GSAP with Webflow. Gold.
This looks like a streamed-lined version of webflow interactions, designers could save so much time by implementing them, thanks for sharing!
This is the GSAP tutorial I've been waiting for!!!
my dude, this is the coolest gsap introduction I've seen so far. Really big thanks for doing this clip!
Thank you so much! I’m so glad this helps
@@timothyricks my pleasure. I have one question for you. What is the best way to load the gsap library into webflow in real projects? So that the library is available globally and then where should the script for each section or page be placed?
This is what I wished for Christmas. You are the best Timothy! thanks!
Haha, thank you! 😂 Merry Christmas!
Absolutely love these kind of content! Thank you so much!
Great explanation of GSAP basics.
Great video, Timothy! 🚀
Man, are you reading my mind? I totally needed it :)!
Thank you Tim. Learned a lot today. :)
6:54 this is exactly what i wanted thak you so much!!!
This is awesome. Thanks Tim.
So glad this helps, Jordan!
Thanks! Great tutorial 👌
Awesome. Thanks for the lesson 🤘🏻
I'm no webflow guy, but it helps tremendous in every js aspect. 🚀
I love your gsap videos! THX! ;-)
Another banger. Great tutorial!
Thank you, Skylar! Hope you’re doing well, man!
this is awesome!!!
Hi Tim, have you ever considered to create a GSAP Builder tool?(Like your JQuery Builder) It will be so cool and useful for all the folks passionate about this library! 🤩
Another Banger :D Shot Tim!
Thank you Tim. Fantastic tutorial and really well explained. 👏
So glad this helps! Thank you!
Tim striking gold once again! Thank you 🎉
What is that sidebar app you are using to switch back and forth from webflow and gaap?
So glad this helps! I’m using the Arc browser for Mac which puts the tabs on the side.
Really great video. But I'd love to hear your perspective on why do these specific animations with GSAP - you could have done all of them using the native interactions, possibly faster and in a more visual way.. I can see why the staggering is helpful in saving time (mainly if you're staggering letters on texts)... but beyond that.. what's the benefit? 🖤
Thank you! Since this is a beginner tutorial, I didn't cover many of the advanced things that set GSAP apart. But here's a couple things shown in this tutorial that Webflow IX can't do.
1. Delay the start of a looping animation / pause looping animation
2. Trigger scroll into view only when element enters from screen bottom
3. Reverse animation on scroll out without needing a separate scroll out of view animation
4. Precise control of start and end points for "While scrolling in view"
(Usually we have manually offset the end state for sticky interactions)
Also, many CMS-driven interactions are impossible with Webflow IX alone. For a while, I was reluctant to try GSAP, but it makes complex interactions much faster to build and opened my eyes to countless Webflow IX limitations.
Sort and sweet, love these type of videos. Can you tell me what do you use for screen recording?
Thank you! I’m using Screen.Studio
@@timothyricks Awesome, thanks! Keep up the great work!
Awesome video, Tim! Thanks a lot! Is the full course available somewhere? I can't find it on your Patreon landing page.
So glad this helps! My GSAP lessons are scattered throughout my Patreon page but all together for patrons here.
www.timothyricks.com/?*=GSAP+Course
Thanks Tim! I definitely would pay for a gsap course made by you 🎉
this is a really good gsap explainer. maybe you can help me with a problem. I am animating paths on a map. at the end I have a "scrolltrigger" set that scales the div element with the map inside. This is working fine until the screen size changes. Without the scaling, the map image is centered as it should be. Once I scale the div with the map image inside it is not centered anymore. Do you know a way to ensure the div stays centered even after scaling? Thanks a lot !
Hi Timothy, I love your development videos, but in each video I also notice that the designs used for the tutorials are stunning? Are you planning to do videos on the design side? I can't find good channels for the more high level design tutorials
Thanks so much! I’ve been considering making some design videos. I’ve made this one before. ruclips.net/video/7izIK_HKdQc/видео.htmlsi=1TR6cYdlwQEJGQPC
what could go wrong that sometimes the script i'm editing in codesanbox isn't visible on the webflow site? how can i debug this as it's not showing any error in console? i got it working and now it's not any more, a code error? even if i delete all the code in the js file and write a simple gsap line, won't work
Hello, Thanks for the video. Sorry if my question is basic, I am a newby in JS / GSAP. How to run GSAP animation after finish the window.onload ???
can i import whatever animation library i want in webflow ? like framer motion ?
Thanks for this tutorial! I'm actually a bit lost because in my codesandbox it doesn't recognize .js and is giving me a blue icon instead, so my view totally looks different from yours, it doesn't seem to recognize gsap and says "gsap className=" in purple, etc. Do you know what might be wrong?
Great
Great Content.
What is your OS you have a side taskbar?
Thank you! It’s the Arc Browser
Hey Tim, I was looking to implement some animations on a website that was built using lumos. I quickly found out that when trying to animate an element that was styled with the frame work, spelling mistakes are more common. Is there a way to target class names with lumos styles without writing every --utility applied? Thanks
Hi Diego, I recommend targeting by data attribute instead of class name. It allows us to reuse interactions across elements with different class names and prevents issues if classes ever get renamed. Instead of ".class-name", we can use "[data-attribute-name]". Or if you want to narrow it down even more, "[data-attribute-name='value']"
@@timothyricks That makes so much sense. Thank you!
Why is it that if I add the smooth scroller from gsap with the scroll trigger, it no longer works? Could you make a video where you explain how to integrate both?
How to enable the same color-markup in code sandbox?
Great tutorial, I've always wanted to learn GSAP and this will help a lot so thank you very much. Just one question, how can we make the animations happen like in your video? For example the thumbnail-images look like they are animating from opacity 0 to opacity 1, but in my case, I see them first with opacity 1, then goes to 0 and then animates to 1 again.
I know it happens because Javascript runs after all elements are rendered, and CSS runs instantly, but is this really the only option ?? ---> add some css in the head code section to set the hero-section or any element we're animating to hidden by default.
.hero-section { visibility: hidden; }
.w-editor .hero-section { visibility: visible; }
Then at the start of our timeline, we can set the hero-section back to visible since the GSAP initial states are now ready.
let tl = gsap.timeline();
tl.set(".hero-section", { visibility: "visible" });
Hi Travis, glad this helps! The only other option for avoiding the flicker would be to set the thumbnail images to opacity 0 in the Webflow designer and use a gsap.to opacity 1 instead of gsap.from opacity 0.
Hey Tim, could you explain how to solve the problem of it loading in, then playing the animation, as it jumps from the original state to then the GSAP animation timeline, thanks.
Sure thing! That flicker happens because Javascript only runs after all elements are rendered. CSS runs instantly though. So we can add some css in the head code section to set the hero-section or any element we're animating to hidden by default.
.hero-section { visibility: hidden; }
.w-editor .hero-section { visibility: visible; }
Then at the start of our timeline, we can set the hero-section back to visible since the GSAP initial states are now ready.
let tl = gsap.timeline();
tl.set(".hero-section", { visibility: "visible" });
How do you deal with scroll start and stop when also have lazy load on images. Gsap cannot figure this out and I see many with this issue online. Do you have a nice solution, because I still want the performance and not loading all my images.
Good question! I apply Webflow’s new aspect-ratio property to all images so the page height doesn’t change even before the images are loaded in. This is a good practice not just for GSAP because it helps prevent unwanted layout shifts for people on slower internet connections.
would have loved a cloneable to play along with the video so I can better understand how everything works. Great video tho!
Hi, the cloneable is in the video description
What's the best performance wise, using Webflow interactions or GSAP? A lot of these can be done in Webflow directly, does GSAP uses less code to achieve the same?
Yes, GSAP is definitely the lighter solution. If we add a single Webflow interaction to our project, it adds the entire Webflow IX file to our site (about 127 kb). As of v3.12.3, GSAP is about 74 kb, and even with ScrollTrigger added, it's still smaller.
GSAP's the industry standard for interactions because they're hyper focused on optimizing performance and making the experience consistent across devices.
It's also easier to maintain GSAP animations. It often only requires us to set a from or to state instead of both. And allows us to play and reverse a single timeline for menu open or link hover interactions instead of having to create a separate interaction for the close state.
That's true 👍
Hey Tim, do you have a web design course?
Hi, not yet :)
what is the difference between using GSAP and webflow internal animations?
Had the same question. I mean... it's obviously code based, but is it better to go full gsap? Looks like it brings more functionality and capabilities.
@@GabrielLeFrancois Good questions! I use only GSAP for my client projects. It's nearly limitless and much faster to work with once you learn it. It also allows us to animate a lot of properties that Webflow can't like clipPath. A lot of Webflow limitations when creating CMS-based scroll interactions are easily solvable with GSAP.
Amazing tutorial, as always! Now I get it :)
However, I had an issue with using a codesandbox script within Webflow - it seems the script was blocked by Webflow (Cross-Origin Read Blocking (CORB) blocked a cross-origin response.). Do you have a solution for that? 🙏
Hi, thank you! CodeSandbox updated recently to no longer allow embedding code. I use slater.app instead now
@@timothyricks thank you, will give it a try!
Great stuff, works straight away :) I'll actually utilise 3 of your tutorial concepts in a single project, so that's amazing, thank you for that!
Oh, awesome! So glad to hear that!
@@timothyricks Glad I found this comment as I've just had the same issue! Might be worth adding a note to the description as I imagine many people will run into the same. Great tutorial as always, thanks so much!
Why do I need to create sandbox account to write script code. Could I do this same thing in webflow. Adding gsap cdn and writing script code both? Please Guide
Yes, we can definitely write JavaScript directly into Webflow. But we would have to republish the site for each change we want to preview. Webflow’s code editor also doesn’t any have auto formatting or error detecting so it’s a much slower process.
🎊
Somehow this doesn't work when I'm doing this. I'm following exactly your steps, but when I'm writing the code using sandbox, nothing seems to work. It seems like the sandbox file is not connected to Webflow.. Does anyone know what I might do wrong?
Hi, I think CodeSandbox limited their free plan recently. I’ve switched to slater.app
@@timothyricks thank you, appreciate it!
Seems like this no longer works for me... Codesandbox changed their plans and now all sandbox drafts are private. Not sure if that's the reason but now the script.js can't be reached? Not sure but it's a CORB issue? :(
Hi, sadly starting today CodeSandbox no longer allows this on the free plan. Slater App is a great alternative built specifically for Webflow. slater.app
TIM THANK YOU! I even dmed you on instagram hoping for a reply. I’ll look into it right away, thanks again 🙏🏽
Thank you so much. I LOVE GSAP~~~
Same here! 😄
I've done exactly the same steps to begin, but for some reason the scroll is not triggering. I can't get the basic thumbnail to scale down. The JS link is all loading but I'm not sure what's going on with the connection between Webflow, GSAP and CodeSandBox :(
The GSAP scripts aren't really triggering, even when I add the script directly into Webflow code editor.
I figured it out. JavaScript wasn't recognising my styles that began with a number... I had a numerical value in-front of my styles. :D
Oh, so glad you got it working! Webflow adds an underscore in front of any class name starting with a number
@@timothyricks Thanks so much for all the tutorials. I think your process and explanations are always so clear and easy to follow. Really appreciate it. You have a fan :)
Oh, thank you!! I’m so glad these help
how will these animations be like on mobile devices?
These work the same way on mobile.
gsap-crash-course.webflow.io/
I want GSAP + Spline integration 😁😁
What tool did you use to record this video? Video is so smooth
Thank you! I'm using Screen.Studio
this is awesome!!!