The pin triggers the max-height, max-width style, how to turn it off？

[yarnb]

When I set pin: true on the target element, it will get a set of max-height, max-width styles, which causes me to lose the effect of its original size gradient. How can I turn off this feature?

See the Pen QWxaymz by bzonegogogo (@bzonegogogo) on CodePen

[GreenSock]

That's necessary for proper pinning. But you could try just animating those max values too: 

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

 

Or better yet, wrap the element in a container so you can pin the container and animate the target. It's almost never a good idea to animate the same element that you're pinning (well, at least dimensions/position). 

[yarnb]

1 hour ago, GreenSock said:

That's necessary for proper pinning. But you could try just animating those max values too: 

 

 

 

Or better yet, wrap the element in a container so you can pin the container and animate the target. It's almost never a good idea to animate the same element that you're pinning (well, at least dimensions/position). 

 

In this way, when I enlarge the scrolling content, once the scrollerTrigger is out of range, the size of the element is reset

See the Pen vYrpGwM by bzonegogogo (@bzonegogogo) on CodePen

 

But now I am refactoring the code in the direction of your suggestion, thank you

[GreenSock]

Yeah, then I'd just wrap it in a container and pin the container instead. Does that work well for you? 

 

[yarnb]

22 minutes ago, GreenSock said:

Yeah, then I'd just wrap it in a container and pin the container instead. Does that work well for you? 

 

work for me