Jump to content
GreenSock

h0rhay

React and Gsap plugins = CRY

Recommended Posts

Hi,
Can anyone help with using Gsap plugins with react?
I have tried using the .tar.gz as documented but am struggling to see how this would work in production as you need to have dependencies in the package.json in order for the project to build.
Is there a step by step simple react and Gsap (with plugins) example anywhere?
None of the examples on the documentation here use a Gsap plugin.

 

Many thanks,

 

George

All the below code does is result in a 'drawSVG' not found error.. (I'm using v3 of Gsap is that ok?)

import gsap, { TimelineMax } from 'gsap'
import { drawSVG } from 'gsap/drawSVG'
gsap.registerPlugin(drawSVG)
const plugins = [drawSVG]
Link to comment
Share on other sites

13 minutes ago, h0rhay said:

I have tried using the .tar.gz as documented but am struggling to see how this would work in production as you need to have dependencies in the package.json in order for the project to build.

 

Then you didn't install it. Follow the documentation.

https://greensock.com/docs/v3/Installation

 

And watch the videos all the way through.

 

You don't need TimelineMax. And it's better to use braces as it gives you autocomplete.

 

import { gsap } from 'gsap'
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
gsap.registerPlugin(DrawSVGPlugin);
//const plugins = [drawSVG]

 

  • Like 4
Link to comment
Share on other sites

Thanks so much for responding.. I guess it must be because because I dont have access to DrawSVG. I've watched the video, downloaded the package (logged in).. but it has no DrawSVG file.. 
So I guess you need to pay to use DrawSVG?
 

Link to comment
Share on other sites

Yeah, it's a member plugin, so it won't show up in the package if you haven't paid for it.

  • Like 1
Link to comment
Share on other sites

Ok thanks
Guess I'll just go for plain 'ol dash-offset css and/or JS.. shame tho

Link to comment
Share on other sites

2 minutes ago, h0rhay said:

Guess I'll just go for plain 'ol dash-offset css and/or JS.. shame tho

That's totally fine and it'll probably work most of the time but please keep in mind that DrawSVGPlugin solves various issues like:

  • IE and Firefox have some bugs that cause <path>.getTotalLength() not to work properly.
  • In IE, if you call getTotalLength() on a <path>, it locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick.
  • Firefox will throw an error if you try calling getBBox() on an element that isn't visible (which you may need to do to calculate the length for normal shape elements like <rect>, <line>, etc. - DrawSVGPlugin works on all those shapes so you don't have to use a <path>)
  • Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin.
  • Some browsers render artifacts when dash is 0.
  • When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! So you'll need to sense that and make the proper adjustments.

There are some other issues too (I can't remember them all) and DrawSVGPlugin solves them all for you. But yeah, you're welcome to just animate dash-offset if you prefer to avoid joining Club GreenSock. No biggie. I'm just trying to point out why some folks see the value of just joining the club to avoid wrestling with the hassles, make sure their animations "just work",  and save time. ;)

  • Like 5
Link to comment
Share on other sites

Also keep in mind that the Club doesn't just include DrawSVG. You also get MorphSVG, SplitText, CustomBounce/Wiggle and a bunch more. All are really cool, but also time savers. As the old adage goes → time is money. Just my two cents. Happy tweening. :)

 

https://greensock.com/club/

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

3 hours ago, GreenSock said:

That's totally fine and it'll probably work most of the time but please keep in mind that DrawSVGPlugin solves various issues like:

  • IE and Firefox have some bugs that cause <path>.getTotalLength() not to work properly.
  • In IE, if you call getTotalLength() on a <path>, it locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick.
  • Firefox will throw an error if you try calling getBBox() on an element that isn't visible (which you may need to do to calculate the length for normal shape elements like <rect>, <line>, etc. - DrawSVGPlugin works on all those shapes so you don't have to use a <path>)
  • Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin.
  • Some browsers render artifacts when dash is 0.
  • When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! So you'll need to sense that and make the proper adjustments.

There are some other issues too (I can't remember them all) and DrawSVGPlugin solves them all for you. But yeah, you're welcome to just animate dash-offset if you prefer to avoid joining Club GreenSock. No biggie. I'm just trying to point out why some folks see the value of just joining the club to avoid wrestling with the hassles, make sure their animations "just work",  and save time. ;)

This is AMAZING info and should be front and center as a case study on your membership signup page.
I've gone with Anime JS for now.. but would definitely consider using Gsap in future for projects that need it, due to this post. 👍
Nice work folks

 

  • Thanks 1
Link to comment
Share on other sites

1 hour ago, h0rhay said:

This is AMAZING info and should be front and center as a case study on your membership signup page.
I've gone with Anime JS for now.. but would definitely consider using Gsap in future for projects that need it, due to this post. 👍
Nice work folks

 

No problem at all. Good luck with AnimeJS. I'm curious - what caused you to switch away from GSAP? What's the perceived benefit of moving to AnimeJS? I'm not criticizing at all - just genuinely curious about how/why people make these decisions. 

 

As for putting info on the club page about all the browser bugs/inconsistencies that GSAP and its plugins solve, I'm afraid that'd make the page rather unwieldy. In my decade+ of doing this, there are just so many things I've had to do to normalize behavior and frankly I haven't logged them all but I imagine the list would be really boring to read through :)

 

