Questions about the new eases

[mango-nyc]

I'm playing around with the new eases, Custom Bounce and Custom Wiggle.

 

Im comparing two identical tweens, except for the easing

 

 

tl.to(blue, 1, {top:400, ease:"myWiggle"},"start");

with this the item would move down 600px from the top and "stay there"- just a normal tween

 

tl.to(green, 1, {top:400, ease:Power2.easeIn},"start");

this wiggle tween works fine- but the item ends up back in its original position, I am confused by this behavior.

 

I added a third tween using from and that ends up on top as it should,

tl.from(red, 1, {top:400, ease:Power2.easeIn},"start");

 

why does this easing function change the ending position property?  
I'm not used to that, and not sure how to plan for it.

 

 

Thanks,

Chris

See the Pen NdaLaY by mangonyc (@mangonyc) on CodePen

[Jonathan]

Hello mango-nyc and Welcome to the GreenSock Forum!

 

We are sorry you are having this issue and thank you for creating a codepen that shows what you describe.

 

Please standby so we can look into this for you!

 

[Carl]

Hi Mango,

 

Thanks for the very clear demo. Everything is working as designed.

 

CustomWiggle purposefully has things wiggle "in place" always returning to the start value. The end value you specify just helps to determine the strength of the wiggle (or how far the values will go as they wiggle). 

 

Take a look at the various ease curves and animations here: http://codepen.io/GreenSock/pen/GrggOL

 

Notice how all the elements end where they begin. If you look at the ease graphs you will also see that the curves all show an oscillating pattern where they travel up towards the end value, back down towards the start value, below the start value and then back up and repeat. All the curves end at the start value.

 

If you are new to reading ease curves, this video below will walk you through the basics:

 

 

 

If there is a different animation effect you want that wiggle is not producing for you, please let us know and I we will do our best to help.

[mango-nyc]

Hi Carl,

 

I have looked at the pen with the wiggle demo, and I've watched the video, and I'll still stick with my point that its not intuitive for me as an ease.

 

Here's my logic- so maybe when you see how I picture it you can explain it so I get it.

Say I'm going to throw a ball, I want to throw it 400px over 1sec.

I would set up a TweenMax.to(mything, 1, {x:400})

which would work fine

Now I want to control how it is delivered over that 400px distance and 1 sec time.

This is where the "ease" comes in.

 

Let me point you to the GSAP easing demo for exhibit 1-
https://greensock.com/jump-start-js#easing

Every one of these examples, is working off a tween that sets the left: to 400px.

In every one of the ease examples I tried, the GSAPSuperMan icon, moves 400px to the left.

Not one of those easing examples altered the end point of the icon, its always 400 px to the left, which is where it should be since that what I told the tween to do!

 

Don't get me wrong, I love the wiggle, but maybe it shouldn't be called an ease, because as I think I explained here, it doesn't behave as all the other base eases do.

 

Thanks for taking the time to explain this.

Mango

[GreenSock]

I totally see what you're saying, Mango. At first, it may seem odd. But over the years, we've had many, many people ask us about an ease that returns to its starting values. They complained that eases shouldn't always HAVE to go to an end value. A "wiggle" is a perfect example - typically that effect results in whatever's wiggling returning to its end state (like a button that says "click me"). 

 

Furthermore, let's say for a moment that we did make make it go to the end value you describe in your tween - how would you control the strength of the wiggle? Remember, an ease is all about ratios, not hard values. So, for example, if rotation starts at 0 and you define a wiggle ease to rotation:30, would it first shoot way past 30 (to 60? 50? 100?) and go back down, and oscillate back and forth to land at 30? How exactly would you define all that? Furthermore, what if you did want to get the most common use, which is to return to the original state - would it be intuitive to "tween" to rotation:0 if it's already at 0 (no change)? For a lot of people, that'd seem very odd indeed. 

 

I could explore the possibility of adding an option to the ease like endAtStart:false, but we'd still have the problem of determining how far the "squiggles" in that line go. It certainly complicates things quite a bit and would likely require a revamp of the API.