Rishi

OK. Thanks for your help really appreciate it.

Yes, that might be an issue. I will do a little research on using .fromTo tweens and try to figure out. You had mentioned something about using functional values I did not understood that.

Yes, I agree tablets can be all sorts of screen sizes. The issue that I am facing is if I use the match media function to target screen size within a specific range for example this one /******* match media for tablets ******/ "(min-width: 768px) and (max-width: 1024px)": () => { // code goes here } then I am having some other issues like elements would be overlapping with one another on an iPad.

Hi @ZachSaucier, I had stripped down the unnecessary codes and kept only the once which will be helpful for you to debug. The code might look a little lengthier because I had to rewire the same animations inside the mobile match media function. Since I am very new to this scroll trigger functionality I would really be needing at least someone to help me figure out the issues. If not then at-least tell me how we are suppose to target an iPad and other tablet screens using match media? Kindly help me out I will appreciate your help. https://codepen.io/c-baruah/pen/wvWgBWM?editors=0010

Hi @ZachSaucier, I have updated the code in the previous code-pen demo https://codepen.io/c-baruah/pen/wvWgBWM?editors=1010 kindly have a look at it you should be able to figure out the issue. Animations are not fully stable when you resize the window. Also, would like to ask you one more thing. I am trying to target an iPad and other tablets with the help of match media function but not able to figure out. I have used this function for an iPad but it seems there are issues. How will I be able to target tablet screens? Any help would be much appreciable. Thank You. "(min-width: 768px) and (max-width: 1024px)": () => {}

Hi @ZachSaucier, I am facing another issue on Scroll Trigger. If I switch between responsive design modes for example if I inspect and change the view to a mobile device and vice versa then the animations are not triggering properly unless and until you refresh the page every time while changing the orientation. Is there any way to tackle this issue. Scroll Trigger should re-initialised right without having to refresh the page every time you change orientation? Any help would be much appreciable. Thanks.

Hi @ZachSaucier, Sorry for responding late. I have gone through all the above points and made some minor modifications in my code but now I am facing an issue if I remove the scroll trigger.refresh function and if I refresh the page from inside a particular section then the scroll trigger is not re-initialising. The section is getting overlapped with other sections and the animations are also not stable on refresh. Please help me to figure out exactly how to solve this issue. I am attaching a screenshot for you to understand. I am gonna also recreate the issue in my code-pen and update you asap in the meantime please refer the screenshot see how the section is getting overlapped with other section element.

Hi Team GSAP, I have edited the previous post by creating a small code pen demo in order to explain the situation that I have been facing. Please check the code pen demo for a better understanding. As I am new to Scroll Trigger please check my code if I have done it in a proper way. Basically what I am trying to achieve is the animations should be stable even when you load the page from within the section.

Hi GSAP Team, I am new to the Scroll Trigger plugin and I am facing an issue with the same. I am having a website wherein I have triggered all the animations using Scroll Trigger and I have also used the rick callbacks now the issue that I am facing is If you are within a particular section and if you try refreshing the page then the scroll trigger animations are not re-initialising. For Example, if you are inside a section with the class name 'ABC' and then if you refresh the page the animations are not happening also the pinned element goes up somewhere hence the scrollbar is not recalculating the original position. Any solutions would be really appreciable. I am also adding my stack overflow link for your guys to understand the situation https://stackoverflow.com/questions/64240035/gsap-3-scroll-trigger-on-leave-animation-reverse?noredirect=1#comment113659636_64240035 Thanks.