ScrollTrigger: Start and End Values offsets on initial load, and corrects when the browser resizes or there is live change in the Code

[code stan]

I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the  the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component.

THANK YOU

[GSAP Helper]

We'd love to help, but vague details like 'not aligned properly' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

 

I also noticed your demo isn't very minimal. The more you can isolate the issue, the greater the chances you'll get a good answer. 

 

By the way, does everything work as expected if you REMOVE Lenis completely? 

[code stan]

Ok thank you for your feedback,

1. when I said "align properly", I was referring to the start and end position not being tied to the element (the trigger element), I was trying to animate the content in it, to simply come from bottom to top.

2. I did eventually create a minimal demo, but it's working fine here and not in the project.

3. When I removed lenis scroll, the issue still persisted.

4. Here's a more simplified version of the code, I specified earlier, the "CONTACT COMPONENT" has the issue, sometimes it animates properly other times on refresh it doesn't

[GSAP Helper]

Are you saying that when the ".contact-section" element hits 45% down from the top of the viewport, the animation doesn't occur for you? 

 

Sorry, it might be obvious to you what this means: "start and end position not being tied to the trigger element" but it would be super helpful if you made it more obvious, like maybe give the element a big red border and say "when the top of the element with the red border hits 45% down from the top of the viewport, its children should fade in but they don't...why?" 

 

And again "sometimes it animates properly, sometimes it doesn't" isn't terribly helpful. What does "properly" mean exactly? Have you noticed any tricks to getting it to break? Is it completely random? I wonder if you've got other images/videos loading in and then when they finish, it shifts around the layout and throws off the start/end calculations. If so, just make sure you call ScrollTrigger.refresh() when the layout is done shifting around.