I used this prompt in Chat GPT:
Below I have listed my code of an animation created with HTML, SCSS and Javascript. I use the Javascript animation library GSAP & Scrolltrigger & ScrollSmoother. Because I use ScrollSmoother I can't use position fixed. So I'm tied to pinning elements only. In my Javascript code I loop through the panels and I create for each panel a Scrolltrigger. The trigger is the top of the .panel element. But because their parent element .panels is moving up the triggers also move and this is not ideal. How can I refactor my code in order to keep the triggers in place?
And it returned code that solved the issue
See the Pen mdzpxPJ by duetdigital (@duetdigital) on CodePen
Answer of ChatGPT:
The issue with your ScrollTrigger animation is that you are pinning the .js_cases element, which is a child of .js_panels. As the .js_panels element moves up due to the ScrollSmoother, the trigger for each panel also moves with it. One solution to keep the triggers in place is to add an empty element with a height equal to the .js_panels element before the .js_cases element. Then, you can pin this element instead of the .js_cases element.
<code>
Here, we add two empty elements with the class .empty-panel before and after the .js_cases element. We then pin the first .empty-panel element, which is before the .js_cases element, using the height of the .panels element as the end value. We pin the .js_cases element as before, using 'max' as the end value. By pinning the empty panel, we ensure that the ScrollTrigger stays in place, even as the .panels element moves up.
