DanielLav

Okay, got it. In any way thank you for useful links ?

Hello GSAP family! I don’t know if it’s customary to write this here, but I was very interested in the effect of the appearance of squares in the background when the cursor moves. I found an example of it on this site: https://thisisdash.com/ I really like how they do it. They use canvas to draw squares and when you hover over a square, it is filled with colors and some random number of adjacent squares (maybe one or 2-3, this is random) are also filled. They also track the position of the cursor and possibly the position of the square to see if the cursor is hovering over the square (because they are at different z-index levels). I'm very curious if it's possible to do this with GSAP? Because I think that GSAP is capable of almost everything in 2d animation. ? If it is possible to do that, can you share the solution for me to study it? Or tell me where to start

Hello! I'm trying to implement confetti effect made with gsap to my project ? The problem is that when changing the window width / orientation, I need the width and height of the container where the confetti is located to be recalculated. I tried to implement this with a timeline (instead of the usual gsap), but I couldn't do it because the Random property was removed from gsap version 3 (at least that's what my PhpStorm says). Here is link to my codepen with code: https://codepen.io/ProjectDCL/pen/ZEmKyPq How can I implement a confetti animation that will adjust to the width of the user's window and that can be turned off by itself (for example, by clicking on a button)? Many thanks in advance for your advice and help. I believe that the GSAP team, as always, will come to the rescue

Good, thank you! It really works. Sorry for not looking at this from the css side. ? Sometimes such easy solutions are not visible.

I want the "close" icon to only appear at a width of 0-767. Now this one works like that, but as soon as I resize to a width of 767+, my "close" icon disappears and no longer appears when I resize to a width of 0-767 again.

Hello! Actually your solution is simple and works. But in my real project, I have about 15 changes to my timeline and the media query is only associated with the appearance of the "close" icon. So it doesn't really suit me. Perhaps you have other ideas how to make my functionality? Sorry for asking a lot of questions, but for me this is important and interesting

Hello! Sorry for the long answer. Yes, your solution works. But it works on click and restarts the entire animation. How can I make it only fire the tl part inside the matchMedia and when changing the width from 767 and vice versa? Why do I need it. The fact is that on my real site the "close" icon appears on mobile devices and I need it to be displayed on devices when resizing and returning back.

Hello! I have found that my GSAP code does not work as expected when I use the matchMedia parameter. The fact is that if I add an animation position (for example, in my case '<') when resizing when the window width is greater than 767, my square disappears (which is correct, because the condition is not met). But as soon as I return the width of the window and it becomes less than 767, the red square does not reappear. At what this error is observed only if I specify the position of the animation, for example '<'). It's pretty interesting. Can you please tell me if this is a bug or how can I use the position in my timeline and the matchMedia value at the same time? Really looking forward to your reply. Link to my codepen: https://codepen.io/ProjectDCL/pen/PoxNZwq

Hello dear GSAP community! ? Today, for educational purposes, I'm dealing with the topic of parallax and I want to do one simple idea using gsap. There is only one background in my univesity project. My idea is that during scrolling the background "shifts" in height not significantly when you scroll. This effect should work while scrolling throughout the page, not just at the beginning. Thus creating a simple parallax effect. I took the sample code from my parallax demo, but damn it doesn't want to work. And I don't think I understand how parallaxes work at all. Therefore, I will be glad to any help from you and good advice. The task seems easy, but for some reason I got stuck on it. I also attach small codepen example, that you can check: https://codepen.io/ProjectDCL/pen/OJorPBj Thank you very much for any help in advance!

Oh yeah! This is exactly what I was looking for. And damn, I couldn't see it in the documentation when I was looking for a solution. And if I want to assign the defaults value only for the gsap animation that is running in this place, do I need to use only a timeline? Is there any way I can't do it NON-globally for gsap?

Hello GSAP community! I'm learning about GSAP and came across a simple problem in my study project. I made an effect in which when hovering over an element, it gets scale: 1.1, and the rest get opacity: .4 and scale: .8 But I want to make it so that when the cursor leaves the element that was hovered over, there is a delay during which if the person has time to hover over another, there will be no return to the properties: gsap.to(othersItem, { scale: 1, opacity: 1, clearProps: "scale" }) If you now try to move the cursor from the active element to any other element with opacity, you will encounter the fact that at the moment when the cursor is not on the active element there will be a slight "twitch" of all elements. This is due to the fact that the mouseleave property is triggered. I hope I explained my problem clearly. If you have any questions I will be happy to answer them. And I will be very glad if you help me. I'm sure I'm on the right track I also attach my codepen with this problem here: https://codepen.io/ProjectDCL/pen/OJowYvJ

Yes, I already done with that. Just take you logic and implement in 1/3 of the screen. One thing that I change - I set .play() instead .restart()

Hello GSAP family! I have a very interesting problem with which I hope you can help me. I have 5 elements category-capsule__item that I want to first show in the center (one after the other in the same place) and then return them to their original position. You can see how I try to do this in my codepen: https://codepen.io/ProjectDCL/pen/KKxXVYL And after the animation completes, I want to give the elements a scale value when hovering over them. I'm trying to do it via position absolute and position: position: "absolute", xPercent:-50, yPercent:-50, left:"50%", top:"50%" And then I position the elements through the left: 0 property. But this is a "crutch". Because in this case, I will have to position each element with absolute positioning and there will obviously be problems during adaptivity (because eventually I will have to change the position of the elements and make them two in a row). I am sure that GSAP has some simple solution for my problem. Perhaps you could help me? I've been thinking about how to do this for two days now. And to be honest already desperate

Thanks for the quick response! Your idea works well, but on top of my backgrounds there will be other content (text, some pictures) and that content will have a z-index larger to be clickable. With this approach, I simply won’t be able to hover over the block area that I need. I will attach screenshot of what my page should look (with backgrounds) Therefore, I am attached to tracking the position of the cursor. Your animation certainly works more predictably, but I don't know how to adapt it to my task. Do you have any ideas how to make this when I have content with higher z-index?

Hello dear GSAP community. I want to create an effect where we follow the user's cursor and actually split the screen into 3 equal parts in width. If the user is on the left side, we show him one background, if the second is in the center, and if on the right, then the third. I wrote a small script that keeps track of the position of the cursor each time and performs an animation. Also I try to appropriate at this moment value GSAP to. But I am facing three problems. 1) gsap animation is performed on every mouse movement (and I want the background to appear when the user has moved to a certain part of the screen and disappear when he leaves it). And then it appeared again when hovering again (without the flickering effect). 2) If you stop at one of the backgrounds, then for some reason another background may appear at that moment 3) Initially, I want to set all backgrounds to autoAlpha: 0 (in function hiddenThreeBG(), but then on the first hover, all backgrounds are visible for 1 second. I think that there is a mistake in just 1 or 2 places. I want to know where. I would be extremely grateful for any help from each of you. https://codepen.io/ProjectDCL/pen/ZEMJPao