kbeats

Thank you so much! I didn't realize onReverseComplete existed!

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!

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?

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!

Thank you! I didn't even think about that.

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.

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!

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!

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?

Thank you! SVG code is still SO confusing to me!

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.

Nevermind, I think I just found it out! myVariable.style.zIndex seems to do the trick!

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!

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.

Ahhhh, I'm an idiot. Thank you!!

Here's where I'm at. I'm not sure why the first box still isn't covering up / going in front of the second box?

Thank you! This is very helpful, but I'm still having some troubles with it. Is there anyway to set the Z index with just javascript and without using any CSS?

Hi there, I'm trying to figure out how to properly use translateZ to have an object appear above another object when tweened in front of it. I'm using GSAP in an Adobe Captivate project, in which I have no idea if tweening the Z index is even possible, but I thought I'd give it a whack in codepen first and then see if it works in Captivate. Essentially in my project I have two images that I would like to 'zoom' when the user clicks on them, and then return to their original position when they click on them again. The issue is that they are in different Z space and one will always be behind the other, so I'm wondering if I can animate the Z index so that when the photo is 'zoomed' it will always be in front of the other. This was my attempt at it in codepen, when I tried adding in translateZ it broke the code: and if it's helpful at all this is what my code in Adobe Captivate looks like - var image19 = document.getElementById("Image_19c"); var tl = new TimelineMax({paused:true, reversed:true}) tl.to(image19, .8, {transform: translateZ(100px), x:-160, y:-180, scaleX:1.8, scaleY:1.8, ease:Quad.easeInOut}); var image18 = document.getElementById("Image_18c"); var tl_2 = new TimelineMax({paused:true, reversed:true}) tl_2.to(image18, .8, {x:-160, y:80, scaleX:1.8, scaleY:1.8, ease:Quad.easeInOut}); window.addEventListener("mousedown", function(e){ if(e.target.id == "Image_19"){ tl.reversed() ? tl.play() : tl.reverse(); } }); window.addEventListener("mousedown", function(e){ if(e.target.id=="Image_18"){ tl_2.reversed() ? tl_2.play() : tl_2.reverse() } }); Thanks!

Very cool! I had no idea lol. Thank you!

Thank you, that is awesome! I guess I should have built my codepen to match my exact problem, however. In my project I'm using appendMultiple to have several objects move on each line, I've tried adding this method above to my project and it doesn't seem to work? I'm not sure what I'm doing wrong.

So this is a really simple question and I'll probably feel really dumb once finding out the answer - but how do I get two lines of the same timeline to execute at the same time? I built a really crude codepen as an example - I have two objects that I want to tween to different values, but I want them to begin their timeline at the same time. Do I need to make two separate timelines instead of having them both on the same one? Thanks!

This is awesome Blake, that's exactly what I was looking to do. THANK YOU SO MUCH!

No worries, I understand! Thanks for the comment. I wasn't sure if the answer was super obvious and simple and it was just my lack of knowledge with code.

Hey there forums! This is kind of more of a general javascript question than a greensock question, though it does involve greensock! I'm trying to build off of this codepen I found - My goal is essentially to create more boxes and targets and have certain boxes with a class of 'incorrect'. I'd like to check for when a box with the class of 'incorrect' is on a target with a Check Answers button that I've created. The difficulty I'm having is trying to add a class of "wrong" to the targets when a box with the class of "incorrect" is snapped onto a target. My theory is that then with the Check Answers button I can just look for targets that have the class of "wrong" added to them. I've started building off of this codepen on my own - Where I've changed the first box to the color blue and added the class of "incorrect" to it. In the CSS panel I also added a class of "wrong" and changed the width to 300px for now in the class, so I will know if my code is working. I wrote the function: if (e.target.hasClass("incorrect")) { $(targets[i]).addClass("wrong"); } I'm still learning, so I hope this function is written correctly? Essentially wanting to add the class "wrong" to targets which have a box with the class of "incorrect" snapped to them. But wherever I put this function in the onDragEnd function, it seems to break things. . . right now it's at the bottom of my code and commented out. I've never seen a function as long as this onDragEnd one with so many nested if statements, so I'm pretty confused as to how everything is firing off and where I could put my function without mucking everything up? Any help is much appreciated!

Yes! Thank you!