This Video and the simplicity behind the Gsap Animation + the Great Explaining of yours motivates me even more to learn GSAP for Webflow. Excellent Work Ilja!
Thank you SO MUCH for explaining the code!! I wish T.RICKS explained it more often like you did, I feel like I’d have a much better grasp on coding using gsap already 😅😅
This is great! One thing - it looks like on the vrtlwrld site you solved the issue of hitting 'Back' in browser. But with this example, the interactions doesn't reset
Hi Ilja, I implemented this on my site, and it's awesome, but it doesn't allow me to access the edit feature in Webflow because the edit function doesn't seem to initiate GSAP. Any thoughts there?
Hey! Ahh yes, I should have mentioned that. When you're in the editor, a class of w-editor is added to the html. You can use this to hide the loader as follows: .w-editor .load-w{ display: none; }
Thank you! Noob question ) After you did set function for the first animation why do you put code for second above and not under? Or it doesn’t matter? 🙌🏻🙌🏻🙌🏻
The outro animation of the blocks will be the first thing that runs on page load. But if this bit is the only custom code you have on your site, I doubt it makes much of a difference actually!
What is the benefit of the sandbox? Wouldn't it be safer to write JS code directly to Webflow custom code areas? I would be worried the js code is not safe when it's written somewhere else.
Yes, I forgot to add a little snippet that takes care of that. If you check the cloneable now, I added it at the bottom of the document.ready function!
The '$' refers to jQuery. You might get errors in codesandbox that it's not defined because it can't access jQuery inside of the codesandbox file. It will work on the published site though, because Webflow includes jquery.
To not have to set a condition about the link being external or being an anchor link, the event listener can directly be applied to a filtered link selector: 'a:not([target="_blank"], [href*='#'])' (selects `a` tags which are not opening in a new tab, and do not have a '#' character in its href value) Avoids double processing of adding a listener to external or hash links and then checking if it's an external link or not.
It's nice, but if you have slow pages, a page transition should help mask it, this does not mask it at all. just adds extra waiting time. Still, nice creative page transition, but functionaly not there.
And a cloneable! So cool.
This Video and the simplicity behind the Gsap Animation + the Great Explaining of yours motivates me even more to learn GSAP for Webflow. Excellent Work Ilja!
Always knew you where a great teacher 🔥🚀
Thanks for sharing this Ilja.
Hell yeah, super excited for your videos! I was subbed even before the video came out in case you ended up making any. :)
Damn... very slick 👏👏. Already waiting on the next video 👀
Thank you Ilja !!!🙏👌
Awesome Ilja 🙌
Love it! Looking forward to more tutorials.
Good work! Smart and simple explanaition. Thanks!
I already loved your work from searching great Webflow websites, really happy to see you getting even more out there! Thank you for your content.
Such a great video my friend
I finally saw the whole thing! Amazing stuff Ilja, I'll be sure to use this in creative ways. Thanks a lot, you're the best!
Go for it Ilja! 🚀
Greatly explaned, thanks!
Big fan of your work. Great video man.
Great first video!
Wow 🎉 This is amazing.
Waiting for more tutorials.
Hell yeah! Would love to learn from one of the best. Let's go!
Very easy to understand. Thank you very much!
Great work! Can't wait till the next one🎉
Can’t wait for more! 🔥📎
Thank you SO MUCH for explaining the code!! I wish T.RICKS explained it more often like you did, I feel like I’d have a much better grasp on coding using gsap already 😅😅
Awesome Video!, Well done!
This is great stuff mate, keep it up!
This is amazing! 🔥
Really Awesome!
Great work! Looking for more tutorials
Thanks buddy. Really helpful.
Let's get it - here is to 100k 👀
Sick man!
so cool
Lekker bezig Ilja! 😎
Sooo good
Great video 👍 Keep going, I am considering adding something interesting to my portfolio website, so I think I found "that" something, thanks 😁
Hey, loved the video, what do you use for your screen recordings?
It isn't working on CMS pages, could you tell how to solve this?
BTW Thanks for this awesome tutorial 👍
Amazing, I'm looking forward to more tutorials! Could I request a guide on creating the header text animation, please?! 🙏🏼
Meteen geabonneerd, goede video!
💪
This is great! One thing - it looks like on the vrtlwrld site you solved the issue of hitting 'Back' in browser. But with this example, the interactions doesn't reset
You're right! Forgot about that part, I added it in the cloneable now!
Thank you
Hi Ilja, I implemented this on my site, and it's awesome, but it doesn't allow me to access the edit feature in Webflow because the edit function doesn't seem to initiate GSAP. Any thoughts there?
Hey! Ahh yes, I should have mentioned that. When you're in the editor, a class of w-editor is added to the html. You can use this to hide the loader as follows:
.w-editor .load-w{
display: none;
}
Thank you! Noob question ) After you did set function for the first animation why do you put code for second above and not under? Or it doesn’t matter? 🙌🏻🙌🏻🙌🏻
The outro animation of the blocks will be the first thing that runs on page load. But if this bit is the only custom code you have on your site, I doubt it makes much of a difference actually!
@@iljavaneck may be a very dumb question. I am really new to this. How can I get the cdn link for the sandbox code.
@@muktadirrudro7552 You might already have seen but if Not, He has a video on this that he uploaded yesterday!
@@Inttallity yeah, saw that video today. Thanks a lot mate for mentioning
I'm new to webflow. Where can one learn the basics of gsap
Timothy Ricks has GSAP lessons on his Patreon, but also quite some videos on his channel - that’s how I started learning it as well
What is the benefit of the sandbox? Wouldn't it be safer to write JS code directly to Webflow custom code areas? I would be worried the js code is not safe when it's written somewhere else.
What framework do you use for your webflow builds?
I use the fluid scaling technique from wizardry, and with class names kind of have my own thing.
What can i do to become this good at websites? I litteraly hate coding and i only have knowledge in CSS. How much time would it take me?
Practice makes better! Try and do lots of different things. I’ve been building sites for a little over 2 years now
@@iljavaneck thanks, now I’m trying Framer since it seems better suited for me
Hey ilja, how you did the zoom transition for this video?
Is there an easy way to avoid having the animations show up when you first open the site? 🤔
Because I have a different loading animation.
For some reason the cloneable is not working for me? I think the link to your script is broken.
Not sure why it's not working on your end, does it work now?
what's the best way to load GSAP into webflow? preferably the library would be global and then individual config scripts for each section or page?
Ilja 😍 🥰
it seems not working page when click window back button??
Yes, I forgot to add a little snippet that takes care of that. If you check the cloneable now, I added it at the bottom of the document.ready function!
Curious if you sell any of your awesome designs?
Some of the things I show in videos are based off client work I did, but I might have some template plans for 2024!
Hello everyone! Does anyone have a problem with the $ not defined? I don’t know how to fix it.
The '$' refers to jQuery. You might get errors in codesandbox that it's not defined because it can't access jQuery inside of the codesandbox file. It will work on the published site though, because Webflow includes jquery.
To not have to set a condition about the link being external or being an anchor link, the event listener can directly be applied to a filtered link selector:
'a:not([target="_blank"], [href*='#'])' (selects `a` tags which are not opening in a new tab, and do not have a '#' character in its href value)
Avoids double processing of adding a listener to external or hash links and then checking if it's an external link or not.
It's nice, but if you have slow pages, a page transition should help mask it, this does not mask it at all. just adds extra waiting time. Still, nice creative page transition, but functionaly not there.