Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by kbeats

  1. Hi there, I'm trying to adapt Greensock's draggable toss codepen and I'd like for the live snap feature to be turned on automatically (so that the boxes to snap to the grid after being released). I'm very much a scrub at code and I'm sure there's a very easy way to do this, but I can't seem to figure it out. Any help is much appreciated, thanks!
  2. Hi, I'm trying to create a project using draggable and cssplugin (for tweening drop shadows). I built it first in Dreamweaver and in the Dreamweaver preview pane everything is working. However, when I publish it to the web and in the codepen I recreated it in, the tweens on mousedown and mouseup are not working. I'm not sure where the issue is as nothing is coming up in the console errors. Would it have to do with what order I'm loading my scripts in? This is the order I have them in in my dreamweaver project - <script src="jquery-3.3.1.min.js"></script> <script src="TweenMax.min.js"></script> <script src="Draggable.min.js"></script> <script src="MorphSVGPlugin.min.js"></script> <script src="DrawSVGPlugin.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script> <script src="CSSPlugin.min.js"></script> <script src="ThrowPropsPlugin.min.js"></script> <script src="dragJS.js"></script> The last one is my own JS file. Any advice is much appreciated! Thanks.
  3. Thank you, these are great examples and I've got it working now!
  4. Hi everyone! I'm trying to create a menu item that will slide on screen when the user hovers over it (part of it is showing on screen and part is hidden) then will hide again once the user moves their mouse off of it. But I'd also like this to work on mobile, so I'd like it to open and close with clicks as well. The idea is if the menu is currently hidden or closed, when the user clicks the menu will slide open on screen, then if the menu is currently open and the user clicks on it, it will slide back into it's closed position. I'm creating this in Adobe Animate to be exported as an .oam file and put into an Adobe Captivate project. Here's a screenshot of my Animate stage to give a better visual idea of what I'm looking to do - So the entire object is what's called a movieclip in animate and I gave it the variable name of 'unitsHome' I have my GSAP library TweenMax loaded into my Animate project. I created a timeline for sliding the menu onto the screen: var tl_hover = new TimelineMax(); tl_hover.to(unitsHome, .7, {y:320, ease:Circ.easeInOut}); tl_hover.stop(); // so it doesn't play until interacted with Then for hovering over it to open/hide it I created two functions: function Hover(){ tl_hover.play(); } function Out(){ tl_hover.reverse(); } And then assigned them as window event listeners: unitsHome.addEventListener("mouseover", Hover.bind(this)); unitsHome.addEventListener("mouseout", Out.bind(this)); This part was working great for just using mouseover and mouseout. But then I'm not sure how to also incorporate the clicking functions. I tried to use .totalProgress() to detect if the timeline had played or not and let that determine whether the menu would open or close on the user's click. The function I wrote: function Down(){ if(tl_hover.totalProgress(0)) { tl_hover.play(); } else if (tl_hover.totalProgress(1)) { tl_hover.reverse(); } } unitsHome.addEventListener("mousedown", Down.bind(this)); For testing purposes at this point I commented out the mouseover and mouseout event listeners and what happens is the menu will open fine, but then when I click on it again once it's open it goes back to it's starting point and plays the timeline over again, opening the menu again. I tried to recreate something like this in codepen for testing, and almost the same thing is happening there, but instead of playing the timeline again it just sends my object back to it's beginning position. I'm used to just creating stuff in Animate, so HTML and CSS are VERY new to me - apologies if my codepen is kind of janky. Thanks for any help/advice! It is appreciated!
  5. 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).
  6. 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).
  7. 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.