Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kbeats

Use MorphSVG in Adobe Captivate?

Recommended Posts

Hello, 

 

I'm very new to GSAP and also very new to coding. I recently became a Club Greensock member, because I wanted to use the MorphSVGPlugin in Adobe Animate. However, after reading through the forums a bit I learned that MorphSVG doesn't work with Canvas (or something like that)? So now I'm trying to see if it's possible to use MorphSVG directly with Adobe Captivate (I usually build things in Animate then add them into Captivate as a web object). 

 

I can't, however, seem to get MorphSVG to work this way either. I've created an external javascript file called 'My.js' and I've loaded that, along with TweenMax, MorphSVGPlugin, and findShapeIndex.js, into my Captivate project on the first few slides. This is the code I use to load the files - 

 

function addScript(src){
var s = document.createElement ('script');
s.setAttribute('src', src);
document.body.appendChild(s);
}


addScript('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js');

 

(I did this on a separate slide for each file to load, loading MorphSVGPlugin.min.js first, then TweenMax.min.js, then My.js, then findShapeIndex.js).

 

Then, on the 5th slide of my Captivate project I added two SVG icons that I made in Adobe Illustrator. In Captivate I named them 'back' and 'next'. In my external 'My.js' file I gave them variables and created a function to tween them. I call the function on the 'on enter' action of the 5th slide of my Captivate project where the SVG icons are - 


var next = window.cpAPIInterface.getVariableValue("next");
var back = window.cpAPIInterface.getVariableValue("back");

 

MorphSVGPlugin.convertToPath("#nextc");
MorphSVGPlugin.convertToPath("#backc");
function myMorph(){
    TweenMax.to("#nextc", 1, {morphSVG:"#backc"});
}

 

I used the identifier "#nextc" and "#backc" because when I inspect the published html file, their div id's are nextc and backc. 

When I try it this way, I get this error: WARNING: cannot morph a <DIV> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

So then I have also tried to just use their variable names I gave them - 

 

MorphSVGPlugin.convertToPath(next);
MorphSVGPlugin.convertToPath(back);
function myMorph(){
    TweenMax.to(next, 1, {morphSVG:back});
}

 

but with this method I get an error that it 'Cannot tween a null target' 

 

I've added alerts to the beginning of each of the js files (besides from findShapeIndex) so I know they are all loading. 

 

Needless to say, I'm pretty confused and not sure what to try at this point. I wasn't sure if this post was better suited for the GSAP forums or the Captivate forums. Any help or advice would be very much appreciated!

 

 

Thanks. 

 

 

 

Link to comment
Share on other sites

Hi @kbeats :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I have no experience with Adobe Captivate, but I have a couple things you can try.

 

First, can you target the SVGs (or their parent divs) for a simple tween? Something like opacity. I'm just curious if that works or if this is just something with the MorphSVG plugin.

 

I can't see your SVGs, but I'm assuming they're already paths, correct? If so, you wouldn't need to use the convertToPath() method. That's for primitive SVG elements like <rect> <circ> etc. Also, are the SVGs made with one path or are you trying to target a group?

 

You said you inspected the file and the divs have names of "#nextc" and "#backc". Do the SVGs have an ID or class? More importantly, do the target paths themselves have any sort of ID or class? If the paths have no identifiers, you could try something like this.

 

TweenMax.to("#nextc path", 1, {morphSVG:"#backc path"});

 

That's assuming there is an SVG in that div and it only has one path. Without seeing your actual SVG code, I'm just shooting in the dark here.

 

Hopefully something I've listed will point you in the right direction.

 

Happy tweening and welcome aboard.

:) 

 

 

  • Like 3
Link to comment
Share on other sites

Thanks for the response!

 

So I tried just doing a simple tween on my SVG's, I wrote - 

 

var next = document.getElementById("nextc");
var back = document.getElementById("backc");

var tl = new TimelineMax({repeat:-1}); 
tl.to(next, 2, {scaleX:1.5, scaleY:1.5});
tl.to(back, 2, {scaleX:1.5, scaleY:1.5});

 

And that worked when I wrote it directly into Captivate's script window (you have the option to execute javascript as an action and this is where I wrote it). When I put this same code into my external js file and tried to run it - it came up with the 'cannot tween a null target' error. So I'm not sure what the issue is there - but for now I'll just write the code directly in Captivate. 

 

So from there, I tried to use MorphSVG again and I wrote - 

 

var next = document.getElementById("nextc");
var back = document.getElementById("backc");


TweenMax.to(next, 1, {morphSVG:back, delay: 1, repeat: -1});

 

Which gave me the error of: WARNING: cannot morph a <DIV> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

I think the SVG's are groups, that could be the issue? I created them in illustrator. Looking further into the element tab when I inspect the page, I think this is the SVG code for one of them(I could be wrong, don't know much about SVGs): 

 

