kbeats

ShockinglyGreen
  • Content Count

    30
  • Joined

  • Last visited

Community Reputation

19 Newbie

About kbeats

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. kbeats

    Tween image to center of window

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

    Tween image to center of window

    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.
  3. 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!
  4. 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!
  5. 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?
  6. kbeats

    MorphSVG Help

    Thank you! SVG code is still SO confusing to me!
  7. 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.
  8. kbeats

    How to reference objects zIndex ?

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

    How to reference objects zIndex ?

    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!
  10. kbeats

    using greenock with captivate

    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.
  11. kbeats

    How to use TranslateZ?

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

    How to use TranslateZ?

    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?
  13. kbeats

    How to use TranslateZ?

    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?
  14. kbeats

    How to use TranslateZ?

    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!
  15. Very cool! I had no idea lol. Thank you!