.mdl Posted September 28, 2021 Share Posted September 28, 2021 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 See the Pen yLXwMRQ by mdl95r (@mdl95r) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 Hi there, We're glad you're enjoying the tools! It's a little tricky to work out what you need help with from the links provided. If you'd like assistance from the volunteers in these forums, please provide a working minimal demo. Link to comment Share on other sites More sharing options...
.mdl Posted September 28, 2021 Author Share Posted September 28, 2021 5 minutes ago, Cassie said: Hi there, We're glad you're enjoying the tools! It's a little tricky to work out what you need help with from the links provided. If you'd like assistance from the volunteers in these forums, please provide a working minimal demo. @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. Link to comment Share on other sites More sharing options...
.mdl Posted September 28, 2021 Author Share Posted September 28, 2021 The demo is located at https://mdl95-showcase.ml/z-town/index.html Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 We don't have the resources available to dig through source code I'm afraid. Please provide a working demo and we'll see how we can help. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 28, 2021 Share Posted September 28, 2021 Without a working demo, I'll just offer a few basic comments: If you need your ScrollTrigger-related animation values to refresh when the window gets resized, set invalidateOnRefresh: true on the ScrollTrigger and use function-based values in your animation. If things look weird but then they get fixed when you resize, that tells me you've got something that's altering the DOM/layout AFTER the page loads. If you're doing that, just make sure you call ScrollTrigger.refresh() AFTER you're done editing/shifting around the DOM/layout so that ScrollTrigger can recalculate all the start/end values accordingly. A common cause of this is when someone dynamically loads images into elements that don't have any width/height defined, thus the DOM lays out one way, and then when the images load it suddenly forces everything to shift according to the width/height of the images. One solution is to set their width/height initially via CSS. Or just call ScrollTrigger.refresh() after things load fully. If you're going to post a demo, please make sure it's the absolute minimal possible code - do NOT post your whole project in a CodePen. One of the most important skills any developer can learn is to ISOLATE issue effectively. If you get in that habit, you'll probably answer your own questions much more quickly and not even need help from anyone else. 👍 1 Link to comment Share on other sites More sharing options...
.mdl Posted September 28, 2021 Author Share Posted September 28, 2021 11 minutes ago, GreenSock said: Without a working demo, I'll just offer a few basic comments: If you need your ScrollTrigger-related animation values to refresh when the window gets resized, set invalidateOnRefresh: true on the ScrollTrigger and use function-based values in your animation. If things look weird but then they get fixed when you resize, that tells me you've got something that's altering the DOM/layout AFTER the page loads. If you're doing that, just make sure you call ScrollTrigger.refresh() AFTER you're done editing/shifting around the DOM/layout so that ScrollTrigger can recalculate all the start/end values accordingly. A common cause of this is when someone dynamically loads images into elements that don't have any width/height defined, thus the DOM lays out one way, and then when the images load it suddenly forces everything to shift according to the width/height of the images. One solution is to set their width/height initially via CSS. Or just call ScrollTrigger.refresh() after things load fully. If you're going to post a demo, please make sure it's the absolute minimal possible code - do NOT post your whole project in a CodePen. One of the most important skills any developer can learn is to ISOLATE issue effectively. If you get in that habit, you'll probably answer your own questions much more quickly and not even need help from anyone else. 👍 @GreenSock Thanks for the answer! Based on the advice on isolating the problem, I will show the problem areas separately. 1 Link to comment Share on other sites More sharing options...
.mdl Posted September 30, 2021 Author Share Posted September 30, 2021 @GreenSock Hey! For the first question, I made a minimal demo available at 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 Link to comment Share on other sites More sharing options...
OSUblake Posted September 30, 2021 Share Posted September 30, 2021 getBoundingClientRect is going to get the current coordinates, so that's going to mess up your calculations if the animation is in progress. And rotation is going to mess up those calculations even further. The simplest solution would be to put your triangles inside a wrapper element, and then measure for that wrapper. Otherwise you'll have to remove the element's transforms before call getBoundingClientRect like this. let transform = el.style.transform; el.style.transform = ""; let bounds = el.getBoundingClientRect(); el.style.transform = transform; 3 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 1, 2021 Solution Share Posted October 1, 2021 Actually, the in-progress stuff shouldn't be an issue if you've got invalidateOnRefresh - I saw a few other problems: Your calculations were incorrect - you were using the wrong property (width) of the wrong element in all your "y" calculations, like: // BAD y: () => (adwantagesCol1.getBoundingClientRect().y - adwantagesCol1.getBoundingClientRect().width - figure3.getBoundingClientRect().height) // GOOD y: () => (adwantagesCol1.getBoundingClientRect().y - figure3.getBoundingClientRect().y - // <- fixed figure3.getBoundingClientRect().height) You have a "scroll" event handler that's messing with the CSS properties of header and main which is throwing off ScrollTrigger's calculations when the screen resizes because you're literally shifting things around manually that ScrollTrigger doesn't know about. When those things are fixed, the GSAP/ScrollTrigger stuff seems to work great: See the Pen PojLgKb?editors=0010 by GreenSock (@GreenSock) on CodePen 2 1 Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 Ah, good call. I didn't even check to see if the calculations were being done correctly. 2 Link to comment Share on other sites More sharing options...
.mdl Posted October 1, 2021 Author Share Posted October 1, 2021 @GreenSock Quote You have a "scroll" event handler that's messing with the CSS properties of header and main which is throwing off ScrollTrigger's calculations when the screen resizes because you're literally shifting things around manually that ScrollTrigger doesn't know about. Do I understand correctly that the animation of the "exit" of the header also needs to be done through the gsap? Link to comment Share on other sites More sharing options...
.mdl Posted October 1, 2021 Author Share Posted October 1, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 11 minutes ago, .mdl said: Do I understand correctly that the animation of the "exit" of the header also needs to be done through the gsap? Yep. 7 minutes ago, .mdl said: 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. If it's changing the layout, then you should call ScrollTrigger.refresh() after it loads something. 1 Link to comment Share on other sites More sharing options...
.mdl Posted October 1, 2021 Author Share Posted October 1, 2021 2 minutes ago, OSUblake said: Yep. If it's changing the layout, then you should call ScrollTrigger.refresh() after it loads something. Do I understand correctly that the call should be when initializing the vanilla lazyload? Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 25 minutes ago, .mdl said: Do I understand correctly that the call should be when initializing the vanilla lazyload? You would only need to call if whatever you're loading changes the layout. And I'm not familiar with vanilla lazyload, does it provide callbacks for when something has been loaded? If so, you would call it when whatever you're loading has been loaded and is in the DOM. 1 Link to comment Share on other sites More sharing options...
.mdl Posted October 1, 2021 Author Share Posted October 1, 2021 Thank you very much for the tip, I will figure out how to make plugins friends) Link to comment Share on other sites More sharing options...
.mdl Posted October 10, 2021 Author Share Posted October 10, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now