Jump to content
Search Community

Issue with pinned elements

KST test
Moderator Tag

Recommended Posts

 

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

 

  • Like 2
Link to comment
Share on other sites

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.

 

 

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