Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nene

mouseenter play tween, detect side

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×