Creating an award-winning page transition in Webflow using GSAP

Тәжірибелік нұсқаулар және стиль

[ Get the cloneable ]
webflow.com/made-in-webflow/w...
My first KZread video! It's been on my mind for quite a while now, and finally taking the leap. In this video I'm recreating a pixelated page transition that I originally made for www.vrtlwrld.io, which was designed by the team at Holographik. The website won an Awwwards Site of the Day and Developer Award, and was even nominated for Site of the Month - all leading to a lot of questions on how I created several things.
[ Links 👇 ]
Holographik: www.holographik.co/
GSAP Install helper: greensock.com/docs/v3/Install...
Codesandbox: codesandbox.io/
How I record my screen: www.screen.studio/
[ Do you speak Dutch? 🇳🇱 🇧🇪 ]
Join the largest and most vibrant no-code community!
www.nocodecommunity.nl/
[ My socials ✌️ ]
Twitter: / iljavaneck
Instagram: / by.ilja
Awwwards: www.awwwards.com/ilja-van-eck/
Webflow profile: webflow.com/@iljavaneck

Пікірлер: 71

  • @chrishely8586
    @chrishely8586 Жыл бұрын

    Great work! Can't wait till the next one🎉

  • @contra_hq
    @contra_hq Жыл бұрын

    This is amazing! 🔥

  • @garyvoigt321
    @garyvoigt321 Жыл бұрын

    Love it! Looking forward to more tutorials.

  • @brandingowyninja2387
    @brandingowyninja2387 Жыл бұрын

    Big fan of your work. Great video man.

  • @frankiejamieson3690
    @frankiejamieson369010 ай бұрын

    This is great stuff mate, keep it up!

  • @vladimirpetroski7089
    @vladimirpetroski7089 Жыл бұрын

    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!

  • @t_o_ny
    @t_o_ny Жыл бұрын

    And a cloneable! So cool.

  • @dannleal
    @dannleal11 ай бұрын

    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.

  • @lovefrommana
    @lovefrommana Жыл бұрын

    Hell yeah, super excited for your videos! I was subbed even before the video came out in case you ended up making any. :)

  • @adarshgoldar
    @adarshgoldar Жыл бұрын

    Wow 🎉 This is amazing. Waiting for more tutorials.

  • @baltazarfajto
    @baltazarfajto10 ай бұрын

    Greatly explaned, thanks!

  • @Kevinpips1
    @Kevinpips1 Жыл бұрын

    Always knew you where a great teacher 🔥🚀

  • @4bike407
    @4bike407 Жыл бұрын

    Good work! Smart and simple explanaition. Thanks!

  • @uncode_nl
    @uncode_nl Жыл бұрын

    Go for it Ilja! 🚀

  • @leonardotomella
    @leonardotomella Жыл бұрын

    Can’t wait for more! 🔥📎

  • @victoradeniji4554
    @victoradeniji4554 Жыл бұрын

    Awesome Video!, Well done!

  • @MohamedHassan-xf5wb
    @MohamedHassan-xf5wb Жыл бұрын

    Really Awesome!

  • @armansalehi
    @armansalehi Жыл бұрын

    Damn... very slick 👏👏. Already waiting on the next video 👀

  • @ferdiboxman4641
    @ferdiboxman4641 Жыл бұрын

    Such a great video my friend

  • @TheSemml91
    @TheSemml91 Жыл бұрын

    Great first video!

  • @juliegeant1515
    @juliegeant1515 Жыл бұрын

    Thank you Ilja !!!🙏👌

  • @ludoviclosco
    @ludoviclosco Жыл бұрын

    Awesome Ilja 🙌

  • @bamoj
    @bamoj Жыл бұрын

    Thanks for sharing this Ilja.

  • @BorhanMediaWebdesign
    @BorhanMediaWebdesign8 ай бұрын

    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!

  • @maxklyn4821
    @maxklyn4821 Жыл бұрын

    Sick man!

  • @adil_khan15
    @adil_khan15 Жыл бұрын

    Great work! Looking for more tutorials

  • @eli.alcaraz
    @eli.alcaraz Жыл бұрын

    Hell yeah! Would love to learn from one of the best. Let's go!

  • @nesliedoguiles
    @nesliedoguiles6 ай бұрын

    Very easy to understand. Thank you very much!

  • @osendz
    @osendz Жыл бұрын

    Thanks buddy. Really helpful.

  • @pjrijpkema9961
    @pjrijpkema9961 Жыл бұрын

    Lekker bezig Ilja! 😎

  • @Grifanos
    @Grifanos10 ай бұрын

    Great video 👍 Keep going, I am considering adding something interesting to my portfolio website, so I think I found "that" something, thanks 😁

  • @JonnySchaab
    @JonnySchaab Жыл бұрын

    Sooo good

  • @TheGhostie
    @TheGhostie5 ай бұрын

    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 😅😅

  • @michaellieu
    @michaellieu9 ай бұрын

    Amazing, I'm looking forward to more tutorials! Could I request a guide on creating the header text animation, please?! 🙏🏼

  • @uxdeya7660
    @uxdeya7660 Жыл бұрын

    so cool

  • @elysiumcore
    @elysiumcore Жыл бұрын

    Let's get it - here is to 100k 👀

  • @BigheadSinan
    @BigheadSinan Жыл бұрын

    Meteen geabonneerd, goede video!

  • @callthedesignguy
    @callthedesignguy8 ай бұрын

    Hey, loved the video, what do you use for your screen recordings?

  • @demas.digital
    @demas.digital Жыл бұрын

    💪

  • @amandeepsingh4343
    @amandeepsingh43439 ай бұрын

    It isn't working on CMS pages, could you tell how to solve this? BTW Thanks for this awesome tutorial 👍

  • @danjul33
    @danjul3310 ай бұрын

    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.

  • @Sergy_Kondrashin
    @Sergy_Kondrashin Жыл бұрын

    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? 🙌🏻🙌🏻🙌🏻

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    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!

  • @muktadirrudro7552

    @muktadirrudro7552

    10 ай бұрын

    ​@@iljavaneck may be a very dumb question. I am really new to this. How can I get the cdn link for the sandbox code.

  • @Inttallity

    @Inttallity

    10 ай бұрын

    @@muktadirrudro7552 You might already have seen but if Not, He has a video on this that he uploaded yesterday!

  • @muktadirrudro7552

    @muktadirrudro7552

    10 ай бұрын

    @@Inttallity yeah, saw that video today. Thanks a lot mate for mentioning

  • @3xtraspicy
    @3xtraspicy5 ай бұрын

    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?

  • @INXIETE
    @INXIETE6 ай бұрын

    Hey ilja, how you did the zoom transition for this video?

  • @dimitrisqq
    @dimitrisqq Жыл бұрын

    Ilja 😍 🥰

  • @filetmignon9978
    @filetmignon9978 Жыл бұрын

    What framework do you use for your webflow builds?

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    I use the fluid scaling technique from wizardry, and with class names kind of have my own thing.

  • @user-xz3sh3iy4r
    @user-xz3sh3iy4r6 ай бұрын

    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.

  • @joshmann7855
    @joshmann7855 Жыл бұрын

    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

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    You're right! Forgot about that part, I added it in the cloneable now!

  • @joshmann7855

    @joshmann7855

    Жыл бұрын

    Thank you

  • @nakinboots
    @nakinboots2 ай бұрын

    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?

  • @vincentorougoura3901
    @vincentorougoura3901 Жыл бұрын

    Hello everyone! Does anyone have a problem with the $ not defined? I don’t know how to fix it.

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    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.

  • @archrao2103
    @archrao2103 Жыл бұрын

    I'm new to webflow. Where can one learn the basics of gsap

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    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

  • @mars1860
    @mars1860 Жыл бұрын

    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?

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    Practice makes better! Try and do lots of different things. I’ve been building sites for a little over 2 years now

  • @mars1860

    @mars1860

    Жыл бұрын

    @@iljavaneck thanks, now I’m trying Framer since it seems better suited for me

  • @skylov01
    @skylov01 Жыл бұрын

    it seems not working page when click window back button??

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    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!

  • @academyux
    @academyux Жыл бұрын

    For some reason the cloneable is not working for me? I think the link to your script is broken.

  • @iljavaneck

    @iljavaneck

    Жыл бұрын

    Not sure why it's not working on your end, does it work now?

  • @thewebstylist
    @thewebstylist9 ай бұрын

    Curious if you sell any of your awesome designs?

  • @iljavaneck

    @iljavaneck

    7 ай бұрын

    Some of the things I show in videos are based off client work I did, but I might have some template plans for 2024!

  • @parasshah195
    @parasshah195 Жыл бұрын

    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.

  • @johanvanwambeke723
    @johanvanwambeke7236 ай бұрын

    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.

Келесі