Pin menu position changes when window is resized

[kmytor]

I am using the scrolltrigger to position a menu at the top, they work fine, but when I change the window size everything changes and it does not position under the top menu, what am I doing wrong it is supposed to be px from top to bottom it should not affect the window size. 

Thanks

See the Pen OJZBMjj by kmytor (@kmytor) on CodePen

[Rodrigo]

Hi,

 

This is related to the styles in your app and not GSAP. Unfortunately I can't seem to find a way due to the way your elements are positioned depending on the screen width. If you see this video, this is without ScrollTrigger and you can see that, even with fixed margin top and bottom values, the element's initial position changes:

https://i.imgur.com/n1hndN0.mp4

 

Even if you use invalidateOnRefresh: true in ScrollTrigger's configuration it has no effect, since the natural vertical position of the element is tied to the width of the screen:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".menu",
    pin: true,
    start: "top 10%",
    //scrub: 0.5,
    endTrigger: "footer.footer",
    end: "top bottom",
    pinSpacing: false,
    markers: true,
    //markers: {startColor: "white", endColor: "white"},
    invalidateOnRefresh: true, // <- THIS
    toggleActions: "restart none none reverse"
  }
});

Unfortunately this is not a GSAP problem as GSAP and ScrollTrigger are doing exactly what they supposed to do. I'd recommend you to set your styles in a way that the initial vertical position of the menu doesn't change when the screen width does. Once you get that, your ScrollTrigger controlled animation should work as expected.

 

Have a look at this video @Cassie made where she gives great tips on how to set up your work flow in order to get the best possible results with GSAP and ScrollTrigger:

 

Let us know if you have more questions.

 

Happy Tweening!

[kmytor]

Thanks, I think I have a big problem in my project.  😅

[Rodrigo]

29 minutes ago, kmytor said:

I think I have a big problem in my project.  😅

Not at all, it shouldn't be too complicated to fix. Just poke around in google and stack overflow and you'll find quite a few ways to do what you need. This is just about CSS nothing else and you don't have a huge setup, trust me, when you have to fix an app that has hundreds of files of faulty HTML, CSS and JS, then you have a big problem in your hands.

 

As Cassie mentions (and many other around here) just forget about JS and GSAP for now. Just focus on getting your menu element on the same position during and after window resize and you'll be on the right track in no time.

 

Happy Tweening!