kbeats

August 8, 2018

Hi there,

I'm trying to adapt

See the Pen zDwEk by GreenSock (@GreenSock) on 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!

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

July 12, 2018

Thank you!!

July 12, 2018

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 -

The last one is my own JS file.

Any advice is much appreciated!

Thanks.

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

June 20, 2018

Thank you, these are great examples and I've got it working now!

June 20, 2018

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 -

slidingMenu.PNG.50e708d7a1f76531b71d8bad269a34f1.PNG

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.

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

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!

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

June 15, 2018

Yes, thank you for all your help!!

June 15, 2018

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 -

and this is the back arrow icon -

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

June 15, 2018

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):

viewBox="0 0 67.79 67.79">

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

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

</g>

</svg>

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

buttonNoShadow2x8.png.4ec05f2a1cb0fff3021ecc77b79f02f1.png

June 13, 2018

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.

Notifications

Messages

kbeats

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by kbeats

Snap on End Issue w/ Draggable

Tweens working in Dreamweaver preview / not in Codepen or on web

Tweens working in Dreamweaver preview / not in Codepen or on web

Toggle menu open/close with hover and click

Toggle menu open/close with hover and click

Use MorphSVG in Adobe Captivate?

Use MorphSVG in Adobe Captivate?

Use MorphSVG in Adobe Captivate?

Use MorphSVG in Adobe Captivate?