Greg Stager

Ok - I need a nudge down the right path on this one. (pun intended ?) From what I read so far - it seems as though I might need to create a mask that is the same size as my circle and try to animate it across the front of the box at the same time the circle passes behind it so that it gives the appearance of the circle passing in front of the box. I want to have the effect of the circle "orbiting" the box such that it passes behind the box on one side and in front on the other side. Right now it is really good at passing behind the box on both sides but I am trying to figure out how to get it to look like it is passing in front on the right side and staying behind on the left.

Thanks for the feedback! Yeah - keeping track of the empty space was what I needed to do but perhaps there was a better way than updating my variable. I started out with the idea of using an array but didn't find the right way to pull it off at the time. Once I landed on something that was working, I just stuck with it. I really wanted to do this but couldn't figure out how to prevent dragging all over the place. This is what my original question was about last week regarding boundaries. I didn't want any tiles to overlap but I could not figure out how to only allow movement to the constantly moving empty space.

Wow! Finally figured this out. Adding the logic to track the tile movement brought me from under 30 lines of code to just under 400. I suppose I could scrunch it up a bit but nonetheless, it was a lot of extra work. I am pretty sure there is an easier way to do this. Now that I have it complete - I would be interested in any comments on perhaps how I might have made this much more efficient either with GSAP or JavaScript in general. It seems like I did a lot individual movement logic that could have been wrapped up in a more elegant manner. I don't expect anyone to review it with a magnifying glass unless that sort of thing is as fun for you as figuring out how to make it was for me. Lots of lines there - but a lot of repetition with minor changes too. Challenges I had in Phase II Figuring out how to tie the movement of a tile or position to a variable without specifically using a named object. I needed to slide a tile and move the blank space regardless of what tile was there to begin with. I needed to use some form of (this.target) but it didn't want to work. A great tip from @Carl and one of his videos about how to change scope helped here. Figuring out how to pass a variable - nay, the right variable - from function to function was giving me some headaches. I had originally started with trying to use an array to store the tile positions but eventually abandoned that. Seems like that could still be a viable option but I was not tapping the right ideas at the right time. So now there is a prize at the end for any who complete it. Most people here are better at this stuff than I am - but I am happy to answer any questions about it. Pretty sure I spent about 24 hours on this project. #professionalDevelopmentIsFun https://codepen.io/Arelwynn/pen/PoPqGBL

So to be clear... You want to change the color of the area behind the X and burger - not the X and burger themselves? For that, I added a line that addresses the id of the div called burger but that might need some tweaking - it goes all the way across. Not sure that is what you want either. Update in pen above. tl.to("#burger", {background: "yellow", duration: 0.2}, "<");

As PointC said: I simply changed the background values to "red" and now it animates from a black burger to a red X and back again. Maybe that is closer to what you were thinking...?

I may have missed the point of the question - sorry. I was simply having the 'X' convert back to the hamburger.

I am not much of a guru but what if you made a little variable to toggle? var toggle = 0 document.addEventListener('click', () => { if (toggle==0) { controlObj.burgerAnim.play(); toggle=1; } else { controlObj.burgerAnim.reverse(); toggle=0; } }) https://codepen.io/Arelwynn/pen/JjYdbxV

OK - Whew! This was a great challenge for me. I learned a lot and I think it is worth sharing. I was initially inspired by the post about creating a sortable list. It reminded me of this classic tile puzzle that I am sure most of you have seen. Of course, the idea is to put all of the tiles in order. I certainly had a few challenges... Preventing the tiles from overlapping. Obviously, in the real puzzle you don't get to leap frog other tiles. I didn't truly accomplish this but have an acceptable workaround. Limiting drags to a single tile space at a time. I ended up utilizing the endDrag() to interrupt the dragging after a single snap which is a tile space value. Getting the "blank space" to move appropriately based on the tile that is being moved. My personal goal was to keep the code as minimal as possible. I reviewed many of the code pens related to dragging and boundaries and boy, were they complicated. I am very proud to say that I kept this all working in under 30 lines of JavaScript! I call this Phase 1 because my next step will be to track the tiles in such a way that we can launch an animation for the winner. In the meantime, enjoy this tile puzzle.

