Jump to content
Search Community

mouseenter play tween, detect side

nene test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...