Heelaque

You nailed it Carl, cheers mate

Hello everyone, I'm continuing to develop this project and I've come across a small problem: I'm trying to make a rotating black-block swing 270 degrees once it leaves its container-box (clockwise or counter-clockwise) so that once it leaves it suddenly begins re-entering the box again. To do this I'm trying to get the object's current rotational value so that once it reaches a certain degree-value - it swings 270 around and re-enters. I'm having difficulty with the [_gsTransform] in the "console.log" (which is why I've commented it out) can anyone please figure-out why it's not working?

Hi there Diaco.AW - this is excellent, your solution has gotten me very close to solving this issue - thank you very much There is only a small problem that continues to fail: when the cursor leaves the "mousebox" the elastic-tween works great but when the cursor stays within the "mousebox" but is outside the "(radius <= 150 || radius >= 200)" parameter the elastic-tween doesn't seem to work. Do you know why that is?

Hello Diaco.AW and thank you for staying with me here I have updated my codepen here: http://codepen.io/anon/pen/fKLjq It doesn't look much different but I have tried to turn the Tween-motion into a variable and then reference that variable in the "stpClck()" function as you suggested but with no success, from this point can you see where I'm going wrong please?

Hi Diaco.AW, It seems as though the tween can be controlled by a "TweenMax.killTweensOf" command which will stop the rotations but trying to stop them with an "Elastic" tween is proving difficult. What controls the motion is a simple function called "moving()" that rotates a ring clockwise or anticlockwise using 'if' & "else if' statements depending on where the cursor is over the ring. If the cursor leaves the ring then the rotation stops which is what your codepen shows. However when I tried to use your example to repair my design it didn't work (probably because I'm doing something wrong): function stpClck() {TweenMax.to(playrotate, 0.7, {timeScale:0 , ease:Elastic.easeOut}); } - WORKING (in Diaco.AW example). The variable "playrotate" is responsible for grabbing the animation that's currently playing and the function "stpClck" is meant to be called when the cursor moves away from the moving ring - stopping the animation that's currently mid-tween. The problem comes when I try to replace the variable "playrotate" with the name of my parent function "moving()" or even the list of elements that are tweening "[objectA, objectB, objectC, objectD]": function stpClck() {TweenMax.to(moving(), 0.7, {timeScale:0 , ease:Elastic.easeOut}); } - NOT WORKING. function stpClck() {TweenMax.to([objectA, objectB, objectC], 0.7, {timeScale:0 , ease:Elastic.easeOut}); } - NOT WORKING. Any further assistance at this time is welcome because I don't know where to go from here...

Hi Jonathan and thank you for fixing this problem for me: I didn't know about the "_cw" or "_ccw" suffixes that exist in GS and their addition to my code has apparently fixed the problem. For clarification, my previous code did not have these suffixes and still worked by rotating in both directions (it didn't work with '1.14.2' because it only rotated in a clockwise direction after that). With the release of the latest version of GS it seems that there is now more emphasis on using "_cw" & "_ccw". Thanks again mate, it's great to have you around.

Hi Jonathan, Before starting this topic I was able to get me code working with '1.14.1' and I did find out that '1.14.2' now breaks my code. My question was more about what happened to '1.14.2' that broke my code... because if I wanted to continue to develop with GS then I would like to know that I could benefit from new improvements in newer versions. I couldn't do that if I'm stuck using '1.14'1' because my design can no longer run on newer versions of GS as they come out. I figured that since the code I provided was so basic in scope, that either: 1) - '1.14.2' needs to be patched to repair a bug that has stopped my code from working. - or - 2) - My code no longer works with '1.14.2' because there is now something 'better' in the newer version of GS that replaces the functionality that my code once relied upon in the older version. If the problem is "a" then what part of my code is now 'buggy'? And if the problem id "b" then what is the new way of doing things in '1.14.2' that will make my code work again? I'm just looking for a little guidance so I can continue to learn the GS library.

Hi there guys, Yesterday I returned to my work to find that my design wasn't working and I eventually discovered that if I simply use version 1.14.1 that my design works again. From the change in performance I think that the code below is somehow now longer supported in the way it used to - but can someone explain what I need to do, to get it working in the newest version please: if (condition 'A') TweenMax.to(obj, 20, {rotation:"-=360", repeat:-1, ease:Linear.easeNone}); else if (condition 'B') TweenMax.to(obj, 20, {rotation:"+=360", repeat:-1, ease:Linear.easeNone}); I'm rotating an "obj" to make a continuous loop every 20 seconds - its supposed to be that simple but the newest version of GS will only rotate the "obj" in one direction and not he other. I can work on a codepen example if needed, I'm just hoping that there is an obvious solution...

Hello !!! Well I've been able to get the rotations to act continuously however my "slow-to-stop" animation looks more like "skid-to-halt". Borrowing a little from 'Diaco.AW' my function looks like this: function stopClck() {var blueBit1 = document.getElementById("seg1"); TweenMax.to(blueBit1, 0.7, {timeScale:0 , ease:Elastic.easeOut})} I now understand that the "bluebit1" part of the TweenMax.to line is only referencing an element and not an animation that's playing which is why my code still breaks. Is there anyway of referencing the tween that's currently playing, turning that reference into a variable and then replacing "bluebit1" with that new variable....... or am I way off-base here?

Nice job "Diaco.AW", it looks like your solution may work. I'll be working on this again tomorrow so I'll let you know how it goes. Thank you

Thank you for looking at this "Diaco.AW" however when I opened your codepen version, the rotating segment flickered sometimes as though it were in-between one motion and another, I'm not sure what causes that. I really like the elastic effect on the mouse-out event however a simple slow-down is called for in the design - thank you so much for trying to work on this problem for me though.

Hello there and thank you for the feedback so far. I originally had an image rotating but I forgot to adjust the code when I constructed the codepen, so I just gave it a background color so you can see it. I tried changing the mouseover event to one of the others to see if that worked to make the animation continuous and it didn't seem to work. Are there any ideas on how to to have the rotating block gradually come to a halt instead of just stopping-dead when the mouse moves away?

Okey, I've been able to recreate the problem in this codepen: http://codepen.io/anon/pen/fKLjq I hope you're able to help.

I'm using a mouseover event that triggers within two radius values (which creates a ring) and then some tangent values (which creates segments around that ring) they determine 'speed of rotation' depending on which segment of the ring that the cursor is over. I'll try to put my issue into a codepen example but that will take some time which may lead into tomorrow, I appreciate your help so far though.

Thank you Jonathan for your reply, Your suggestion is very helpful but the animations only run continuously if i 'wiggle' the cursor - otherwise the animation slowly 'winds-down' to a halt after 360 degrees.