Jump to content
Search Community
kmytor test
Moderator Tag

Recommended Posts

Hi, I'm really stressed, I don't know if you can help me. 
I tried everything but for some reason the menu keeps moving with respect to the size of the window, what can I do?

if I disable the trigger the menu does not move, and also the rest of the panels do not move, the only one that changes is the pined one. 

can you help me 

See the Pen OJZBMjj?editors=0100 by kmytor (@kmytor) on CodePen

Link to comment
Share on other sites

Hi,

 

The problem could be the start of your ScrollTrigger instance. Is a percentage based value, so in different screen heights 10% of that particular height is different, see what I mean? On a tablet in portrait the height is 1024px, then 10% = 102.4 px. Same tablet in landscape the height is 768px, then 10% = 76.8px, so your menu gets pinned in different positions.

 

Just set a start point in pixels and you shouldn't see the problem. This seems to work on all screen sizes:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".menu",
    pin: true,
    start: "top 90px",// <- THIS VALUE
    endTrigger: "footer.footer",
    end: "top bottom",
    pinSpacing: false,
    toggleActions: "restart none none reverse"
  }
});

Sorry, I missed this issue in your previous thread 🙏, I should've seen it there.

 

Let us know if you have more questions.

 

Happy Tweening!

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