Hello to all animation lovers!
For some time now I have been studying gsap animations, there is even some progress. But I still need a consultation with experienced masters
This works, but there are several but:
1. When scrolling, the triangles must fall on certain coordinates, but when the window is resized, the coordinates are shifted, is it possible to “bind tightly” the flying triangles to the text when resizing.
Demonstration of normal snapping of triangles to text:
https://prnt.sc/1ty9h7w
Demonstration of broken binding when resizing a window:
https://prnt.sc/1ty9f6w
2. When scrolling in the slider section, in a certain situation you can see that the animation “start” of the next section is in the middle of the slider, so the animation in the next section starts earlier, so it does not work correctly, but if you resize the window, then everything comes back to normal. Please tell me why this can happen and what can be done about it?
Demonstration of the beginning of the animation in the wrong place:
https://prnt.sc/1ty7vuj
3. I get three animation timelines, which are not always located one after another, is it possible to somehow improve the synchronization, for example, by placing them in one timeline? If yes, please tell me.
And here you can see the result:
https://mdl95-showcase.ml/z-town/index.html