EASY React Animation with useGSAP()

Поділитися
Вставка
  • Опубліковано 30 жов 2024

КОМЕНТАРІ • 180

  • @paakofibamfoquaicoe4193
    @paakofibamfoquaicoe4193 7 місяців тому +12

    Your laughing and smiling throughout the video makes me happy. Great video. Thank you.

  • @shash0_0
    @shash0_0 7 місяців тому +6

    Clear, succinct and comprehensive. Your calm energy is just cherry on top!

  • @shadowslayer2248
    @shadowslayer2248 5 місяців тому +19

    Her smile is as beautiful as the easy integration of GSAP with React and smoothness by which GSAP controls and animates the DOM elements. Thank you instructor and mainly thank you developers for the useGSAP hook which makes it so easy, gimme a second to acknowledge your greatness 🙇‍♂🙇‍♂🙏🙏

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

      I was going to point the same ... She is so happy, that makes me happy :)

  • @chrisandrew_tv
    @chrisandrew_tv 7 місяців тому +7

    That's the affectionate and mildly manic smile all develop who have dared attempt complex GSAP animations in React 18 (because it's better to smile than to cry) 😂

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

    This is the best tutorial I've watched recently in terms of clean delivery and the chill and happy energy you both give out!

  • @metalyx1
    @metalyx1 8 місяців тому +4

    Had these issues with cleaning up and killing animations, it's perfect you have a hook. Works amazing, just plug and play 👏

  • @shableep
    @shableep 9 місяців тому +11

    whoa this got released just in time for me to build my portfolio site. thank you! you're covering so many important essentials and esoteric React concepts.

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому +1

      So glad this helped you!

    • @Ali_UX_Desinger
      @Ali_UX_Desinger 3 місяці тому

      @@GreenSockLearning Gsap has any learning courses available like webflow university because this is very important to lean now in order to level up in webflow game.

  • @mr-skorpion
    @mr-skorpion 8 місяців тому +5

    Beautiful addition to Gsap React ecosystem, thank you team GSAP 👍✨

  • @sirajahmed8034
    @sirajahmed8034 4 місяці тому +1

    Wow!
    It always pained me how hard it was to use gsap with React, and I'm glad a proper hook was created that addresses all the issues. Very excited to use this, amazing work by GSAP team!

  • @montoyland
    @montoyland 9 місяців тому +4

    I love how you incorporated Brody into your presentation! It's a testament to your natural ability to go with the flow that, while appears so effortless, takes great skill. Your instructions were clear and speak to larger concerns all React developers should consider even beyond specifically using GSAP. Thanks for the obvious effort you took to show us best practices!

    • @cassieevans604
      @cassieevans604 9 місяців тому

      I just had to accept that Brody just pops by occasionally, even if I'm recording, I have no choice in the matter. If I try to lock him out of my office he howls until I let him in 😂

  • @snorklTV
    @snorklTV 9 місяців тому +13

    wow. fantastic job on the video! editing is crazy good. can't even imagine how long it took to put it all together and have it flow so well.

    • @cassieevans604
      @cassieevans604 9 місяців тому

      Means a lot Carl, thanks. I STILL messed up with an audio overlap at 7:40. I'm getting better though, it's a whole skill in itself, I have so much more respect for video creators now. Time consuming stuff. 😂

    • @digitalsahara6670
      @digitalsahara6670 9 місяців тому +1

      will you be working on some react content in the future?

    • @luisvisintini833
      @luisvisintini833 9 місяців тому

      will you be working on some react content in the future?

    • @snorklTV
      @snorklTV 9 місяців тому +3

      Thanks for your interest in my GSAP training. No immediate plans for React at this time. The GSAP team has really great resources to get you going.

    • @luisvisintini833
      @luisvisintini833 9 місяців тому

      @@snorklTV Thank you for the answer! I have your course! And it's extremely great! Do you know any gsap course with react?

  • @Michael-Martell
    @Michael-Martell 9 місяців тому +4

    Props to all your hard work, not only on this video, but on the documentation and the Starter examples on Stack blitz. It’s extremely helpful! I’ll be playing with it this week and I think I’ll be finally taking the leap into Paid GSAP after my next check! Thanks for all you do!

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому +1

      Oh this is so nice to hear, thanks for taking the time to leave such a nice message - pop into the forums if you have any feedback or need any help. 💚

  • @ahmad98282
    @ahmad98282 8 місяців тому +2

    I love how calmly you explain things.

  • @kapeeshmanilal1613
    @kapeeshmanilal1613 9 місяців тому +8

    Oh I've been waiting for this! Good work team! 💚

  • @jior6
    @jior6 9 місяців тому +29

    It should be illegal to use your guys' platform for free. I'm absolutely blown away how vastly superior GSAP compares to other animation solutions. Very well done.

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому +7

      Ha, This made us laugh, thanks 💚Honestly though - We appreciate every person that supports our development work through Club GSAP! That support allows us to keep the tools free for the majority.

    • @itgiants5218
      @itgiants5218 8 місяців тому +2

      @@GreenSockLearning we do really appreciate your amazing continuous efforts, great job.

    • @EmmanuelNgwandu
      @EmmanuelNgwandu 8 місяців тому +1

      Officially starting using gsap in my react projects. Awesome

  • @AntoineDelcourte
    @AntoineDelcourte 8 місяців тому +1

    Amazing work here, seeing the react hook type syntax with GSAP in it on the thumbnail blew my mind. As always, excellent tutorial by Cassie and great documentation. Will definitely be using it soon enough !

  • @anth0ni33
    @anth0ni33 24 дні тому

    This is awesome. Now I can actually try GSAP in my projects

  • @fortysyv
    @fortysyv 8 місяців тому

    This is so awesome. I started my animation journey with gsap but had to switch when I started working in react. I'm so glad you found a solution for the too many refs problem. Thank you. Definitely gonna try this out in my next project

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

    Wow she is so good explaining it.

  • @joshuayullu
    @joshuayullu 7 місяців тому +1

    had me at "awkwardly named bit of nonsense"😂

  • @kevinat71
    @kevinat71 8 місяців тому

    More tutorial with useGSAP please! .... Thanks a lot for this, fantastic job ❤

  • @gorki90
    @gorki90 9 місяців тому +8

    Great and easily understandable presentation. Also, the video editing is top notch! I'm impressed!

    • @gorki90
      @gorki90 9 місяців тому

      Except a little bug at 7:41 :P

    • @cassieevans604
      @cassieevans604 9 місяців тому

      argh. There's always one 🫠 @@gorki90

  • @aaravgavshinde
    @aaravgavshinde 6 місяців тому

    Took a little too much brain cells to understand, but got it watching twice! Nice video, thanks a lot!

  • @marianop8882
    @marianop8882 9 місяців тому +1

    This us pure gold! Thank you, Cassie

  • @otfnk
    @otfnk 9 місяців тому +2

    Awesome tutorial. I will be improving readability and clean code with this hook. I am feeling lucky to see this video. 🎉❤

  • @radezzientertainment501
    @radezzientertainment501 6 місяців тому

    this was a tremendous walkthrough, thank u!!

  • @hayesmaker64
    @hayesmaker64 5 місяців тому

    "drowining in a sea of refs.." - yep, I know that feeling!

  • @joshreynolds4164
    @joshreynolds4164 9 місяців тому

    Wow what an excellent demo of this. Thanks!

  • @44turtlepower
    @44turtlepower 9 місяців тому +1

    Amazing developments! Nice work, and thank you!

  • @Dan21789
    @Dan21789 9 місяців тому

    Incredible! What a great explainer video. I’m excited to try this out!

  • @shehzadasif7177
    @shehzadasif7177 9 місяців тому

    It might be a problem solving hook for cleanup issues. Great work

  • @miGuHD
    @miGuHD 9 місяців тому

    A little audio overlap happening around 7:40 but pretty stocked about the React love you're sending us lately, thanks!

    • @GreenSockLearning
      @GreenSockLearning  9 місяців тому +1

      It's a shame youtube doesn't allow re-uploads, but thanks for the spot.

  • @nikhilpsathyanathan
    @nikhilpsathyanathan 9 місяців тому

    it simplify a lot and nice presentation

  • @justinoconnell7307
    @justinoconnell7307 9 місяців тому

    This was a great video, I’ll be testing it out

  • @kkr9925
    @kkr9925 7 місяців тому

    Great presentation.

  • @Trazynn
    @Trazynn 9 місяців тому +4

    (I bet this comment will hit the spam filter because I mention Discord but i'll try it anway). In the Framer discord there's frequent questions on how to implement GSAP animations into Framer websites. Some short video showcasing how to do that would be quite valuable.

    • @GreenSockLearning
      @GreenSockLearning  9 місяців тому

      Thanks for the feedback - We're not really familiar with framer's GUI, but GSAP is just JS and can be added wherever you can add custom code.

  • @tirthgajjar797
    @tirthgajjar797 9 місяців тому

    Very imortant update, great video.

  • @mikoajszczepkowski4513
    @mikoajszczepkowski4513 9 місяців тому

    Finally! GSAP rocks

  • @sjorsroelofs
    @sjorsroelofs 9 місяців тому +1

    Awesome hook! Your presentations are always very good👍🏻

  • @divside
    @divside 23 дні тому

    I think i love her

  • @ziadx3
    @ziadx3 9 місяців тому

    Great work!

  • @zubayerhossain7074
    @zubayerhossain7074 8 місяців тому

    Nice work! appreciate your kindness for publishing it free!

  • @ashifuddin_ahmed17
    @ashifuddin_ahmed17 6 місяців тому +1

    0:07
    React is a Library, not a framework...☺

  • @criticalcritics6531
    @criticalcritics6531 8 місяців тому

    You're so good!

  • @saeedakhshijan8159
    @saeedakhshijan8159 9 місяців тому

    GSAP is lovely ❤

  • @BooksWeCanRead
    @BooksWeCanRead 9 місяців тому

    Oooh niiice!! ❤❤ praise be!! 🙌🙌

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 9 місяців тому

    wow very much needed

  • @asifiweebenezer3166
    @asifiweebenezer3166 9 місяців тому

    I am going to Use GSAP in my Gatsby project. It's the first time I'm using GSAP and Gatsby. I really need this. Thanks

  • @niharmondol1415
    @niharmondol1415 9 місяців тому

    It’s a great video mam ❤
    Provide some use cases scroll trigger animation using react and gsap.
    Again thank you 🙏

  • @snatvb
    @snatvb 9 місяців тому

    wow, nice work)

  • @Seacrest.
    @Seacrest. 9 місяців тому

    nice! thanks!

  • @franklinaldo4566
    @franklinaldo4566 9 місяців тому

    Love it!

  • @A...A..A
    @A...A..A 9 місяців тому +1

    Can we use it for react native expo or any advice except animated for expo?

  • @gerguno
    @gerguno 8 місяців тому

    Nice and smart girl!

  • @Michael-Martell
    @Michael-Martell 7 місяців тому

    Btw, your stackblitz example for your Next13 Page transitions is not currently working… it’s failing at the start command.

  • @jeresalem
    @jeresalem 9 місяців тому

    Absolutely awesome. Thank you for making this!

  • @AlImam-o9k
    @AlImam-o9k 9 місяців тому

    it's amazing

  • @shervangh9660
    @shervangh9660 8 місяців тому

    tnx for your content

  • @ayushgogna9732
    @ayushgogna9732 9 місяців тому

    finally waited for this for so long

  • @absartb7789
    @absartb7789 9 місяців тому +1

    Thanks for the hook!, but what if i need to use matchMedia that already has context within it?

    • @GreenSockLearning
      @GreenSockLearning  9 місяців тому +1

      Hey there! Good question, you can use matchMedia inside useGSAP, useGSAP will revert the matchMedia context. codepen.io/GreenSock/pen/OJmQvLZ
      We'll add this to the docs!

  • @michaelmiranda3220
    @michaelmiranda3220 5 місяців тому

    Hi, How do I properly use matchMedia inside the hook?

  • @mentasuavesuave01
    @mentasuavesuave01 9 місяців тому

    I'm here since I know you from a podcast and I want to know where I can practice GSAP if I want to become better, is there a page with exercises somewhere? I'm the one who learn by doing

  • @TaimoorShahzada
    @TaimoorShahzada 9 місяців тому

    🙏 Thanks for that

  • @rasangalakshith1131
    @rasangalakshith1131 3 місяці тому

    can I use this useGSAP hook in nextjs static site generation rendering?

  • @giorgosphilippou81
    @giorgosphilippou81 8 місяців тому

    Is this working for React Native too?

  • @stylrart
    @stylrart 5 місяців тому

    smart dev

  • @kenshinhimura3140
    @kenshinhimura3140 9 місяців тому

    Thank you my poussy

  • @stow1x
    @stow1x 9 місяців тому

    for vue.js do u planning something like this?

  • @cafelutsa_
    @cafelutsa_ 9 місяців тому

    awesome

  • @angry_moose94
    @angry_moose94 9 місяців тому

    Hey nice library but it just seems like it’s a lot of work for animations that you can probably do with css. I mean even librairies like framer motion are probably gonna turn obsolete when the browsers can do it by themselves. Animations are nice but sometimes simplicity is better.

    • @cassieevans604
      @cassieevans604 9 місяців тому

      Not really accurate. The animations shown here were deliberately simple for demo purposes. But GSAP allows for a huge amount that just isn't possible using CSS or framer motion.

    • @shableep
      @shableep 9 місяців тому

      GSAP provides a lot more control over your animations, especially nested animations that are also dependent on the change of values. If you're doing simpler animations, CSS is the way to go for sure. But GSAP is great for much more complex stuff when you need it.

  • @Reklamist_bykvodel
    @Reklamist_bykvodel 9 місяців тому +1

    чудесная девушка, еще и умная)

  • @sevprogramming
    @sevprogramming 8 місяців тому

    Nice will add this to my bag, what breed of dog is that btw😅 so cute

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому

      He's a rescue street dog so we don't know what sort. He's a good boy though. 🐕

  • @lasindunuwanga5292
    @lasindunuwanga5292 9 місяців тому

    Me: I like that accent. I wonder where it comes from
    Also me: React is now a framework
    Some random guy: Don't take everything literally

  • @kamalkhatri-pi8su
    @kamalkhatri-pi8su 8 місяців тому

    can you make something for angular. I love to work with gsap in angular framework.

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому +1

      Have you used GSAP in angular? Did you have any specific friction points?

    • @kamalkhatri-pi8su
      @kamalkhatri-pi8su 8 місяців тому

      @@GreenSockLearning I have used but I just want to tell you everyone does not use react. So pls make angular specific video also.it will help angular develpers. Thanks

  • @karansagar7870
    @karansagar7870 8 місяців тому

    looks worth giving a try , also will be spamming here if things break.

  • @olatunjiolakunle6908
    @olatunjiolakunle6908 9 місяців тому

    Is something like this available in Vue ?

    • @GreenSockLearning
      @GreenSockLearning  9 місяців тому

      At the moment we advise using gsap.context() for vue - (which is what this hook uses under the hood) examples here -
      gsap.com/resources/frameworks/

    • @olatunjiolakunle6908
      @olatunjiolakunle6908 9 місяців тому

      @@GreenSockLearning thank you.

  • @SwOOp_de
    @SwOOp_de 8 місяців тому

    😍Cassie

  • @mendaxassange4465
    @mendaxassange4465 7 місяців тому

    can anyone point out to me how I can animate during unmount and mount using gsap. like modal view and exit.

  • @kabeerfcc4153
    @kabeerfcc4153 9 місяців тому

    Hy , mam please recommend me easy book for learning react js . With easy words of English

  • @sarahlauren4834
    @sarahlauren4834 9 місяців тому

    Wooow ! Is that the Pixel Spirit Deck in the background ? ( Maybe I should use it after all this time ) ;) Otherwise, great video, I'm going to check out this new hook ! Thanks. ☀

  • @mahery-t9s
    @mahery-t9s 8 місяців тому

    please provide documentation available for French speakers

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому +1

      I'm afraid we only have english docs. Our company is small (three people) and we don't speak french. I'd suggest using a translation extension, www.deepl.com/en/chrome-extension
      If you get stuck we can try and help you in the forums. Sorry we can't help more here.

    • @mahery-t9s
      @mahery-t9s 8 місяців тому

      @@GreenSockLearning ok okay, good job to you anyway, I use gsap in all my projects and I am satisfied with the results and the performance that gsap brings ❤ I hope that there will be a French version of the documentation one day 😊

  • @Osuran_Bogaa
    @Osuran_Bogaa 9 місяців тому

    can i use gsap in react native ?

    • @JackDoyleGS
      @JackDoyleGS 9 місяців тому

      Sure, I don't see why not. GSAP can animate anything that JavaScript can touch. I have zero experience with React Native personally, but I can't imagine why there'd be a problem.

    • @veedjohnson
      @veedjohnson 8 місяців тому

      @@JackDoyleGSthere will be a problem because GSap animates html elements.
      How is that going to work with native?

    • @JackDoyleGS
      @JackDoyleGS 8 місяців тому

      @@veedjohnson GSAP can animate literally anything that JavaScript can touch - not just DOM elements.

    • @veedjohnson
      @veedjohnson 8 місяців тому

      @@JackDoyleGS might give it a shot can you explain how it will work with the class name references used in the video? Given that react native does not use classes for it's elements

    • @JackDoyleGS
      @JackDoyleGS 8 місяців тому

      @@veedjohnson I have no knowledge of React Native, sorry. But you can target literally any object that JavaScript can touch, even a generic object like {x: 100}. If you're not dealing with DOM elements, then you wouldn't use selector text for your target - you'd reference the objects themselves whose properties you're animating.

  • @marcusdillgen
    @marcusdillgen 9 місяців тому

    Nice, that came at the right time!!! I also have to praise Cassie's videos. They are always some of the best learning material you can find.

    • @cassieevans604
      @cassieevans604 9 місяців тому

      I love to hear this 💚 Always trying to get better at it!

  • @madebyjonny7637
    @madebyjonny7637 8 місяців тому

    like for the dog, great video though 😅

  • @chrishare3273
    @chrishare3273 9 місяців тому

    yay!

  • @raghvendrapratapsingh2646
    @raghvendrapratapsingh2646 Місяць тому +1

    Subscribe and 1 like 👍

  • @LavoneMccorey-g3b
    @LavoneMccorey-g3b Місяць тому

    Weimann Plaza

  • @mazwrld
    @mazwrld 9 місяців тому

    ❤❤❤❤

  • @tom7050
    @tom7050 8 місяців тому

    O M G

  • @ДамирДроков
    @ДамирДроков 23 дні тому

    554 Becker Fords

  • @ndukachukz8067
    @ndukachukz8067 9 місяців тому

    What is she smiling at❤😂🌹

  • @fernandoli6743
    @fernandoli6743 3 місяці тому

    Her voice is so sexy !!!

  • @linorabolini
    @linorabolini 9 місяців тому +26

    Its so sad that React is so toxic at this point that we need adapters for everything. React is ruining what programming means and its ruining developers overall. Get out of react, try solidJS and be free.
    edit: I recommend SolidJS here because it is almost 1:1 to react, but without many of the bad parts of React.

    • @adeleke5140
      @adeleke5140 9 місяців тому +3

      Could you explain what you mean by toxic?

    • @linorabolini
      @linorabolini 9 місяців тому +1

      @@adeleke5140 yes ! what I mean by toxic is that React as a library is contaminating everything what was built up to now. If you want to use a 3rd party code, you need to "Reactify" it.
      The community is great, don't take me wrong, but it has gone too far to my taste. Really simple things became difficult, and the quality of our apps has been getting directly affected by it. The need of a special hook to make greensock would be an example. State management in react is another jungle we could talk about, a new library comes out every week.
      Hope this helps clarify my opinion :)

    • @gcash49
      @gcash49 9 місяців тому +12

      skill issue

    • @JEsterCW
      @JEsterCW 9 місяців тому +5

      @@linorabolini lol, from the way how react works its a framework, not library. I would rather pick vue/angular/svelte than solid. Hooks are just wrappers or additional abstraction(function) to make us more productive or comfortable (DX). State management in react is really fine since its hella open. The real problem is using old problematic ass tech like redux, mui or other piece of sheet instead of zustand,ss or just loaders per route. The quality of our app depends on ourselves(always) cuz of architecture and code quality, tool is only a tool it doesnt makes mess for no reason and if do youre using a wrong tool or u hit its limits.

    • @linorabolini
      @linorabolini 9 місяців тому

      @@gcash49 no, is not that. i have been working with react for the last 7 years. Or more actually. I thought it was the way to go, but i realized how much damage it made recently

  • @Labadubadubai
    @Labadubadubai 9 місяців тому

    Hello Beauty )

  • @wchorski
    @wchorski 9 місяців тому

    if you're getting a "Cannot use import statement outside a module" on plugin imports, try this
    import { Draggable } from "gsap/dist/Draggable";

  • @人天-i5s
    @人天-i5s 9 місяців тому

    I must learn gsap after this video, and ofc try this hook. Nice job 👏

  • @Michael-Martell
    @Michael-Martell 9 місяців тому

    Hey, I'm looking for the GSAP discord server. Could you send an invite so that I may join if it exists?

    • @GreenSockLearning
      @GreenSockLearning  8 місяців тому +1

      Hey there! We're considering setting up a discord for club members but it doesn't exist yet. This is a nice animation discord that we have a channel in though - discord.gg/uyVxpuwc8f

    • @Michael-Martell
      @Michael-Martell 8 місяців тому

      @@GreenSockLearning That would be awesome if and when you do! Thanks for that invite!

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

    61363 Kub Mission