I was 12B - Combat Engineer - celebrated my 30th birthday in the desert as a part of the first wave in 2003-2004 - 14 months total. I thought turning 30 would be more exciting but I have a summer birthday so instead I was sleeping in a pool of my own sweat, dining on MREs, and trying not to get bitten by camel spiders or stung by scorpions. #funTimes #notReally #youDidntMissMuch

Thanks, Shrug, Carl, and Jack! It is a good place to be!

Those do appear to have some promising application - I will certainly investigate them further this evening.

Not yet. I am challenging myself with something special based on another post I was reading. I am happy with the progress I made so far and was trying to figure out a way to prevent a dragged object from resting on top of another one but also have dynamic boundaries. I do have a finished product that does not use gsap but uses a whole lot of variables and conditional statements and that requires clicking. My goal was to recreate that project with gsap tools, minimize the logic, and implement dragging. It is my project for the weekend.

If I am using snap, I expect it will snap into position but if I drag it too far it will then need to tween back to the original position or do I expect too much there?

Yeah, no kidding. I will settle for some sort of drag rejection. Like if (hitTest == true) { go back to start position; } else { stay where I drop you; } I was thinking maybe I could store the current x,y when I start dragging and tween to that same x,y if the hitTest is true. Perhaps I will play with that concept.

Well... I feel better that I wasn't missing something simple. DOH!

Thank you. I had done several searches using terms like prevent and overlap and found the hitTest pen but not those two threads. I will investigate those as they look like what I am trying to figure out.

Here is a question that I was pondering. I was studying the applyBounds() for draggable objects. This allows me to restrict objects to a particular area. Is there a way to restrict objects from an area? In this sample pen - I can keep the three balls in the larger box just fine but what if I want to keep them from overlapping at any time - no matter where they are positioned in the box? I'm not even asking that they push each other around but I would just need to drag around them rather than over them. Did I miss a simple thing somewhere? (Just imagine three baseballs in a shoebox) They cannot occupy the same space at the same time.

Thanks, Craig and Zach. That radio is pretty cool. I look forward to achieving that level one day.

Hi Everyone! Been browsing around for a month or so now and have posted a few times and, well, looks like I am here to stay - so I thought I would give you all a proper introduction. I currently work as a technical training specialist for a large manufacturing company where I design, develop, and deliver training for both face-to-face and online platforms. I am not a web developer but I do develop learning objects for the web. I am an Adobe Captivate user and frequently use JavaScript to enhance the things I create with that authoring tool. I am active in the Adobe eLearning Community and Captivate forums and hopefully I will be fluent enough with GreenSock one day to be more active helping people here as well. My background is all mostly education and technology. I have bachelors degrees in education and information resources, (where I had some courses in HTML, CSS, JavaScript, and PHP), and a masters in education with emphasis on professional development. I spent time as a high school science teacher and transitioned to educational technology and network administration. All during this time I stayed involved in providing online learning to others. I eventually transitioned my skills in education and technology to the private sector where I am now. On the side, you could say, I coach gymnastics. I was a gymnast in high school and have now been involved with coaching in various venues for more than 20 years. I am currently the head coach for our local high school team. I also enjoy playing guitar and performing with my family on stage at our local community theatre. I've also been married for almost 25 years, I have 5 children and a dog, and am a veteran of the US Army and Iraq war. I am a big advocate of helping people to be more successful at what they do and will often post generic, unpolished, projects that demonstrate various techniques to try and provide inspiration for others. I recently posted in the eLearning Community a Captivate project that used some rotating knobs I created using GSAP tools. In a second post - I tried to review some of the code for others to help them understand how it was done. Of course, that meant a shout out to this awesome resource. I thought I would share that with you (for those actually interested) so that you could see another area of reach these tools have. Hopefully I am not breaking any rules about external links here or about sharing GreenSock stuff in other places... if so, sorry, no harm meant - just let me know. Here is the link to the post where I share the project. https://elearning.adobe.com/2020/03/old-fashioned-car-radio/ Here is the link where I explain how I made it. https://elearning.adobe.com/2020/04/old-fashioned-car-radio-part-2-the-code-warning-major-nerd-post/ Nothing fancy - just trying to help people see what is possible. I look forward to coming to know you all better through this platform but at least you have some sense of where I am coming from. Peace out for now.

