Greensock drawnSVG


(hessel) #1

What is the best way to animate a SVG with greensocks DrawnSVG. I am new with hype 3.5 and I dont’t understand how to do it. I have the ShockinglyGreen libary, so thats not the problem.


(drewbullen) #2

These are the steps that worked for me.

  1. Add both Greensock libraries into Hype resource panel. Make sure they are being loaded correctly on page load with the main library first.
  2. Add SVG code (with identifiers) into blank Hype element
  3. Attach gasp javascript code to Hype action (e.g. On scene load or button click)
  4. Run

(Lucky) #3

Yeah what Drew said, also if you’re going to be embedding svg elements you made using illustrator i would run it trough


so it deletes the excess code you don’t need.

My way of translating the vectors:

  • copy all of the elements from illustrator

-paste them into sublime text(atom lags with big svgs) and save them

-in terminal do
:cd yourdirectory
:svgo yoursvg.svg --pretty

-re open the svg and paste that into a hype box(and give it an ID so you can animate it)

Will save you a lot of filesize


(hessel) #4

thanks for your reply Lucky

How jou can connect the svg, I try it with id and a class in the indentity panel but no drawing. With Tweenmax its no problem.


(Lucky) #5

With Tween Max it’s no problem? As in you can animate the top left properties of it but not the draw properties?
If you’ve set it an id make sure it’s set to the path itself not to a group or the root svg element.
Try to refer to it using TweenMax.to(’#myPath’ instead of (Mypath

Could be a lot of reasons though, you can PM me the source file if you want(I also have a premium membership)


(hessel) #6

Hi Lucky,
Here my source files, mayby you can see someting

draw.hype.zip (67.7 KB)


(Lucky) #7

ah i see, you don’t have anything in the svg file itself called ‘template’ you need to directly reference the svg paths with tweenmax. Which is also why i’d suggest placing the code inside a hype box.
I put your svg in a box and referred to “budha”

draw.hype 2.zip (65.8 KB)

Works now


(hessel) #8

Hi Lucky,
I saw what jou have done and i understand how it works now.
Thank you, this was a big help.