At the end of the day, our entire business and the library itself trades on the trust we build with users through solving browser bugs (something Anime doesn't really do as far as I know), having dedicated/consistent support via these forums, and a commitment to ongoing development (you'll see that again next week when we launch a very exciting new GSAP plugin). We aim for things to "just work" with GSAP. Most developers really appreciate not having to mess with all the "gotchas" lurking when they try animating things in the browser. But alas, GSAP isn't for everyone and that's totally okay. I just want to make sure we're doing an adequate job of understanding the needs of our users, addressing concerns, and communicating the value. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

I think the list and case study that you mentioned in your earlier post are VERY relevant and interesting reasons that would help explain the Gsap offering. I know when you have worked so closely on a project for many years it's often hard to spot the nuggets of info like this that would make all the difference for potential users.
Essentially you have spent many years making animation on the web easier for front end devs, but this is not clear from the website. The website focuses on rather dated looking greensock imagery, and relies on an already established user base that seem to have prior knowledge of the platform. I think a healthy refresh of the website and messaging would do no end of good.
The main reason I went with Anime is that I am looking for a quick solution to deliver a path stroke animation.. In order to use Gsap DrawSVG Plugin I would have to sell in a business case to stakeholders and fellow team members to achieve a relatively simple task that I know can be accomplished fairly easily. It just didn't make sense for this one small task.
In the future I am sure it would make sense for a larger scope project..
Also the tar.gz route with the 'file:' reference in package.json seems flakey to me and not up to scratch for a commercial project.. which again made me look elsewhere.
In short, too many hoops to jump through to accomplish a simple task.. better to ensure that everything is available and focus on people buying licences once they are going to production.
If they have to fork out just for prototyping then they'll look elsewhere.
Just my 2 cents
I'll be back for sure 👍

Link to comment
Share on other sites

I sure appreciate the feedback, @h0rhay! Very thoughtful. 

 

It's understandable that you had a simple need that (at least on the surface) could be served by a different open source alternative and you didn't want to mess with making the business case to approve the expense. No worries. I trust that at some point, you'll see how the GSAP license would pay for itself quickly and the peace of mind for a senior dev like you knowing that it's a well-supported, widely used tool will make it an easy decision in the future. 

 

I didn't understand why the file: reference in the package.json seemed flakey to you. Seems totally portable and just as solid as any standard package. You'd put the tgz file in your custom JS payload like everything else, and whenever someone runs npm install, it'd unpack stuff directly into your node_modules. I was shocked when @OSUblake showed me that and it's incredibly simple/powerful. If you've got any other specific suggestions about how to handle the bonus stuff, I'm all ears. 

 

Again, thanks so much for spending the time to explain your decision. 

  • Like 3
Link to comment
Share on other sites

Every day is a school day' as they say, and this tar.gz npm solution is a new one on me that I'll have to investigate further, sounds interesting.
My main issue is having to fork out in order to import the plugins in modern web builds. You could spend hours tweaking something in CodePen.. only to find that integrating it with a front end framework is a no go until you pay up [as happened to me this afternoon 😆]. Seems to me like it'd be better to pay up once going to production as thats where the business case comes in and stakeholders can be squeezed for licence fees.
Cheers though

Link to comment
Share on other sites

Hey H0rhay. We don't attempt to hide the fact that some of our plugins are for our Club members. And we definitely don't try to squeeze people for money. That is the polar opposite of what GreenSock does. GreenSock has one of the cheapest (for the value) and most forgiving pricing and licensing policies that I have seen for software. The time it can save you is incredibly immense and for the majority of people's usage it's totally free. I really am not seeing where you're coming from with your comments in the last post, so please help me understand.

 

Is there some way we could improve to make it more clear that the files you were using are for Club GreenSock members? 

  • Like 5
Link to comment
Share on other sites

1 hour ago, h0rhay said:

this tar.gz npm solution is a new one on me that I'll have to investigate further, sounds interesting.

 

That functionality has always been there. When you do something like npm install react, all it's doing is downloading a .tgz from npm's servers.

https://docs.npmjs.com/cli/install

 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×