Another animation issue when adding a Y animation

[Ivan Mocs]

I have a problem when I add Y animation, why is the sliding animation when scrolling not correct?

while without the Y animation, the sliding works, I've tried to init when onComplete but that doesn't fix the problem either.

See the Pen GReXpvg by adeivan (@adeivan) on CodePen

[GSAP Helper]

We'd love to help, but vague details like 'it's broken' or 'it doesn't work' 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 please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

[Rodrigo]

Hi,

 

Yeah the problem seems to stem from the fact that you're animating the entire wrapper 100vh, that definitely messes up all the calculations ScrollTrigger makes.

 

Why not animate just the content of the first section on the Y axis? Maybe give the content a position absolute and overflow hidden and move just the content, that's what I would do, like that you animate the elements that would be visible above the fold like you're doing now and the calculations of ScrollTrigger would be the same.

 

Hopefully this helps.

Happy Tweening!