qqignatqq

Bug. It's not always the cursor that appears. https://yadi.sk/i/ej_YxD89eVx-xg

Hello. I'm using a small script to change the cursor. Tell me how to make that after refreshing the page, the cursor is set to the previous position. I assumed could use a cookie, but it didn't work out. This line just interrupts my code: gsap.ticker.add(update); https://jsfiddle.net/79pyjgsb/2/

ok... backdropFilter: "blur(10px)",

Hello. Tell me, is it possible to animate the background with gsap backdrop-filter: blur?

I was sitting there trying to figure it out, but as it turned out))) Really, it is. The last block is block 8, but the next block is block 9, i.e. 8+1. Thank you!

I just exaggerated to make it clearer, but on the contrary, it turned out that you didn't understand))) See: https://jsfiddle.net/1pqdnm9c/ After pressing the button, the animation will start only after 1.5 seconds.

Thank you, ZachSaucier!!! How to remove the delay at the very beginning of the animation? If you set "Stagger" to 5, the animation will start after 5 seconds. Is it possible to remove this delay?

Hello. I wanted to make sure that the new blocks appear alternately, where each block appears before the previous one's animation ends. Or did I misunderstand the work of "stagger"? I either get the blocks to appear at the same time or after the previous block's animation is over. https://jsfiddle.net/onhmy1st/4/

Hello. In addition to the animation, I want to add a style property for the class: "pointer-events: none". I did it like this: gsap.to(document.querySelector('.contfeed'),{duration:0.5, opacity:0.1, onComplete:function() {document.querySelector('.contfeed').style.pointerEvents = "none";} }) It works, but I wanted to ask, is this the right decision?

Thank you so much!

I tried both js and css animate. In both cases, the second circle makes a very large circle. You need to hover and wait a little bit. At some point you will see it https://jsfiddle.net/a7zge5mh/

Hello. https://jsfiddle.net/sh6kbv1u/2/ I'm making you my cursor. You need to start rotating around your axis when you hover the circle "C2" (dotted line). When I do a transform rotate, it starts to rotate around the reference point, and changing the transform-origin does not help.

Thanks to Mikel, but I had a little different. Here's how it's done with me. When you move the mouse, the XY position changes: https://jsfiddle.net/6q0dgp28/

Thank you so much for the hint, but I'm not going to be able to use this option, because I also animate X and Y in addition to Scale when I move the mouse. In any case, thank you. I used your decision in another part of the code, it helped me a lot. I have a question. Is there any way you can use it for the whole function "overwrite:true" and for a certain part "overwrite:false". I'm asking because I stopped working on this piece of code: https://jsfiddle.net/2b9fgxL0/ . Opacity doesn't work for some reason... If overwrite is removed, everything will be fine.

Hello. After the update began to work strange animation. When pointing at a block, the image should approach, and when the mouse is removed - it should take its original position, but for some reason in the new gsap it does not work. OlD: https://jsfiddle.net/v07h348a/ NEW: https://jsfiddle.net/ads2v47q/

Thank you so much for your help! You have helped me very much! I will use your example from jsfidddle. By the way, congratulations on your 1000 likes! Mine was a thousand))))

Hello. How to make the animation run without waiting for the end of the previous animation? I want to do my own animation as I scroll through the page and I need the blocks to appear alternately. Here is my code:https://jsfiddle.net/h7qp5m64/1/ I thought that if I prescribed a negative start to the animation, it would work the way it should, but I didn't really get it right. In the beginning the animation goes very quickly. To see how it should work, you need to quickly scroll down the page and then there will be a normal animation.

document.querySelectorAll(".anyclass")[2] ?

If there are several identical classes, can we refer to, for example, the third one? <div class="anyclass">NOT THIS</div> <div class="anyclass">NOT THIS</div> <div class="anyclass">---THIS---</div> <div class="anyclass">NOT THIS</div>

Don't you see the video I'm sending you? At the very top of the page the distance is very small and at the bottom of the page the distance is very large. Here is another new video: https://yadi.sk/i/zPXV5W1SjKz9ZA

Do not confuse speed with distance. They run different distances. If I prescribe this code you gave me, nothing will change.

Thank you. I noticed, but I still don't understand how to work with it?

Mikel, there's a very strange scrolling operation. At the very beginning of the page the scroll step is very small (~20px), and at the bottom of the page the step is very big (~100px). Here is the video: https://yadi.sk/i/VMIafj2PByExRw

If the file has ever been downloaded, yes: it will be cached and will not be downloaded twice. But if earlier this file in a cache was not present, it will be downloaded 2 times. StackOverlow won't help me, because it's a gsap question. There are a lot of users in the world who don't have tweenmax in their cache and they will have to download it twice. With jquery, the problem was solved and I showed the code to solve the problem from the first post. How to do the same for tweenmax? Translated with www.DeepL.com/Translator

No, I don't use a CDN. I download the scripts I need and place them on my hosting via <script src="js/jquery-3.2.1.min.js"></script>. On the screen you can see that the TweenMax.min.js file was downloaded 2 times. Even if I use the CDN, the file (if it hasn't been in the cache before) is downloaded twice.