Jump to content
Search Community

Different easetype for easeIn and easeOut possible?

Friebel 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,

 

I would like to set different easing-types in one tween, one for easing IN and one for easing OUT. Is that possible in Greensock? This happens to be a wish I would like to use for some projects. And I'm not sure how to do this at the moment.

 

If it's not possible in the current library (can hardly believe it, come on, it's Gréénsock! ;)  ), would it be possible to implement this in the future. For example like this:

TweenMax.to($pd, 0.5, { top: 0, easeIn:Back.easeIn, easeOut:Sine.easeOut });

That would be very great!

Link to comment
Share on other sites

Hi, I think you need two separate Tweens - something like In and Out animation.

 

//animate it to the place

TweenMax.to($pd, 0.5, { top: 0, ease:Back.easeIn });

 

When you need "out" animation you can create different tween:

TweenMax.to($pd, 0.5, { top: "1000", ease:Back.easeOut });

  • Like 1
Link to comment
Share on other sites

Thanks Rodrigo and Chrysto. I understand what you are writing and I just read and understand what Jack wrote about it.

 

The reason why I ask this is this situation wich happens to me a lot:

 

situation

some graphic is waiting outside at the bottom of the container to move in.

Than it 'pops up' from below onto the containers view. I do this by tweening the y-position with the Back-easingtype, 'cause I like the cartoony effect it gets.

 

If I use Back.easeInOut for this, the graphic is going down a bit and then moves up. Great!

But then it ends with moving up a little bit higher then the endposition (ofcoarse) and is thereby showing an empty space at the bottom under the graphic, revealing the viewer there is no more graphic on the bottom. I don't want to show that, so I'd like to have another curveending.

 

options I can think of

- making the graphic a little bit longer

