mouseenter play tween, detect side

[nene 0 Likes (Newbie)]

Hi, amazing tweenmax, really amazing, days of glory!!  =)

 

I'm doing some tests: 

See the Pen noick by gerryAB (@gerryAB) on CodePen

 

But I can't , at the end of #abs tween (timeline) is calling a funciton to detect from which side the mouse is enter, and then animate:

If mouse enter from top: tween top:100

if left: tween left to right, botom and right

 

In the if mouseenter the Tween is cycling, there is and error, how can I fix it? And how to detect the side and then apply the tween

 

I want that #caption-abs make a tween from the side where the cursor has entered

[Carl 9,066 Likes (Superhero)]

Thanks for providing the demo.

 

It seems like you are able to detect the direction fairly well, I don't have much to add regarding that.

 

The problem that I can address is how you seem to be trying to dynamically assign the NAME of the property in the tween. Simplified version of what you are doing:

 

var mouseDir = "left"

TweenMax.fromTo("#caption-abs",2,{mouseDir:"100px"},{mouseDir:"-100px"});

 

Although it would be nice to do that, you are literally telling TweenMax to tween the mouseDir property of #caption-abs. It doesn't evaluate to "left".

 

Below is a tactic I stole from a man taller than me. It involves creating your own objects (that will accept dynamic property names) and then later you place these objects in your tweens like so:

//skip all the logic for determining the property name and just hardcode it here:

var direction = "right" //change to left, bottom, right


//create objects to hold start and end values
var startVars = {}
var endVars = {}

//create dynamic property / key names
startVars[direction] = 100; 
endVars[direction] = -100;
endVars.delay = 1;


//dump the objects into your tween
TweenLite.fromTo("#redBox", 1, startVars, endVars)

Demo: http://codepen.io/GreenSock/pen/LzHCu?editors=001

[nene 0 Likes (Newbie)]

Wow! fixed, see again 

See the Pen noick by gerryAB (@gerryAB) on CodePen

Great idea, using the object as you say, it works. Dynamically takes the value, but why it works only with 'top' and 'left'?

 

Thanks again, I'll continue training