AlenN

Since I don't have any experience with Stackblitz yet, I'll try to upload my forked project here. As I said, my problem is that after loading the page for the first time everything works great, but then when I scroll down and load the page again, only half of my black SVG animation is visible, so the rest of the page is visible again and when I reload it the animation doesn't look like it did the first time. https://stackblitz.com/edit/stackblitz-starters-1gkut7

First of all, thank you for the improvement. That solved most of my problem. However, I would like the magnetic effect to really happen like the site www.deveb.co. So very smooth. In my code, when you leave the button, the magnetic effect is now moved backwards elastically. However, on the Deveb page it is very smooth and the button returns to its original shape without any elastic effect when you exit. It also seems to me that the button moves too much to the left and right when hovering. How can I achieve this? And my second question would be, how do I get the button to completely fill on hover. my second button is only half filled.

Hello community, I have a question: how can I get my buttons to act magnetically when hovering and move so smoothly. I would also like my field to be filled by the button when hovering. As a reference I have the buttons from the site https://deveb.co/ . Can someone please tell me how I can do this hovering with the magnetic and filling effect. I've managed to do this so far, but it doesn't look anything like the page above. In addition, only the upper right field can be moved somewhat magnetically. The field below is only filled... https://codepen.io/alen95/pen/Yzggaqp

Hello and thank you for the answers. I have now implemented the tips and now have the following problem: when I load the page for the first time, everything works great. However, when I refresh the page you can see the black border of the animation at the bottom. Apparently the page slides down after the first access and stays there when updated. Unfortunately you can't see this using codepen, which is why I'm attaching a picture. how can I fix this? Also, is there a way to improve the choppy insertion of the sidebar after the animation? I also provide my current codepen code. https://codepen.io/alen95/pen/jOJJaRj

Thank you very much for the responses. Especially the last one helped me in my case. What happens with the ‘oncomplete call’ if I now add more animations that should only load later during scrolling or after the transition? So, what is the function of the ‘oncomplete call’? Will it happen after all animations, including those shown, or only after these shown ones, and the remaining ones I add will start after the ‘oncomplete call’? Thanks.

First of all, thank you very much for the quick answer. I just tried "overflow-x: hidden", but this doesn't serve my purpose. I don't want you to be able to scroll down until the preload transition is completed. Is there a way to switch the overflow to visible after the animation using GSAP? The second answer would be more helpful to me, but since I'm relatively new to the topic, I'm wondering how is it actually common to design such preload transitions? or do they usually already have the body visible?

hello, i am new here and a beginner in gsap. I would like to create a preload on my page, which appears when the page loads and then my entire website is displayed. At the end I will add animations to the individual sections or divs again. My question relates to how I create this animation so that my website is then displayed. So far I've only managed to get "welcome" to appear after the animation. I can't scroll down...