(if that's an image I do that in Photoshop and it takes some time to make up new pixels)

- removing the 'out' of the curve, so the curve ends linear (using Back.easeIn) --> but now the animation stops linear, wich looks ugly to me

- using TimelineMax instead and have two tweens after each other, one with ease-in type A and one with ease-in type B, so one for the start (Back.easeIn) and one for the end (Sine.easeOut) of the total movement. But this takes a lot more time to tweak and it looks totaly different then what I'm after. Next to that it needs to load the TimelineMax-library for this one movement

 

better option?

I wonder how you guys do this. You are all using TimelineMax in these kind of situations? Or a better solution?

Another thing I can think of is having a new easing-type: combo, with combinations of ease-types, like combo.BackInSineOut, combi.SineInBackOut.

 

[edit] what I think of now is the custom easing functionality. Then I could make such a curve manually. I believe it is possible in the Flash-version, but not yet implemented in Javascript?! That would be a helpful functionality to accomplish this, I'd say.

 

Thing is, I'm animating all day long, so the faster I can code, the more fun ;)

 

Thanks again!

Link to comment
Share on other sites

Hi,

 

If the graphics container has an overflow:hidden there's no problem to make the graphic longer , you just have to add a negative margin-top equal to the amount of pixels the graphic has been enlarged. For example if you add 20 pixels to the graphic height then you add a margin-top:-20px in the element's style and since the container has an overflow hidden the excess won't be visible.

 

Also it'd be very helpful if you could set up a reduced sample (codepen or jsfiddle) in order to get a better look at what you're after.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Also, I don't understand what you meant by "But then it ends with moving up a little bit higher then the endposition (ofcoarse) and is thereby showing an empty space at the bottom under the graphic" - the tween should ALWAYS land at the end position you define in your tween regardless of any ease you use. There are no exceptions (that I can think of). The engine was specifically built to ensure this. Are you seeing something different? Like if you set {y:100} are you seeing y end at something other than 100?

Link to comment
Share on other sites

Exactly Rhernando. That's what I mean.

 

Because time is looming (like the Greensock homepages says ;) ), sometimes it takes too long to add more pixels to a graphic (or it's not allowed by the customer) to prevent the empty space underneath during overshoot. Especially when it's a photographic image. So sometimes I'd rather don't have any overshoot at all.

 

So with those types of graphics I'd rather pick another ending of the curve. Without losing the cartoony starting that elastic or Back has, wich I really like because of the organic and funny feel it adds and adds character to a graphic.

 

I hope it's a little clearer now what I mean.

Link to comment
Share on other sites

Perhaps you could try some sort of mirror reflection effect in the image, that would give the sensation of continuity to the image being animated and is not too time consuming. Also keep in mind that the overshoot is not a lot of pixels so it wouldn't be too notorious.

 

Best

Rodrigo

Link to comment
Share on other sites

First of all @Jack: I love Greensock and it makes me smile everyday since I first saw it. Everything is working great and the tweens áre landing exactly on their endpositions.

 

@Rodrigro: I really appreciate your help, thanks for that. But that's not what I'm after. I got the feeling I'm not expressing myself the way I would like to. Probably my English is the problem ;)

 

It's not that I can't create what I want. It's that I get this situation more often, so I'm looking for a better, more efficiënt solution to create this transition, without painting extra pixels, without losing the nice Back easingeffect and without having to tweak for minutes because of staggered tweens.

Next to this, some of the graphics I'd like to move in are actually spritesheets, so little animations on itself. And then it's a lot more work to paint extra pixels.

 

example

You're right. It's easier with an example, so I created an simpler version of it in codepen here (in reality the colored blocks are things like scissors, pens, talking characters etc.):

See the Pen zGECd by maarten77 (@maarten77) on CodePen

 

- The red box shows the movement with Back.easeInOut --> I wánt to have the Back easeIn, but not the Back easeOut because of the overshoot at the end showing the empty space underneath. So this is not what I'm after

 

- The green box shows an alternative without overshoot. Here sine wave. But then I lose the nice Cartoony back easing effect

 

- The blue box is more or less the effect I'd like to achive: So first having a Back easeIn, switching to another tween for having a Sine easeOut.

 

got the solution with that?

Last situation would be the thing I'm after. But...:

- How do you know where exactly to transite between both tweens (curvetypes)?

- How do you know at what speed exactly the first tween ends, so the second one should begin with? And how can that speed be translated into a timevalue for TweenMax?

 

As you can see, my last animation (blue box) is not really smooth. Probably if I keep on tweaking it it will be ok, but it seems very time consuming to me.

But I could also be totaly wrong and missing something here? Please correct me if I'm wrong...

 

Maybe what I want is not possible or hard to achive... but I can hardly believe it. There should be an easier way I'd say. Or am I missing something really silly here?

Link to comment
Share on other sites

Sorry I had the impression that you were interested in keeping the Back.easeOut, that's why my suggestions went in that direction.

 

Like Chrysto and Jack said the only way is how you're doing it, although I'll suggest to instead of using a callback to trigger the next tween, use a timeilne, perhaps the tiny amount of time for the code's execution could make it more smooth, try the following for the blue box:

var tl = new TimelineLite({paused:true});
  tl
    .to($('#box3'), .6, { top: 100, ease:Back.easeIn})
    .to($('#box3'), 0.5, { top: 50, ease:Power4.easeOut});

$('#box3').on('click', function()
{
  tl.play(0);
});

The reason for play(0) is because with the reset button you put the boxes back to their original positions but the timeline's playhead is already at the end so using play() won't work after the first play, unless you add a tl.reverse() on the reset button.

 

Best,

Rodrigo.

Link to comment
Share on other sites

I appreciate you taking the time to help Rodrigo.

Indeed, Timeline is a better solution. I'm new to codepen and I thought I could only have 1 external library loaded in codepen, so I picked Tweenmax and did it the quick way.

 

So to round it up: what I want is a little complex at the moment. So I'll use other ways to archive it. And maybe, maybe there will be custom ease feature in the future! :)

 

Thanks again

Link to comment
Share on other sites

  • 9 months later...
function twoEases( time, tweenObject, easingIn, easingOut ){
  TweenMax.to( $('element'), time/2, {rotation: tweenObject/2, ease:easingIn,
     onComplete:function(){
            TweenMax.to( $('element'), time/2, {rotation: tweenObject, ease:easingOut });
     }
  });
}

twoEases ( 2, 90, Cubic.easeIn, Elastic.easeOut);

I had the same issue and this worked for me.

  • Like 1
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...