Animated Landing Page | GSAP Mouse Hover / Link Hover Image Animation | HTML, CSS & JavaScript

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 84

  • @vimallama5981
    @vimallama5981 9 месяцев назад +8

    why do we subscribe if you give important files to only pro or paid subscriber. sorry I will not subscribe, like and share

    • @eklectiklofi3194
      @eklectiklofi3194 9 месяцев назад +1

      It's true. I was thinking the same part of it

    • @scept3r.studios
      @scept3r.studios 9 месяцев назад +16

      whæt? the file’s already free, you just follow the video. what’s wrong with that?

    • @taunado
      @taunado 9 месяцев назад +14

      It costs time to make the videos and therefore costs money. You get what you pay for.

    • @georgembajiaku4567
      @georgembajiaku4567 9 месяцев назад +12

      Least you could do is follow along the video. If you won't support the creator, don't spew bad rhetoric. I will be liking and subscribing :)

    • @ovuokeaghwotu2389
      @ovuokeaghwotu2389 9 месяцев назад +9

      Following along is already free, and subscribing encourages Codegrid to make more content. It's the least anyone can do.

  • @stefanallchorne8667
    @stefanallchorne8667 8 месяцев назад +13

    For the price of one costa coffee a month, you get monthly templates and access to the actual source code. People need to stop complaining. The value for money is unreal. This creator is insanely hard working and we are fortunate to be able to benefit from it.

  • @Centrifugadora34
    @Centrifugadora34 8 месяцев назад +3

    At 7:47, i would suggest to remove the child using the index as a reference instead of the node element. This works when you hover through the different options in normal speed. But if you do it fast, since the code it is executed "on complete" after 0.5 seconds as especified in the gsap transition, it will fail to delete the child. So you will start to stack lots of images.
    At least that happened to me, so just in case someone else faces this same issue.
    Cool video thanks a lot!

    • @codegrid
      @codegrid  8 месяцев назад

      Makes sense! Thanks for the fix

    • @DanPhan-d8p
      @DanPhan-d8p 4 месяца назад +2

      I'm faces this same issue but i don't know how to apply your solution can you give me the snippets ?

    • @scept3r.studios
      @scept3r.studios 3 месяца назад

      @@DanPhan-d8p same here, im curious howd u do the workaround for this one

  • @Aman_yadav1419
    @Aman_yadav1419 9 месяцев назад +6

    Day by day your content is becoming more awesome stuff ❤

    • @codegrid
      @codegrid  9 месяцев назад

      Glad you think so!

  • @Way_Of_The_Light
    @Way_Of_The_Light 8 месяцев назад +3

    Your tutorial ideas are getting better and better 🔥 replicating awwwards level designs and animations is elite level content ✨

    • @codegrid
      @codegrid  8 месяцев назад

      Glad you like them!

  • @Lord_Arkham
    @Lord_Arkham 9 месяцев назад +2

    Very Impresive site! I'll try to do one similar watching your video, asap. I'll comment again soon my friend, meanwhile here is your like! Keep the great work and sharing wonderful ideas as this one :)

    • @codegrid
      @codegrid  9 месяцев назад +1

      Thanks 🙏🏽

  • @swastikpatel234
    @swastikpatel234 8 месяцев назад

    I am really lucky that I found this channel

    • @codegrid
      @codegrid  8 месяцев назад

      🙏🏽🙏🏽🙏🏽

  • @marcomaldarella
    @marcomaldarella 9 месяцев назад +1

    stunning work! Keep post it!

  • @sthavansuroshi3757
    @sthavansuroshi3757 8 месяцев назад +1

    Great work!. I have a small suggestion, can you please slow down the pace of explanation and video speed so tht we can understand things better.

  • @kevthecoder
    @kevthecoder 9 месяцев назад

    This was super amazing dude! 🙌

    • @codegrid
      @codegrid  9 месяцев назад

      Thanks a ton!

  • @kshitijthakur1658
    @kshitijthakur1658 9 месяцев назад

    So smooth animation 👍🏻

  • @vilioralex2701
    @vilioralex2701 7 месяцев назад

    another fantastic video!!

  • @azizdevuz
    @azizdevuz 8 месяцев назад +1

    🔥

    • @codegrid
      @codegrid  8 месяцев назад +1

      🙏🏽

  • @shahbazliaquat00
    @shahbazliaquat00 8 месяцев назад

    I love with ur videos, thanks, I learn a lot❤

    • @codegrid
      @codegrid  8 месяцев назад

      Glad you like them!

  • @NoobOp-p9g
    @NoobOp-p9g 8 месяцев назад

    Really good 🔥🔥🔥🔥

  • @edsHTML
    @edsHTML 8 месяцев назад

    Awesome project bro😎😎 im going to learn this

  • @infamousyasser01
    @infamousyasser01 8 месяцев назад

    🔥🔥🔥🔥🔥

    • @codegrid
      @codegrid  8 месяцев назад

      🙌🏼🙌🏼🙌🏼

  • @HORDERARII
    @HORDERARII 8 месяцев назад

    This Is Dope 🦾👏

    • @codegrid
      @codegrid  8 месяцев назад

      Thanks man!

  • @malhar23
    @malhar23 9 месяцев назад

    Super Cool

  • @thelord982
    @thelord982 8 месяцев назад

    Great video! What would be the best way to do these kind of sites on mobile? How you approach them?

    • @codegrid
      @codegrid  8 месяцев назад

      I do media queries typically

  • @jone-tz7hq
    @jone-tz7hq 8 месяцев назад

    Prepare a video of your journey that will inspire others to learn from this types of website develop

    • @codegrid
      @codegrid  8 месяцев назад

      😂😂😂🙏🏽

  • @mohithguptakorangi1766
    @mohithguptakorangi1766 6 месяцев назад

    Nice animation but It would have beena lot better if you could explain why you are writing the code that you are writing. You are very briefly summarizing each section which leaves beginners out of context. At least not many would be able to recreate this after watching this video cause the explanation is not to that extent. Anyways good animation bro!

  • @leodang00
    @leodang00 9 месяцев назад

    Nice, thanks! Can you create more video about using gsap with nextjs 14? We're usually use nextjs to create multi pages websites for our clients for the project scalibility

    • @codegrid
      @codegrid  9 месяцев назад

      Great suggestion! Tbh, I personally haven’t explored Nextjs much yet even though it’s too popular nowadays. The another reason for sticking to HTML/CSS/JS videos when it comes to content is - it also makes the videos beginner friendly so literally anyone can watch it and learn while the experience devs can take these pieces and use the logic with any stack they might be using. So it fulfils both the purposes.
      But I hear you! I often hear sometimes converting such pieces into these modern libraries can be trickier so perhaps I will focus on it in future! Thanks

  • @shakilakamod2064
    @shakilakamod2064 2 месяца назад

    May i have your help please? I tried our code. but isn't working yet. I think its my fault

  • @digitalsahara6670
    @digitalsahara6670 9 месяцев назад

    great video man, just an advice the background music was a little to loud, love the video otherwise!

    • @codegrid
      @codegrid  9 месяцев назад

      Noted! Will take this in consideration in future videos!

  • @wibbs88
    @wibbs88 6 месяцев назад

    Be cool if you did this with React 👍🏻

  • @abishek1808
    @abishek1808 8 месяцев назад

    plzz do it these kind of animations using react,tailwind and framer motion

    • @codegrid
      @codegrid  8 месяцев назад +1

      Noted ✍🏼

  • @DawitBerhanu-m7n
    @DawitBerhanu-m7n 8 месяцев назад

    Could you please share your secret about how you are getting better at HTML, CSS, and JavaScript? It's so important for me to have just one video for your journey, showing how much time I spend doing things like you, and other things? Please

    • @codegrid
      @codegrid  8 месяцев назад

      I have got some other requests as well to share my journey, etc! Not sure about the timeline when the video comes out but I’m thinking it o start working on it soon

  • @afaqzzz
    @afaqzzz 6 месяцев назад

    what are the names of your images in assets folder?

  • @FloNocode
    @FloNocode 8 месяцев назад

    Hi how are you ? I have a question, how use this code in a tool like webflow or Framer ? It's possible ?

    • @codegrid
      @codegrid  8 месяцев назад

      Not sure how webflow/framer processes custom code

    • @taunado
      @taunado 8 месяцев назад

      yes, RUclips Webflow VSCode parcel cdn.

  • @dikerypamthied8741
    @dikerypamthied8741 8 месяцев назад

    can i make it so that when on click it would take the users to a new page for that image so that they can purchase it?

    • @codegrid
      @codegrid  8 месяцев назад +1

      Why not! I mean you would have to make updates to code! Depends on how you use the logic

  • @ifeanyinnaemego
    @ifeanyinnaemego 9 месяцев назад

    Is it responsive

    • @codegrid
      @codegrid  9 месяцев назад +2

      Nope! But you can add media queries for the variants’ positions and that’ll be it! Tbh, hover effects are not typically used on mobile devices - you would need a click handler and just showing an image would do it due to limited space we have on phones.

  • @heels_analytics
    @heels_analytics 6 месяцев назад +1

    at 8:38 what is this sign if (activepreview && activepreview ? ? newActivepreview)
    pls help @ Codegrid

    • @afaqzzz
      @afaqzzz 6 месяцев назад

      !==

    • @afaqzzz
      @afaqzzz 6 месяцев назад

      that sign is showing like that because font used is "Jetbrains mono" i think, the signi s " !== " , "not equal equal"