Assistance in controlling rotation

[Heelaque]

Hello forum,

 

I'm trying to control the rotation of a 'ring' based on the position of the mouse cursor with no clicking involved.

 

I already have a working function that detects the position of the mouse cursor but I'm having trouble controlling the animations that play based on those cursor positions.

 

Here are my 5 controls so far:

 

//fast anti-clockwise direction.

function antClckFst() {var segA = document.getElementById("segment1");

    TweenLite.to(segA, 5,  {rotation:-360}); }

 

//slow anti-clockwise direction.

function antClckSlw() {var segA = document.getElementById("segment1");

    TweenLite.to(segA, 20, {rotation:-360}); }

 

//when the cursor is moved out of the pre-defined 'activation zones' then the rotation stops.

function stopClck()   {var segA = document.getElementById("segment1");

    TweenMax.killTweensOf(segA); }

 

//slow clockwise direction.

function clckwsSlw()  {var segA = document.getElementById("segment1");

    TweenLite.to(segA, 20, {rotation:360}); }

 

//fast clockwise direction.

function clckwsFst()  {var segA = document.getElementById("segment1");

    TweenLite.to(segA, 5,  {rotation:360}); }

 

The control that I'm lacking is that:

1) The rotations are not continuous (only runs for 360 degrees).

2) When I take the cursor away the animations just stop without any easing.

 

Can anyone offer any suggestions based on what I have provided so far please?

[Jonathan]

Hello Heelaque, and Welcome to the GreenSock Forum!

 

Have you tried using relative values  "+=" and "-="  ?

 

My codepen example:

See the Pen rgzkw by jonathan (@jonathan) on CodePen

 

Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

//fast anti-clockwise direction.
function antClckFst() {
    var segA = document.getElementById("segment1");
    TweenLite.to(segA, 5,  { rotation: "-=360" }); 
}
 
//slow anti-clockwise direction.
function antClckSlw() {
    var segA = document.getElementById("segment1");
    TweenLite.to(segA, 20, { rotation: "-=360" }); }
 
//when the cursor is moved out of the pre-defined 'activation zones' then the rotation stops.
function stopClck()   {
    var segA = document.getElementById("segment1");
    TweenMax.killTweensOf(segA); 
}
 
//slow clockwise direction.
function clckwsSlw()  {
    var segA = document.getElementById("segment1");
    TweenLite.to(segA, 20, { rotation: "+=360" }); 
}
 
//fast clockwise direction.
function clckwsFst()  {
    var segA = document.getElementById("segment1");
    TweenLite.to(segA, 5,  { rotation: "+=360" }); 
}

:

More info on the GSAP CSSPlugin Docs:

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

Does that help?

[Heelaque]

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.

[Jonathan]

What type of event handlers are you using?

 

Are you using a mouseenter and mouseleave event to detect when you rollover (mouseover) and rollout (mouseout)  of the elements?

 

If you can post a limited codpen example, just with your event handlers and animation functions,  it will be really helpful in seeing your issue in a live editable environment to test your code.

 

Here is a nice video tut by GreenSock on How to create a codepen demo example.

 

Resources:

Event Handlers: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

Adding Event Handlers: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Adding_Event_Handlers

 

[Heelaque]

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.

[Heelaque]

Okey, I've been able to recreate the problem in this codepen:

 

See the Pen fKLjq by anon (@anon) on CodePen

 

I hope you're able to help.

[Jonathan]

Hello Heelaque,

 

I noticed in your example that your image tag has no src attribute, so i don't see the rings you are  supposed to hover over. And an <img> tag has a self closing tag, like this:

// with self closing tag
<img src="my-image.png" />

// or for HTML5 you do not need the self closing tag
<img src="my-image.png">

:

I also noticed that you using a mousemove event rather than a hover event: mouseover / mouseout or mouseenter / mouseleave

 

If you could please add an image file to your img tag src attribute, it help in seeing the context of what your hovering over and the effect your seeking after.

 

Thanks!

[Diaco]

Hi Heelaque 

 

pls check this out :

 

See the Pen LtJwh?editors=001 by MAW (@MAW) on CodePen

 

you can change mouseover to mousemove too , with { rotation:"-=360", repeat:-1, ease:Linear.easeNone } the animation repeat infinity , but since the animation rotate 360 deg it seem to continuous ...

and finaly on mouseout   TweenMax.to(playrotate, 2, {timeScale:0 , ease:Elastic.easeOut}); will stop your tween with ease .

 

hope that helps

[Jonathan]

When i test in Firefox 33 .. i do not even see the black outline on the <img> tag. So when you hover you see nothing happen.

 

Firefox will not show the <img> tag if it has no src attribute.. but Chrome will show a black outline  around the image if there is no src attribute.

 

Either add an image file to your src attribute or add a background color to your image tag so we can see your example work cross browser.

[Heelaque]

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?

[Heelaque]

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.

[Diaco]

Hi again 

 

that fixed , check the codepen again

i think that happen when use timescale with unsuitable ease and duration...

[Jonathan]

Heelaque, That flicker might be due to the image tag not having a src attribute on the image. If possible try adding an image file to the src attribute and hopefully you should see a flicker in Diaco.AW example. Or just convert your image tag to a div tag

[Heelaque]

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 

[Heelaque]

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?

[Diaco]

Hi

 

with .isActive() you can find your tween is currently playing or not ;

pls read the doc :

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/

[Heelaque]

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

[Diaco]

Hi Heelaque 

 

pls make a codepen demo available to better response . anyway , the timeScale is a property of Tween or Timeline .

you should do something like this :

 

var anim  = TweenMax.to{.....}

 

function stpClck() {  

TweenMax.to( anim ,0.7,{timeScale:0, ease:Elastic.easeOut}); 

}

[Heelaque]

Hello Diaco.AW and thank you for staying with me here

 

I have updated my codepen here:

 

See the Pen fKLjq by anon (@anon) on CodePen

 

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?

[Diaco]

Hi

 

pls check this out , you should do something like this  :

 

See the Pen uBzgx by MAW (@MAW) on CodePen

[Heelaque]

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?