Amna A

Thank you for the suggestion. I checked it out, but the issue persists. When you refresh the site, the animation works abruptly but after 3 to 5 seconds, it works perfectly fine. I am unable to troubleshoot the cause here.

Hello again! I wanted to share an update on the method I've been using based on the tutorial we discussed earlier. Instead of scaling an SVG directly, I opted to use a div element initially. I set its width and height to the desired dimensions and applied a transformed scale to make it effectively invisible (scale set to 0). Then, I implemented a scroll-triggered animation to scale it up to 1 as the user scrolls. Now, here's the catch: while this approach works smoothly on Chrome, I encountered some unexpected behavior on Safari. When testing on Safari, the entire element seems to disappear entirely. Additionally, when scrolling out of the viewport, the element suddenly reappears, filling the entire screen abruptly. Here is the link to my Codepen: https://codepen.io/aamnaa/pen/jOJXMZw Let me know if you have any insights or if you'd like me to try any specific troubleshooting steps! Thank you in advance!

Thank you for suggesting recreating the issue, I found it and fixed it during the process.

Hello again! I am using gsap ScrollSmoother with nextJS app. Here is my code for layout component where I am initiating ScrollSmoother. const Layout = ({ mainMenu, children }: Props): React.ReactElement => { gsap.registerPlugin(ScrollSmoother, ScrollTrigger); ScrollTrigger.normalizeScroll(true); useIsomorphicLayoutEffect(() => { const smoother = ScrollSmoother.create({ smooth: 3, effects: true, smoothTouch: 0.1, normalizeScroll: true, }); return () => { smoother.kill(); }; }, []); It works fine on Chrome but on Safari I am getting the following error: Can anyone please guide How can I fix this issue?

Hello @mvaneijgen I followed @Carl's tutorial and it fixed my issue. Thank you so much for helping out.

I am new to GSAP, and I know it must be a simple mistake, but I would greatly appreciate any insights or suggestions on how to address these issues!

Hello! Here is the CodePen link to my code: https://codepen.io/aamnaa/pen/gOEvQjj I am attempting to scale a circle with a width and height set to "1" to a larger extent (2000). However, I am encountering a significant flickering issue on screen resolutions of 1500 and above. The flickering occurs less frequently on a 1440 screen resolution. Additionally, I'm facing challenges with the scaling functionality on Safari, Firefox, and Edge. On Safari, the circle scales into a square, and on Firefox and Edge, the entire SVG disappears. The idea is to scale the circle on the scroll so that it can fill the whole screen. I am new to GSAP, and I know it must be a simple mistake, but I would greatly appreciate any insights or suggestions on how to address these issues!