Improve documentation

[cdedreuille]

Hi,

 

This is more a feature request. GSAP is absolutely fantastic but I found the documentation quite hard to navigate and focus a lot on vanilla javascript. As a react developer it would be great to have a dedicated section for react or separate code examples in different frameworks. Also for products like scrollTrigger, having everything in a single page is a bit hard to navigate. I found myself using the different videos you created as a reference instead of doc which takes more time.

[cdedreuille]

That said, you are always super reactive on the forum which is absolutely awesome.

[Cassie]

Hey there, thanks for the feedback!

We're currently working on updating our React post with tips to help utilise GSAP and React together, so hopefully that will be a step in the right direction! - 

Most examples are in vanilla Javascript as this can be extrapolated out into whichever framework the developer is using. GSAP syntax doesn't change between frameworks - it's just differing environments and approaches - e.g refs, waiting for DOM to load etc. So in most cases, I think multiple demos would be unnecessary.

That being said - A react section in the docs could be useful. It would be great to know which demos in particular you found hard to understand from a React perspective. Is there anything you'd particularly like to see in a React section or post?

 

[OSUblake]

5 hours ago, cdedreuille said:

I found the documentation quite hard to navigate

 

Do you have links to documentation that you really like?

 

5 hours ago, cdedreuille said:

As a react developer it would be great to have a dedicated section for react or separate code examples

 

We're working on some tutorials. Is there anything that you would like to see or were having trouble getting to work?

 

 

[cdedreuille]

I really like Algolia's API Reference documentation. They explain in details each options quite a clear way.

https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/

They also have a guide section with different use cases.

 

Nextjs example folder in their Github is also such a good one. It helped me a lot to get started. I know you are using Codepen but perhaps having a single place with all the examples would be amazing.

https://github.com/vercel/next.js/tree/canary/examples

Stripe is also a really great one

https://stripe.com/docs/api/payment_methods

 

Perhaps the main thing is the navigation. In this page for example https://greensock.com/docs/v3/Plugins/ScrollTrigger

All the keys you can add inside a scrollTrigger object is not part of the left navigation. The other day I couldn't remember how you named 'scrub' or 'markers' and because it was not part of the left navigation, it took me some time to find it. I ended up watching again the video.

Lodash is also really useful. I always find the information very fast.
https://lodash.com/docs/4.17.15

 

Also maybe something that could help having a faster and more delightful experience would be to remove the animations on the left navigation sidebar in the docs. It feels a bit clunky.

 

----

 

For the list of tutorials, that's such a great idea. Perhaps having a voting system for people to choose what tutorial they want next would be great. For me, having multiple tutorials or code examples on react would be amazing. Perhaps few examples using ScrollTrigger in all its glory.