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.
These are the steps that worked for me.
- Add both Greensock libraries into Hype resource panel. Make sure they are being loaded correctly on page load with the main library first.
- Add SVG code (with identifiers) into blank Hype element
- Attach gasp javascript code to Hype action (e.g. On scene load or button click)
- Run
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
1 Like
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.
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)
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
1 Like
Hi Lucky,
I saw what jou have done and i understand how it works now.
Thank you, this was a big help.