Jump to content
Search Community

ThrowPropsPlugin Motion Question

smakinson test
Moderator Tag

Recommended Posts

I'm taking a look at the new throw props plugin and I can't seem to prevent it from tween back a bit before going the direction I want. I'm tweening a wall of photos based on one being clicked and it seems to tween back and curve toward the direction I want. I would like to make it just go straight on. I am using Linear.easeOut for the ease.

Here is an example of what I'm using:

 

ThrowPropsPlugin.to(wall, { throwProps: {

x: { velocity: ((xFrom - xTo) / 10), min: xTo, max: xTo },

y: { velocity: ((yFrom - yTo) / 10), min: yTo, max: yTo },

resistance: 0

}, ease: Linear.easeOut

}, 3, .5, 0);

 

The reason I am looking to use it is to handle smooth transitions when a photo close to the destination is clicked vs when a photo far from the destination is clicked. I was hoping this would allow the varied tween times based on the distance with out the need to calculate the tween duration. Am I missing something? Thanks and as always TweenMax rules!

Link to comment
Share on other sites

Maybe there's something else going on in your code because I just tried it on my end and it worked perfectly once I reversed your To/From subtraction. Feel free to post a very simple FLA that has the minimal amount of code to reproduce the problem so that I can publish it on my end and see what's going on.

 

Just out of curiosity, why are you using a linear ease? ThrowPropsPlugin seems like it'd only make sense with easeOut equations (not that it's wrong to use Linear). Have you tried with something like Quad.easeOut?

Link to comment
Share on other sites

If things were taking too long, simply increase the resistance. I noticed you set resistance to 0 which is actually invalid anyway (I ignore values of zero because that would mean the tween would never...ever...end. Imagine sliding an object across a table that had absolutely no friction whatsoever - the object would slide forever). The more the resistance, the shorter the duration will be.

 

Also, if you want to define the duration manually, you can easily do that by using throwProps in a regular tween yourself, like:

 

TweenLite.to(wall, 1, { 
   throwProps: {
       x: { velocity: ((xTo- xFrom) / 10), min: xTo, max: xTo },
       y: { velocity: ((yTo - yFrom) / 10), min: yTo, max: yTo },
   }, ease: Quad.easeOut
});

Link to comment
Share on other sites

Yep, it looks like the values you're feeding in as the initial velocity for x and y are incorrect. Have you traced those values out to see what you're feeding in? When I traced the values, it behaved exactly as expected based on what was being fed in. Like if I clicked in the upper left, a very high negative value was passed in for the initial x velocity even though the destination was the other direction.

 

Also, I'm curious about why you're using ThrowPropsPlugin for this at all. You're not throwing anything, right? You don't need the initial velocity to be a particular value, do you? Are you just using it so that it calculates the duration for you? Why not just do a regular x/y tween and calculate the duration based on the distance? I don't mean to stick my nose where it isn't welcome - I'm more curious than anything (feel free to tell me to buzz off an let you code however you want) :)

Link to comment
Share on other sites

Haha, ya I was mainly trying to see if I could use it to just handle the duration calculations. Now that you mention it, I don't think I ever did trace out the value. Perhaps if I make sure they match the direction, it may work out. Maybe I just wanted to use the new plugin too badly. :D I'll fit it in here somewhere!

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