Animating a simple graph

[AndyWhite007]

I've managed to animate a simple graph but when I load it to my site it says "Oops! Trial version of DrawSVGPlugin deployed".  I've joined Club Greensock a while ago and also 'Creative Coding Club' but didn't realise there may be a need to register for the plugin used?

- is this correct? I only want to animate a graph so I could (in theory) do it other ways (any suggestions - see below)

- for simple annimations (like making lines 'grow') then is there a simpler way without specialist / paid plugins? 

I'm only trying to bring a bit of 'life' to my site - I'm not a professional web-developer.

Side question: - in the Code Pen: I've 'got it working' by making the SVG in the HTML - but is there a better way - or should I keep everything external to the html? i.e. what's 'best practice' for this?

See the Pen eYjrdQN by AndyWhite007 (@AndyWhite007) on CodePen

[Rodrigo]

Hi,

51 minutes ago, AndyWhite007 said:

"Oops! Trial version of DrawSVGPlugin deployed"

That warning is given when you either deploy something created with the Club Plugins using GSAP Trial or using the files from Codepen.

 

I don't see any transaction regarding Club GreenSock in your account. Draw SVG is indeed a Club plugin, perhaps you are confusing registering an account in GreenSock with purchasing a Club GreenSock membership.

1 hour ago, AndyWhite007 said:

- for simple annimations (like making lines 'grow') then is there a simpler way without specialist / paid plugins? 

I believe that you can use the stroke dash offset and dash array, but I'm not very familiar with that technique, you should investigate a bit:

https://css-tricks.com/svg-line-animation-works/

 

1 hour ago, AndyWhite007 said:

I've 'got it working' by making the SVG in the HTML - but is there a better way - or should I keep everything external to the html? i.e. what's 'best practice' for this?

SVG is valid markup and you shouldn't have any issues in modern brwosers by including it directly on your HTML code.

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!