Animating UI components (e.g. React): Best practices, patterns, tips and tricks

[Kanji Nakamoto]

Hi,

I used to be a proficient GSAP user until 2016, as a Creative Technologist in the Creative industry, Agencies, etc. Since 2015, I've been mainly working as a full-stack developer, interface or Frontend develop; and my focus and priorities have changed completely.  Much has changed since, from Popmotion to Motion, GSAP becoming free? Etc. Although I worked with GSAP and similar libraries occasionally; I'm planning to pick GSAP again, as I'd like to focus more on design + engineering for some time.

GSAP seem to have a good starting point at https://gsap.com/ui, which I'll use as a reference.

If any of you have any good practices and conventions when working with React + Components + Vanilla CSS or Tailwindcss, is appreciated.

Thank you!

[Rodrigo]

Hi,

 

For working with React definitely have a look at our useGSAP hook:

https://gsap.com/resources/React

 

Also we have these demo collections in Stackblitz, React:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

NextJS

https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters

 

There are other demos in our Stackblitz account, for some specific forums questions, so if you have any particular doubt maybe there could be one there:

https://stackblitz.com/@gsap-dev

 

You can look or just ask here in the forums. Needless to say that if you have any question along the way don't hesitate to ask here in the forums! 👍

 

Happy Tweening!