Jump to content
Search Community

Carousel move on hover not smooth

mapo studio srl test
Moderator Tag

Recommended Posts

Hello everyone, this is my first post.

 

I build a carousel with gsap3 starting from Sahil example linked below.

 

I change a lot from the original and everything goes well but the movement of the carousel on mouse over isn't smooth. Can you help me? 

 

I think this is a nice carousel and can be useful for a lot of user in the future!

 

Thanks

 

 

 

See the Pen wvvVYjb by aboutluca (@aboutluca) on CodePen

Link to comment
Share on other sites

Hey mapo and welcome to the GreenSock forums! Thanks for being a Shockingly Green member. 

 

I think most of your jumpiness comes from the difference in the default value of overwrite between GSAP 2 and GSAP 3. In GSAP 2 it was "auto" by default and in GSAP 3 it is false by default. Changing it removes a bit of the jumpiness for me. You can change the default by saying gsap.defaults({overwrite: "auto"}); or you could apply it to just the tweens you want to by saying overwrite: "auto" in their vars parameter.

 

@GreenSock another instance where people are tripping over this. But maybe it will lessen once people are converting GSAP 2 things to GSAP 3 a while from now?

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

But maybe it will lessen once people are converting GSAP 2 things to GSAP 3 a while from now?

 

I think having overwrite set to false is really only helpful to people who create conflicting animations in banner-like animations. When doing interactive animations, having overwrite set to false can really mess people up because most people are not familiar with the different overwrite behaviors. I've been using gsap since 2014, and the new overwrite behavior still messes me up. I looked at this question last night, and it didn't occur to me that it might be an overwrite issue. I understand the reasoning for having overwrite set to false, but I think it does more harm than good.

Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

Hey mapo and welcome to the GreenSock forums! Thanks for being a Shockingly Green member. 

 

I think most of your jumpiness comes from the difference in the default value of overwrite between GSAP 2 and GSAP 3. In GSAP 2 it was "auto" by default and in GSAP 3 it is false by default. Changing it removes a bit of the jumpiness for me. You can change the default by saying gsap.defaults({overwrite: "auto"}); or you could apply it to just the tweens you want to by saying overwrite: "auto" in their vars parameter.

 

@GreenSock another instance where people are tripping over this. But maybe it will lessen once people are converting GSAP 2 things to GSAP 3 a while from now?

 

Thanks, set to true it's better but not perfect, i will study more! 

Link to comment
Share on other sites

17 hours ago, ZachSaucier said:

@GreenSock another instance where people are tripping over this. But maybe it will lessen once people are converting GSAP 2 things to GSAP 3 a while from now?

Yep, we expected there'd be some speed bumps during the transition. Just keep in mind:

  • No other animation engine I know of has ever done auto-overwriting (or any kind of overwriting that I can remember). So having overwrite: false as the default seems common/expected in the greater context (outside legacy GSAP)
  • There's a performance penalty to overwrite: "auto". I'm not excited about imposing that on everyone, especially since I'd guess that 95%+ of users don't create conflicting tweens to begin with. In other words, a tiny portion of the audience benefits from something that 100% would pay the performance penalty for.
  • Frankly, I'm a bit uncomfortable making it EASIER for people to create conflicting animations (without even realizing it) :) In some ways, I see it as a GOOD thing that some people have run into issues with their animations due to their conflicting tweens - yes, it's one more question in the forums for us moderators to answer, but ultimately it helps users understand what's going on and why they should avoid creating conflicts (or at least how to mitigate them intentionally if they must create them to begin with). 

I'm not totally closed off to changing the default to "auto", but I think we need to push through at least another month or two and let people settle in a bit. It seems premature to revert just because some people have stumbled. Remember, plenty of people have stumbled on the old default overwrite:"auto" behavior and wondered why their tweens got killed. It isn't as if overwrite: "auto" is going to solve everything. 

 

15 hours ago, OSUblake said:

I've been using gsap since 2014, and the new overwrite behavior still messes me up.

Wouldn't that be the case with any other animation library as well? And I'm curious - what are the common scenarios that tend to trip you up? I think it'd help me to understand the context a bit. In other words, when does the overwrite: false behavior tend to catch you off-guard? 

Link to comment
Share on other sites

17 minutes ago, GreenSock said:

Wouldn't that be the case with any other animation library as well?

 

Not sure. I really haven't used any beyond simple testing in a long time, so I don't remember.

 

18 minutes ago, GreenSock said:

And I'm curious - what are the common scenarios that tend to trip you up? I think it'd help me to understand the context a bit. In other words, when does the overwrite: false behavior tend to catch you off-guard? 

 

It's mostly been helping other people. When something looks funky, it's not obvious to me that the problem is overwrite. My first instinct is that there is a logic problem somewhere. Also, callbacks fire on conflicting tweens.

 

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