Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

kbeats's Achievements



  1. Thank you so much! I didn't realize onReverseComplete existed!
  2. Hi, I'm using GSAP in an external javascript file that I'm using to control navigation buttons in Adobe Captivate course. Long story short - I'm wondering if there is a way I can have a function run after my timeline finishes it's animation, but ONLY after the timeline has been played in reverse? I have a timeline for each button (back and next), and it plays when the user clicks on the button, then reverse when they let the mouse up. I'd like after they let the mouse up for Captivate project to go to the next page - but the way I'm doing this now, putting the function to go the next page right after the tl.reverse(); call , it happens before the animation has time to complete. (In my codepen I'm changing the color of one of my buttons, since it's not in Captivate). I know I could accomplish this by having a separate timeline for each mouseup and mousedown event listeners - but I'm trying to consolidate my code. Thanks for any help and advice!
  3. This is awesome, thank you so much! If you have the time, I'm wondering how the 'btn' argument in the function is working and how it is targeting the buttons when the variable set for them is navBtns?
  4. Hi everyone, I'm making some navigation buttons and I've been using GSAP to animate some mouseover and mouseout interactions. Currently, I have it set up so that there is a new GSAP timeline for each button for each mouseover and mouseout. I'm wondering if there is a way to consolidate my code or a more efficient way of writing this? For example, is there a way to make the target of each timeline (instead of using variables) like a 'this' type of thing, so that I only have to write two timelines (one for mouseover and one for mouseout) and it would work for both buttons? I'm very new to code and have been teaching myself, so apologies that I don't have all the jargon down just yet! Any advice is greatly appreciated, thanks!
  5. Thank you! I didn't even think about that.
  6. Hi everyone, I'm trying to build a function that will tween my images to the center of the window. However, the equation that I thought would work, is sending my images off screen. I'm not sure if this has something to do with top/left versus x/y and where GSAP gets the origin point from when tweening x and y? Does it go off the center of the object being tweened, or does it go off of it's top left corner? Here's my codepen - I'm not the best at math, but I thought by taking half the windows height and subtracting half the images height (then doing the same with the width), it would put the object being tweened at the center of the screen? This is how I have it written (in this instance I'm using my 'container' div instead of the window): var xCenter = $(".container").width() / 2; var yCenter = $(".container").height() / 2; setting variables for the container height/width halved. Then subtracting the image that is being clicked on width/height halved from that - x:xCenter - ($(this).width()/2), y:yCenter - ($(this).height()/2) However, this seems to be sending my 'images' off the screen? I'm lost, since when I do the math, at least on the X axis, it should be sending the blue box to the position 270?? I'm not sure what I am missing. Any help is much appreciated.
  7. Thank you so much Shaun for taking the time to explain this! It's all still a bit over my head, but I'm trying to learn as much as I can and this is extremely helpful!
  8. Thank you Shaun! This is super helpful and exactly what I was trying to do! I don't really understand the line: if (!window[id]) { window[id] = new TimelineMax({paused:true, reversed:true}); Is this just saying if there is no div id selected it will create a new timeline and store it in a variable window[id]? I'm trying to understand as much as possible so if I need to I can build off this in the future. Thanks!
  9. I've been banging my head against the wall on this one for a while now. My goal is to have one function that will apply to any div whose id contains the word 'image' (I realize it would probably be easier to do this by class name, but I'm hoping to use this code in an Adobe Captivate project, where I know how to get the ID of images, but not the class). I've tried several different ways, but I keep running into the same issue - whenever I get it to work, it will run well the first time I click a div (by only targeting the div that is clicked), but as soon as I click a different div it will run the function on both of them. I've tried every iteration of this and $(this) I can think of, but can't get it right. I have a couple of commented out attempts in this codepen, but my most recent attempt looks like: var target = this.$("div[id*=\"image\"]"); for (var i=0;i<target.length;i++){ target[i].addEventListener("click", function() { tl.to(this, .6, {x:100, y:100}, 0); tl.reversed() ? tl.play() : tl.reverse(); }) } I'm trying to loop through the variable I've defined as any div with an id containing the word "image", but even with the loop it's still affecting both divs when only one is clicked? I'm really confused as to why this is happening, I thought the entire point of a for loop is to target just one object within the loop? Is there something I need to add into an onComplete function that breaks up the loop?
  10. kbeats

    MorphSVG Help

    Thank you! SVG code is still SO confusing to me!
  11. kbeats

    MorphSVG Help

    Hi there, I'm trying to incorporate morphSVG into my current project and having some difficulties. What I'm trying to do is build a table of contents essentially, and I have an SVG as the icon to open and close the TOC. I'd like the SVG to morph from it's current form to a different SVG (which is the same thing only horizontally reversed). Not sure where the issue lies in my code, but so far no luck - I'd like to have the SVG morph on the open and close (playing the timeline and playing in reverse) of the TOC. Right now though I just added a tween to test if it would work. Help is much appreciated. Thanks.
  12. Nevermind, I think I just found it out! myVariable.style.zIndex seems to do the trick!
  13. Hello, I am yet again back at the forums with what (I'm hoping) is a very simple question. With the help of this forum, I was able to achieve the effect I was aiming for with this codepen - I'm taking this logic and applying it to an HTML page which I'm then embedding into an Adobe Captivate project, and it is working well! However I just noticed that's it's possible to 'zoom' both items at the same time, and I'd like it so that the user can only 'zoom' an item if the other is at it's normal size. My first thought was to add a statement to if my statements, saying something like the item should only 'zoom' if the ID matches and the other item's zIndex is set to the initial number (2 in this case). So I tried writing it like this - window.addEventListener("mousedown", function(e){ if(e.target.id=="image2" && image1.z-index==2){ tl_2.reversed() ? tl_2.play() : tl_2.reverse(); } }) However, that is breaking the animation. I guess my question is how can I reference the zIndex of an item like this? I know how to set it using TweenLite.set, but I'm not sure how to just call to it and check if it equals the proper number. Many thanks!
  14. I know this is a super old topic, but I've been working on integrating GSAP with Captivate lately and have gotten some things to work successfully! (some things not). If you're still interested in this, let me know! Or if you've found your own awesome resources, I'd love to hear about them! It seems people using GSAP within Captivate is very slim and niche so it can be difficult to find information for troubleshooting things.
  15. Ahhhh, I'm an idiot. Thank you!!