kbeats

ShockinglyGreen
  • Content count

    4
  • Joined

  • Last visited

Community Reputation

2 Newbie

About kbeats

  • Rank
    Newbie
  1. kbeats

    Use MorphSVG in Adobe Captivate?

    Yes, thank you for all your help!!
  2. kbeats

    Use MorphSVG in Adobe Captivate?

    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).
  3. kbeats

    Use MorphSVG in Adobe Captivate?

    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).
  4. kbeats

    Use MorphSVG in Adobe Captivate?

    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.