KST Posted March 31, 2021 Share Posted March 31, 2021 Hi, When resizing window between pin start and end position (before .yellow is shown in viewport), .yellow will jump to the top. Is there any way to solve the problem? Thanks! See the Pen VwPmwzg by tiffk935 (@tiffk935) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 31, 2021 Share Posted March 31, 2021 Hey @KST Sorry for not getting to your issue(s) earlier. It looks like you got that first issue you mentioned in the other thread of yours figured out already? For the jumps of the yellow box on resize: this seems to be related to the pinning of the box - that pinning ScrollTrigger commented out makes the issue disappear. What you could do is set pinType: 'transform' to that ScrollTrigger. I honestly can not tell you why exactly, but this seems to work better ony my end. Does that work for you? See the Pen e44aaf169a3622c64dfab380b5ecebee by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
KST Posted March 31, 2021 Author Share Posted March 31, 2021 Hi @akapowl Thanks for your reply. It's very helpful. 😃 But still have a problem. I've created a new pen. When resizing window, the position of .main is wrong (seems because of transform: translate()?). See the Pen XWpppZg by tiffk935 (@tiffk935) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 31, 2021 Share Posted March 31, 2021 3 hours ago, KST said: When resizing window, the position of .main is wrong (seems because of transform: translate()?). Yeah, I think it is because of the transforms you have set on .main and .hand, and the way GSAP handles those - especially the -50% - as elaborated on by @GreenSock in these two recent threads. Removing the transforms (with adjustments on the parent containers) results in consistant behaviour as expected after resizes. See the Pen 1df717c2fff400d2a9333c5ffcc99647 by akapowl (@akapowl) on CodePen Another option could be to just set the transforms as neccessary and with regard to what you tween on later with GSAP and not via CSS. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now