Watch Text Come Alive With Scroll-Triggered Animation (ScrollTrigger)

Поділитися
Вставка
  • Опубліковано 10 вер 2024
  • Learn how to create stunning scroll-triggered marquee text animations with dynamic font effects using HTML, CSS, JavaScript, GSAP and ScrollTrigger!
    Source Code: codegrid.gumro...
    Inspiration ▸ Awwwards Element from Decathlon
    Website: decathlon-wlkr...
    Instagram: / codegridweb
    Twitter: / codegridweb
    Public Discord: / discord
    Music from Epidemic Sound.
    Thanks for watching!

КОМЕНТАРІ • 48

  • @thetechsolutions4420
    @thetechsolutions4420 2 місяці тому +19

    Wake up bae codegrid posted

  • @basilistigris640
    @basilistigris640 2 місяці тому +4

    best design lessons for html css javascript i find on all youtube until now, Codegrid you rock!!

    • @codegrid
      @codegrid  2 місяці тому

      Thanks! ❤️

  • @k40L1n
    @k40L1n 2 місяці тому +2

    I dont code anymore, but still come to visit your videos. Love your explanations.

    • @codegrid
      @codegrid  2 місяці тому +1

      Glad you like them!

  • @julianvelez6563
    @julianvelez6563 2 місяці тому +4

    Awesome work bro ❤❤❤

  • @mhdhasham2754
    @mhdhasham2754 2 місяці тому +2

    bro you are amazing, can u recreate the first part of website? it has always intrigued me but I've no idea how to achieve it

    • @codegrid
      @codegrid  2 місяці тому

      Look at the recent Lottie (from video) + ScrollTrigger video. I’d take that approach.

    • @mhdhasham2754
      @mhdhasham2754 2 місяці тому

      @@codegrid talking about this one?
      Scroll Animation With GSAP ScrollTrigger | Lottie Scroll Animation | HTML, CSS & JavaScript

  • @giorgiadiserafino
    @giorgiadiserafino 2 місяці тому +1

    thanks for making me happy

    • @codegrid
      @codegrid  2 місяці тому

      🙏🏽🙏🏽🙏🏽

  • @hemantkumarnirmalkar2868
    @hemantkumarnirmalkar2868 2 місяці тому +2

    Where you learn all this please share some resources. Awesome project 🎉

    • @codegrid
      @codegrid  2 місяці тому +1

      GSAP documentation and forum? But I think it isn’t about that. It’s more about the approach. Whenever you split any experience into small parts and start tackling one by one, you will see how often it’s easier than we think.

  • @norah8201
    @norah8201 2 місяці тому +1

    Amazing work

  • @makadiyahardik8862
    @makadiyahardik8862 2 місяці тому +1

    Awesome work ❤

  • @andrejkling3886
    @andrejkling3886 2 місяці тому +1

    Self-transcendence… 🔥💯🔥

  • @DanielHDme
    @DanielHDme 2 місяці тому +1

    dude i love you so much thanks

  • @ApurvaKashyap-kj6qz
    @ApurvaKashyap-kj6qz 2 місяці тому

    hey , thankyou for such amazing tutorials ... also I want to request u to create tutorial on the video play with scroll amount as in this website it was with the shoe video above that text effect .. better if in reactJs

  • @user-js9cx3xl9z
    @user-js9cx3xl9z Місяць тому

    bruh ur really awesome, can u make tutorial video on three.js and gsap animation clearly, i know ur video will help to learn gsap but i need to do create some stuffs by own.

  • @thelankyjo
    @thelankyjo 2 місяці тому

    If code grid post, I am happy 😂😂.

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 2 місяці тому

    just wow

  • @abishek1808
    @abishek1808 2 місяці тому +1

    Awesome dudee🔥🔥 but expecting react videos

    • @codegrid
      @codegrid  2 місяці тому

      I tried posting a few but looked like not many people were interested in it so I dropped the idea

    • @shahrozahmed9746
      @shahrozahmed9746 2 місяці тому

      @@codegrid why not both?

    • @codegrid
      @codegrid  2 місяці тому

      Costs engagement.

  • @khalidsalah-9940
    @khalidsalah-9940 6 днів тому

    can enybody help me with the fontWeight effect, it's not working for me
    thank you for the video Codegrid.

  • @NomanAli-zd1bn
    @NomanAli-zd1bn 2 місяці тому +1

    Brother there is a web site Minhpham can you make some of his effect like mask revel text please

    • @codegrid
      @codegrid  2 місяці тому

      I might just rebuild the entire website

    • @NomanAli-zd1bn
      @NomanAli-zd1bn 2 місяці тому

      @@codegrid it would be great please I saw some tutorials on one hover animation but I don't use react of next js that's why it is hard for me to understand waiting

  • @titosk3
    @titosk3 2 місяці тому

    Awesome!! Where did you get those pictures?

  • @trilochanbehera8318
    @trilochanbehera8318 2 місяці тому +1

    Teach us full side bro

    • @codegrid
      @codegrid  2 місяці тому +1

      You mean full site?

    • @trilochanbehera8318
      @trilochanbehera8318 2 місяці тому

      @@codegrid ji bhaya ji

    • @trilochanbehera8318
      @trilochanbehera8318 2 місяці тому

      Bhut meherbani ho jayegi

    • @rubenzafratraver6819
      @rubenzafratraver6819 2 місяці тому

      @@codegrid yeah please!!! I guess they are using useScroll from framer motion or something to animate the frames and have the background as video?

  • @farid-game
    @farid-game Місяць тому

    I implemented this, but scrolling is laggy. why that happened?

    • @codegrid
      @codegrid  Місяць тому

      Maybe the device you’re using isn’t efficient enough to handle/render those animation frames

    • @farid-game
      @farid-game Місяць тому +1

      @@codegrid I'm using MacOS (MacBook Pro M1) with 8GB Ram.