Jump to content
Search Community

[idea] setting different eases to different properties in one tween

hellol11 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

So, here is an idea:

 

Let's say I have an element that I want to have animated with different eases for the x and y props. Normally, to do that, I would have to do this:

TweenMax.to("#box", 1, {
    x:200, 
    ease:Power4.easeOut
});
TweenMax.to("#box", 1, {
    y:200, 
    ease:Power4.easeIn
});

But, what if I could do it like this instead:

TweenMax.to("#box", 1, {
    x:{
        value:200, 
        ease:Power4.easeOut
    }, 
    y:{
        value:200, 
        ease:Power4.easeIn
    }
});

I think that would be a pretty cool thing to have. Can you guys make this happen?

See the Pen bpjpEv by hellol11 (@hellol11) on CodePen

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