.mdl

The lazyload plugin has a callback function callback_loaded, but the result did not suit me and I did not use lazyload in this situation.

Hello to all animation lovers! Please tell me how I can improve the animation in the mobile version (<576px). My expectation was that when the scrolling reaches a certain column of text, the function of showing the animation is triggered, but in fact the animation either fires earlier than I need and the animation is performed for all columns, and not those in the visibility zone. I would also like to play the appearance of the speakers depending on the direction. I found out that the direction is responsible for this when the onUpdate method is called, but I could not think of how this can be implemented.

Thank you very much for the tip, I will figure out how to make plugins friends)

Do I understand correctly that the call should be when initializing the vanilla lazyload?

And also I figured out the problem on the second question at the beginning of the topic, the problem is due to a conflict with the vanilla lazyload plugin, I think to put this question in a separate topic.

@GreenSock Do I understand correctly that the animation of the "exit" of the header also needs to be done through the gsap?

@GreenSock Hey! For the first question, I made a minimal demo available at https://codepen.io/mdl95r/pen/yLXwMRQ And also I made changes based on your answer, namely added invalidateOnRefresh: true and used values based on functions. Please tell me if it is possible to somehow improve it, I just ran into several problems: - when changing the height of the window, the triangles are removed from the text https://prnt.sc/1u86w4j my expectation is that they should be near the text - also when the window is resized, the animation is reset and does not work

@GreenSock Thanks for the answer! Based on the advice on isolating the problem, I will show the problem areas separately.

The demo is located at https://mdl95-showcase.ml/z-town/index.html

@Cassie Hey! I thought that demos in the form of a site in the starter topic would be enough. The described problem is visible on the site.

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

@mikel Thanks a lot for this example!

I get a bad transition between the first and second figure, I need to do as on the website https://readymag.com/evrone/2744381/3/ Please help me figure it out. I guess that I have problems with the scroll trigger somewhere.

@Cassie Thank you very much for this example, now I understand where to go.

@Cassie Good afternoon! No, I have not used svg in animations. The site uses png images.