I am continuing to work with GSAP and learn new and cool things. I recently started playing with the Motion Path Plugin, MotionPathHelper, and drawSVGPlugin. No question this time - just a fun shout out to everyone in this community for GSAP and the help you provide. I will get there eventually.

Thanks for the extra clarification. I had tried doing a similar tactic setting my animation to a variable but I didn't have any overwrite settings. I had tried so many things that I thought should work but didn't so I just started trying everything else I could think of. Alas... adding the overwrite parameter was not one of them. I am guessing I won't forget that little tidbit now. Sometimes the best way to learn is to get burned. #scalded

First of all, thanks guys! I am starting with some small ideas and am working to better understand GSAP so forgive me if I ask what seem like simple questions as I experiment. I was basically only trying to do what you see - not for any particular project - just for practice and learning GSAP. I wanted to control the speed of an animation with the buttons like a fan with high, med, and low speeds as well as an off position. Nothing more at this point. Ultimately, in this problem it was trying to get the proper usage of the kill() command so the animation would stop. One of the many things I tried was gsap.kill("#box"); but that did not work. I admit that I didn't try to use killTweensOf() but why didn't the other one work? I also tried only a single speed change. So click High then click Off. In this case only a single function call was called So I would not have multiple tweens at this point but the kill() command did not work then either. So where is the appropriate use of kill() vs killTweensOf() ? As a side note, I originally started with a variable called speed for the duration parameter and had my buttons change the value of the variable but the only way I could get them to update was to call the animation along with the speed update. That is how I ended up with my current code. I thought perhaps my variable was hosing things up so I pulled it to simplify further but that wasn't it either. My next step after simply getting it to stop was to figure out how to get it to gradually slow to a stop so thanks for the extra step to branch off of. I will study that example and dig a bit further into the timescale parameter.

OK - I give up. Been struggling with this for the last three hours. I am by no means a JavaScript expert but I am pleased with the amount of things I am able to do with it. GSAP tools are poised to really open things up for me but - MAAAN - am I taking it in the shorts. I like to learn though so I don't necessarily mind the struggle but I am clearly missing something here. I made a really simple animation with a rotating box - (imagine in your mind a box fan in the window). I created four buttons to set the speed of the rotation high, medium, low, and off. High, medium, and low work great and my codepen here might lead you to believe that the Off button works too but it is more of a gimmick than a true off. I got it to look like it is off by using fromTo and setting the rotation to zero for both. What I really want is to get the kill() command to work properly but have been failing all night long. I have tried tons of variations and none of them seem to work. I have read the docs on it which generated some thoughts but no success. I have read several forums with similar questions but many of them simply pointed to the docs on the kill() command - so that didn't get me much further. I have tried rearranging the code, using a jQuery example I found in one of the forum posts, and setting my animation to a variable so that I could try using variable.kill(); but that didn't seem to help either. So here is what I am left with - the pseudoStop. What in the world am I missing in trying to get the kill command to work?

Perfect - thanks! I know that the question will come up so I wanted to be prepared with an answer.

A question on purchasing a license... I understand that I would need a business license. As such - I would not actually be the one paying for it - my employer would but I would be the one using the tools. Would they be able to pay using a PO or invoice or some separate way other than through my profile but also so that I have access to the extras and such? How might that actually look?