Jump to content
Search Community

how to set reverse ease?

Leemoon test
Moderator Tag

Recommended Posts

How to set reverse ease??

for example:

let tl = gsap.timeline({
    paused: false,
    defaults: {
        duration: 3,
        ease: "power3.in"
    }
})

tl.to(".div1", {x : 500});
tl.to(".div2", {y : 500});

tl.play();

///// when called play,  ease: "power3.in" is working.

 

tl.reverse();

////but called reverse, ease  is not working,   how to set reverse ease? please~

Link to comment
Share on other sites

Kinda sounds like a yoyoEase might work well in this case instead of reverse().  

 

let tl = gsap.timeline({
  repeat: 1,
  yoyo: true,
  defaults: {
    duration: 3,
    ease: "power3.in",
    yoyoEase: true
  }
});

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Yep, @OSUblake and @PointC are exactly right.

 

One other option: set up your animations with ease: "none" and then you can animate the playhead with any ease you want with another tween: 

 

let tl = gsap.timeline({defaults: {ease: "none"}, paused: true});
tl.to(...)
  .to(...);

// here's the magic: 
gsap.to(tl, {time: tl.duration(), ease: "power3.out"});

// then to go backwards with another ease:
gsap.to(tl, {time: 0, ease: "power4.inOut", overwrite: true});

 

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