Has anyone tried using gsap’s MorphSVG with tumult hype?
I killed a whole day with no luck.
I do have it working within dreamweaver, but I want to use hype.
1 Like
Wow, that’s one of the missing Flash features. It totally should be a feature in Hype. Unfortunately, the licensing might be problematic… http://greensock.com/licensing/ …the Standard / Business chart was a big roadblock.
Problem #1… If I add it to my project, but that project is a game to be sold, then it seems that I need a business license. I’d probably just redesign the project rather than have to do that.
Problem #2… Maybe Tumult (Hi @jonathan and @Daniel) are feeling adventurous. They get a license to add the feature to use the software, perhaps as an in-app purchase, but then are users then able to add MorphSVG to their Hype projects that are “Business” related?
They do offer a “Permanent” license, but I’m not sure how that would apply to Tumult / Hype. That’s because everyone who uses Hype is a developer.
There appears to be an open source alternative… https://alexk111.github.io/SVG-Morpheus/ …but the morphing doesn’t seem to be as clean. It creates some stray pixels in Safari. (This is especially apparent in the “Rotation: None” example.)
This is definitely possible in Hype.
Here is a video clip of this library in action.
morphSVG_Example.mp4 (249.1 KB)
Sorry, but no example code as this is a commercial library.
Yeah Ive done several ads with Hype and this plugin. It can be limited but for what it is it performs great on most devices. I dont know if you can make it part of hype with a license as it uses gsaps animation engine, which isn’t like hypes one… They would also need to add svg drawing tools before they start implementing morphing those drawings.
Also can’t post examples sorry, it cost me $100 
So how do you guys have it working?
I have the svg code pasted into a text element:
<svg id="circleSquare" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247 250"><path id="end" class="cls-1" d="M247,247H0V0H247V247Z"></path><path id="start" class="cls-1" d="M247,126.5A123.5,123.5,0,1,1,123.5,3,123.5,123.5,0,0,1,247,126.5Z"></path></svg>
Then the gsap js:
var tl = new TimelineLite();
tl.to("#start", .5, {morphSVG:"#end"}, “+=.5”);
Again this works in dreamweaver, but not hype.
These are the steps that worked for me.
- Add both libraries into Hype resource panel. Make sure they are being loaded correctly on page load.
- 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
Make sure you’ve embedded the libraries in proper sequence.
From what your example shows you’d need tweenlite, timfelintlite, morphsvg. Also Hype let’s me refer to svgs without quotes so that’s neat. So try just .to(path1,1,{etc
it’s working fine now. I think it was a simple as have the code work on scene load.
Thanks
Hi Drewbullen,
if possible, you can put some pictures so I can understand it better.
Thank you.
Check out this thread for pictures:
Or this link:
1 Like
I try it.
Thanks.
Hi sirhclluk,
You have an example of MorphSVG using Hype that you can share.
Any luck Fuv? Here is code I just copy and pasted from Hype. codepen
The svg code I have pasted in a Text Element.
