Using DrawSVG in Codepen

[magyarn 3 Likes (Newbie)]

Hello,

 

I'm following along with the DrawSVGPlugin tutorial on the website, but seem to be having trouble getting DrawSVG to run. I am a Club Greensock member, so I believe I've pasted in the latest version of TweenMax, which should give me access to the plugin, correct? Thank you for your help.

See the Pen bYBYLV by Nathan_James (@Nathan_James) on CodePen

[mikel 4,774 Likes (Superhero)]

Hi @magyarn,

 

Welcome to GreenSock Forums.

 

You need the https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js Plugin.

Here you find all for CodePens: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js

 

See the Pen bYBLpj?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Sahil 2,655 Likes (Superhero)]

@mikel You posted same link twice, I guess you meant this.

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

BTW I tried opening fridge, was little excited to see it open.

[magyarn 3 Likes (Newbie)]

Thank you @mikel. I realized my drawDVG syntax was also incorrect. I wanted to draw the grey SVG in, so I had to use the from() method and "0%" as my drawSVG value.

 

TweenMax.from("#freezerDoor", 1, {drawSVG:"0%", delay:.5});

 

[Sahil 2,655 Likes (Superhero)]

 

Found someone's pen and made it draggable.

 

See the Pen aVBqYB?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

@GreenSock is it possible to add/remove draggable trigger elements once draggable is created? I can instead trigger it manually using startDrag method, but was curious if it can be changed later.

[OSUblake 18,474 Likes (Superhero)]

51 minutes ago, Sahil said:

 

@GreenSock is it possible to add/remove draggable trigger elements once draggable is created? I can instead trigger it manually using startDrag method, but was curious if it can be changed later.

 

You would need to kill and recreate your draggable for that. If all your triggers exists when you create your draggable, you could change their pointer-events from "auto" to "none" to disable a trigger and vice versa.