Jump to content
GreenSock

magyarn

Using DrawSVG in Codepen

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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.

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

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});

 

  • Like 2
Link to comment
Share on other sites

 

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.

  • Like 5
Link to comment
Share on other sites

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.

  • Like 3
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.
×