Jump to content
Search Community

Change easing when reversing tween or timeline

marco.fugaro test
Moderator Tag

Recommended Posts

I have a gsap timeline, which I trigger on hover and play it reversed on mouseleave.

 

However I need to change the easing when I play the timeline reversed. Is there a way I can do this without duplicating the whole timeline again?

 

Here is a stripped down example, full example is in the codepen.

 

const ease = 'power2.out'

const tl = gsap.timeline({ paused: true })

// tweens here...


card.addEventListener('mouseenter', (e) => {
  tl.play()
})

card.addEventListener('mouseleave', (e) => {
  // need to somehow change the easing to 'power2.in' here
  tl.reverse()
})

 

See the Pen abpZWOJ?editors=0010 by marco_fugaro (@marco_fugaro) on CodePen

Link to comment
Share on other sites

 

Hey @marco.fugaro - welcome to the forums.

 

I think technically exchanging the ease(s) would result in logic issues as was hinted to in this thead

 

 

 

What you could do though, is tween on the time of the timeline instead and use different eases there as suggested by @PointC in this thread:

 

 

 

With your example that could look something like this; seems to work quite right. Does that work for you?

 

See the Pen 05ad643619fcaf511016a2ebf761bd74 by akapowl (@akapowl) on CodePen

 

 

 

Please note, that I updated your GSAP version in this pen to 3.6.1 because from what I understood there were some issues with .tweenTo/.tweenFromTo in 3.6.0, as mentioned in this thread:

 

 

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hi !

I'm digging this topic up for a little question : I was having the same need, and this method indeed works.

BUT, when using a bounce easing, the easing is different if applied directly or with a tween...

 

If I use "ease: Bounce.easeOut" directly in my timeline declaration, I get like 3 rebounds.

 

If I use the method described in this topic : "tl.tweenFromTo(tl.time(), tl.duration(), { duration: 1, ease: "Bounce.easeOut" })", I get 1 only rebound, and the bounce is less realistic.

 

Any idea why ? I don't get it.

Thanks ! :)

Link to comment
Share on other sites

 

Hello there, welcome to the forum.

 

It's really tough to really understand your problem without a minimal demo - those also make it a whole lot easier to give proper advice.

 

When applied like this, you can see there are 3 bounces in and 3 bounces out - maybe this will help already (more on that in the thread linked below).

 

If it doesn't help, please include a minimal demo of your own for us to tinker with.

 

See the Pen eYVZbNo by akapowl (@akapowl) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

  • 6 months later...
Quote

What you could do though, is tween on the time of the timeline instead and use different eases there as suggested by @PointC in this thread:

 

How would this work when the timeline is using `scrollTrigger`? Would I still start the timeline paused, and then use the `onLeave` callbacks to manually call tween the timeline with different easings?

Link to comment
Share on other sites

Hi,

 

Indeed using ScrollTrigger's callbacks would be the way to go in that particular situation, like onEnter, onLeave, onEnterBack and onLeaveBack. Also you're right about creating the timeline paused, otherwise it'll run before the ScrollTrigger instance reaches the start and end points.

 

Here is a simple example of this concept:

See the Pen KKGKxgQ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

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