B. Ihab

Hi Jack, Thanks for your quick reply, for sure it'll be really helpful for me, I'll follow your advice step by step. For the third point, It was midnight in my country, I just copied the code I has in my editor without any update ^^, I understand for "scrub" and "toggleActions" now that you said that, it's clear that they're exclusive. For the fourth point, the effect I want to achieve is having the pin moving down until he reaches the top of the car then pinning the whole section ( Car and text ) + the pin which isn't a part of the second section, don't know if my approach is the best way to get the effect done. What about the approach I should use in end/start? It will be beneficial to use px or should I replace that to get the correct effect in all the breakpoint?

Thanks for your reply, and thanks a lot for the advice you give to me, I edited my post and I added a demo from CodePen, as you can notice even with a small change in the resolution - adding the same animation from my code to codepen - the animation broke. Don't know if I can post external Url's but here is my staging link The animation in codePen is the same as in my Website Link: http://deb.debtechnology.com/solution-gps User: user_guest Password: Welcome! You can just change the resolution to something like 900 * 7xx to notice that: 1. I need to refresh page when manually resizing it, I think it can be done automatically, I just don't know how. 2. The start/end point is wrong in most resolutions, how can I specify a dynamic start/end point. If you notice any things that I should improve/learn to optimize my GSAP code don't feel a shame to notice it to me, it will help me a lot.

Hi, I hope you're doing great and you have a nice day. I'm facing a problem and I need some help to know the exact things I should search for: 1. Every time I resize the page on my website - using GSAP Scrolltrigger on it - I need to refresh the page to show the correct animation. 2. I can't get my animation correct for all resolutions, even when using .matchMedia, I know that I'm using it wrong. 3. Should I use specific number or % ... to specify the position of the scroll? example: end: "+=720", start:'center-=270 center', I can't get it correct for all resolutions with fix number. In term of resolution, I wanna achieve something like that : https://www.samsung.com/n_africa/smartphones/galaxy-note20/ that work perfectly in all devices and all resolutions Here is an example of my gsap code, I can't write the whole page in CodePen it's quite long.

That was really helpful, I'll review my entire code and try to follow your advices, thanks a lot.

Thank you Cassie for your quick response, I provided a demo like suggested, if I need to provide anything else feel free to notice it, If my code need some optimization or can be improved please tell me.

Hi dear, This is my first post in this Forum, I apologize for my ignorance, I joined a video to my request, as you can see in the video, there are 2 sections ( Call to Action + A second Section with text and Images ) I have pinned a laptop to the scroll, the thing I want to achieve is that I want to change the laptop screen in the second section every time the text change, I spent 4 days trying to achieve that effect without any result, if someone can just guide me it will be a great help for me. 2021-05-05 11-38-10.m4v