gsap на iPhone

[bahnii]

hello, recently I developed a cool site that looks good and on my laptop everything works both in the mobile version and on the PC, but when I opened the site on my iPhone 13, the animations became somewhat jerky and not smooth, so they work correctly, but it looks not so good on ios as on a PC, here is the link to the site https://bahniimdev.github.io/remember/#

[GSAP Helper]

Hi there! Sorry to hear you've run into some performance issues.

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

I hope this helps!

[bahnii]

oh so quickly, the advice really applies to my situation, I use the mix blend mode property and animate not x and y, but top and left, but I need to do it exactly like that according to the idea in the menu, the background and color of the text should change dynamically with the help of mix blend mode and for it to work correctly, you just need to use top and left, so I don't know how to make this animation through gsap

[GSAP Helper]

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?