Jump to content
Search Community

Reverse Easing with ScrollTrigger

katerlouis test
Moderator Tag

Recommended Posts

Heyho partypeople,

 

I want to hide and show a button at a certain scroll position. Super easy with ScrollTrigger (thanks for that <3)

But of course the "perceived easing" should be the same no matter which direction you scroll / if the button hides or shows. 

 

Firstly I've tried two separate tweens. One for "show" and one for "hide", each with its own ScrollTrigger. But.. well.. yeah, .. pure disaster.

 

The solution I came up with (and has been suggested multiple times in the forums) to use one master tween with linear easing, and tween the progress of that. While I was at it, I figured to use this juicy new function "getVelocity" to alter the duration based on the scrolled velocity. 

 

My issue now is:

When you scroll slowly over the trigger, and scroll back to trigger the new progress-tween, and then immediately down again, the "hide" tween is still running, and the button hides in a flash :(

 

My expectation is that once you start to tween the progress of a master tween, any other tweens currently tweening this progress get canceled immediately. 

 

Is this expectation wrong? Or is something entirely different causing this issue?

 

Thanks!

 

Louis :)

See the Pen BapaeNd by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

Cool! Very good video! Especially the real life example at the end is important in my opinion to drive the point home. I love it!

 

So my assumption is right for gsap 2: there was an automatic overwrite.

I'm wondering why you chose to set it to false by default? `auto` as the defaults feels like it makes more sense.

 

Back to topic:
unfortunately I can still provoke unwanted jumps/flashes in your pen when scrolling back and forth heavily :(

Link to comment
Share on other sites

Hmm, it seemed to hold up well in my quick tests, but I don't doubt you.

 

Have you tried removing all the custom velocity-based stuff?

My suggestion would be to roll-back and get it working with more basic features and then see where it breaks.

 

Unfortunately, I don't have the time to jump in there and do deep debugging.

 

Glad you liked the overwrite video though!

 

@GreenSock can speak better to the change in overwrite modes for GSAP 3. I'm pretty sure the default of true requires less overhead and better performance.

 

Carl

 

ps. good to know you are previously Kreativzirkel :)

 

  • Like 1
Link to comment
Share on other sites

I've already figured out some issues with the dynamic duration. I didn't know the velocity is negative when scrolling up. And I thought `mapRange` would already be clamping. It's nice to have the option that it doesn't and with pipe its easy to chain; but – you know me :D In my opinion it's inconvenient to update the same values in both the clamp and the mapRange function when I want to find the right values for my application.

 

What do you guys think about a clamp-boolean parameter in mapRange? Somethine like this: `mapRange(0, 1000, 2, 0.5, true)` 😎

 

Anyhow: I've forced the velocity to a positive number and added a clamp, so now the max and min duration is actually 2 and 0.5 seconds.

 

It feels good to me now. What do you say?

See the Pen rNjaMeY by katerlouis (@katerlouis) on CodePen

 

 

PS: Yeah, I had a few projects that didn't require any animations what so ever (you know I've still added a ton; but nothing complex). I've learned a good and important amount; but man am I glad to am back in the saddle :D – It was only me using the account anyways, so I figured to rename it. Glad that you remembered me :)

 

  • Like 1
Link to comment
Share on other sites

8 hours ago, Carl said:

@GreenSock can speak better to the change in overwrite modes for GSAP 3. I'm pretty sure the default of true requires less overhead and better performance.

Yep, it was a very intentional change because: 

  1. The old "auto" default overwrite mode sometimes caught people off guard, so opting in ensures people are aware of what's going on. 
  2. Overwriting costs some overhead processing-wise, but in the vast majority of cases you don't really need to do any overwriting so it's just a waste to always do by default. 
  3. Even when you've got two competing tweens running, the "last one wins" rule applies so people almost never notice it anyway. The only time it becomes a stumbling block is when the new tween has a shorter duration than the old tween. 
8 hours ago, katerlouis said:

What do you guys think about a clamp-boolean parameter in mapRange? Somethine like this: `mapRange(0, 1000, 2, 0.5, true)` 😎

 

That wouldn't work because the 5th parameter is the value that you want mapped. But like you said, it's quite easy to get the result you want:

const convert = gsap.utils.pipe(
  gsap.utils.clamp(0, 1000),
  gsap.utils.mapRange(0, 1000, 2, 0.5)
);

console.log(convert(-100)); // 2

 

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