maxWidth / minWidth being ignored on animation

[fd_alistair]

Hi there - I have set a min and max width on a div, however the code below constantly adds 100px to the divs width even though a maxWidth has been set in gsap and CSS, it stops at the correct width, but if you look at the code the width keeps on increasing.

 

 

Any ideas please?

See the Pen XWVGVNj by fuzzyduck (@fuzzyduck) on CodePen

[Cassie]

I don't often see people using maxWidth and minWidth in GSAP tweens.

A minimal demo would go a long way towards helping you figure this out!

 

 

[fd_alistair]

12 minutes ago, Cassie said:

I don't often see people using maxWidth and minWidth in GSAP tweens.

A minimal demo would go a long way towards helping you figure this out!

 

Thanks, Try this:  - as you can see it stops at the correct width but keeps on adding the width

 

[akapowl]

 

I don't really think it is being ignored - it is more that browsers don't work like that with regard to those properties ( width --> max-width e.g.)

 

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

 

As you can see here, while there is a max-width set on the box and thus the browser will display it at that max width set, you can still set the actual width of the box to something very high like "100000px" via JS - so it is not a GSAP related problem, you're running into. That width value will keep increasing in your example, no matter what max-width you are setting.

 

For what you are up to achieve, you will likely have to use some sort of function including clamping, like with gsap.utils.clamp

 

Now I'm not sure if tis here is the cleanest approach to that, or if it could even be made more concise using other gsap utility functions, but it does do the trick with what I understand you are up to.

 

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

 

[fd_alistair]

3 minutes ago, akapowl said:

 

I don't really think it is being ignored - it is more that browsers don't work like that with regard to those properties ( width --> max-width e.g.)

 

 

 

 

As you can see here, while there is a max-width set on the box and thus the browser will display it at that max width set, you can still set the actual width of the box to something very high like "100000px" via JS - so it is not a GSAP related problem, you're running into. That width value will keep increasing in your example, no matter what max-width you are setting.

 

For what you are up to achieve, you will likely have to use some sort of function including clamping, like with gsap.utils.clamp

 

Now I'm not sure if tis here is the cleanest approach to that, or if it could even be made more concise using other gsap utility functions, but it does do the trick with what I understand you are up to.

 

 

 

 

Ok thanks! that certainly does the job.

Kinda odd this isn't a feature of GSAP?

[GreenSock]

56 minutes ago, fd_alistair said:

Kinda odd this isn't a feature of GSAP?

 

No, that definitely shouldn’t be something that GSAP overrides. It’s working exactly the way it should. Otherwise, if you set width to something high and then animated the maxWidth to increase, that wouldn’t work properly.

 

I’d probably do something like this:

See the Pen YzYgeYm?editors=0010 by GreenSock (@GreenSock) on CodePen