<svg xmlns="http://www.w3.org/2000/svg" onmouseup="{if(window.parent.document.onmouseup) window.parent.document.onmouseup(arguments[0]);}"

viewBox="0 0 67.79 67.79">

<defs>...</defs> (there is style information in here, fills, strokes, etc.)

<title>NEXT</title>

<g id = "Layer_2" data-name="Layer 2">

<g id="navNext"> == $0

<circle class="cls-1" cx="33.9" cy="33.9" r="33.9"></circle> 

<polyline class="cls-2" points="26.45 19 41.34 33.9 26.45 48.79"></polyine> 

</g>

</g>

</svg>

 

My SVG buttons look like this (there is a white circle behind the arrow).

 

 

buttonNoShadow2x8.png.4ec05f2a1cb0fff3021ecc77b79f02f1.png

 

 

Link to comment
Share on other sites

Ah, it sounds like you're just targeting the wrong element(s). For example, "nextc" must be a <div> that the software is wrapping around your SVG stuff. You can't morph a <div>. You've gotta target a <path>. MorphSVGPlugin can actually convert other shapes like <circle>, <polyline>, etc. but you still need a way to target them with a selector of some kind. In other words, if you have a bunch of <circle> elements, for example, you need them to have IDs or something that'd allow you to say "I want that circle that's the 3rd one from the top" or whatever. Hopefully Captivate allows you to assign IDs to the SVG elements. If not, you may have to get more creative in how you target things. Like in your sample code, there's a <g> with an id of "navNext", and the <polyline> inside that has a class of "cls-2", so if you want to morph that, you could do: 

MorphSVGPlugin.convertToPath("#navNext .cls-2");
TweenMax.to("#navNext .cls-2", ...);

 

So the main problem seems to be figuring out out to select the SVG element(s) you want. See what I mean? 

 

It's really tough to troubleshoot blind, so if you need more help it'd be best to provide a codepen or something we can actually look at. 

  • Like 1
Link to comment
Share on other sites

Yep - that's what I was asking about. Everything is in a group and it sounds like you'll want to target that polyline. I'm guessing it will morph from a right caret to a left caret?

 

If you created the artwork in AI, I'm also guessing that both start and end polylines may end up with the same class which will be problematic. I wrote a post about better AI exports here:

 

But as Jack mentioned, a demo would be helpful. Here's some info about creating one.

Happy tweening.

:)

 

Link to comment
Share on other sites

Thank you!

 

I went back into Illustrator and tried to clean up my files and get some cleaner code to work with (based off of the post you shared). 

Here is my SVG code now. This is the next arrow icon  -

 

<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273 273"><title>iconSVG</title><g id="nextGroup"><circle id="circle" cx="136.5" cy="136.5" r="136.5" fill="#fff"/><polyline id="arrow" points="125.63 60.37 205.85 140.59 125.63 220.81" fill="none" stroke="#363f59" stroke-linecap="round" stroke-miterlimit="10" stroke-width="29"/></g></svg>

 

and this is the back arrow icon - 

 

<svg id="backIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273 273"><title>backIcon</title><g id="backGroup"><circle id="backCircle" cx="136.5" cy="136.5" r="136.5" fill="#fff"/><polyline id="backArrow" points="147.37 60.37 67.15 140.59 147.37 220.81" fill="none" stroke="#363f59" stroke-linecap="round" stroke-miterlimit="10" stroke-width="29"/></g></svg>

 

I have these both on the same slide in Captivate and I added this code to the slide - 

 

MorphSVGPlugin.convertToPath("#nextGroup");
MorphSVGPlugin.convertToPath("#backGroup");

TweenMax.to("#nextGroup", 1, {morphSVG:"#backGroup", repeat:-1});

 

When I publish the project, nothing happens, no tweening or anything, but I'm not getting any errors in the console log. 

I tried to make a codepen as well (sorry I don't know how to scale my SVG's in codepen so they're kind of huge). 

See the Pen zaEdyr by kbeats (@kbeats) on CodePen

 

Link to comment
Share on other sites

It looks like you're still targeting groups. The morphSVG plugin works path to path. The polyline is what you need to target. In your case, this should work.

 

TweenMax.to("#backArrow", 1, {morphSVG:"#arrow", repeat:-1});

 

You also don't need separate SVGs to make this happen. Here's a simple demo with both polylines in the same SVG.

 

See the Pen zaEzoa by PointC (@PointC) on CodePen

 

Does that make sense?

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Yes, thank you for all your help!! 

  • Like 2
Link to comment
Share on other sites

You're welcome. That's how we roll in the GreenSock neighborhood. ;)

 

Thanks again for supporting the platform with your Club membership. Let us know if you have more GSAP problems or questions. Happy tweening.

:)

 

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