qqignatqq

I tried to change the class to a variable to pass it, but for some reason the first animation doesn't work correctly. I purposely slowed it down to get a better idea of what's going on. The subsequent clicks work fine. Can you tell me what this has to do with and how to fix it? https://codepen.io/accountnujen/pen/dyeqaem

What if I need to animate a list of objects with the class "error", but they just got that class? To clarify. I have a form. It is sent to the server. If the data didn't pass validation, I get a list of input names returned. I need to animate their parents. What do I do with selecting an animated object if it doesn't already exist? I thought I could assign a .error class, issue it to everyone, and then animate it, but if the object doesn't have a class when the page loads, it won't be animated. How to solve this problem? https://codepen.io/accountnujen/pen/yLjxprd

Thank you! I did this: txtdat = ["Success", "Green"]; animate.tweenFromTo("t3", "t5"); I mistakenly thought I should put the data in the gsap method.

Yes, you don't understand me completely. Let's look straight to the second BOX. For example we have at the beginning of the animation the text "Wait...". Action one: the BOX goes down as soon as it disappears from view. Action two: the text on it changes. Action three: it appears again, but with the text "Success". If I do onStart and onComplete, the text changes first, then the BOX goes down and comes back up. The problem is that the user should not see the text change, but with the onStart parameter he sees it, because this is where the animation starts. So I was trying to find a way to pass the parameter not in onStart or onComplete, but specifically in .call(). ... .addLabel("t3") .to(".two-box", 0.25, { y: 30, autoAlpha: 0 }) // hide BOX .call(txt, [param1, param2]) // change text .to(".two-box", 0.25, { y: 0, autoAlpha: 1 }) // show BOX .addLabel("t5"); ... animate.tweenFromTo("t3", "t5", {send param to call(): ["Wait...", "Gray"]);

You must have misunderstood me. At the time of the timeline announcement, I don't yet know exactly what text will be written and what the background will be. That is, I want to define the data at the moment when I call tweenFromTo and pass it to the timeline. If I write .call(txt, [param1, param2]) then js will return me an error because these variables are not declared. I can of course declare them as null, but I don't know how I can pass values for them from tweenFromTo? onStart doesn't fit because I need the old text at the beginning of the segment, onComplete doesn't fit either because the change happens between two animations, not at the end of the animation. And there doesn't seem to be anything else that fits. Or I don't understand what you mean

It's going to get better.) I took a look and decided to go the other way, which you have led me to do. I made one general animation and through tweenFromTo animate the individual parts, but I had an issue with the text. Tell me if there is any way to set variables in timeline and then pass them through tweenFromTo. See what I did: https://codepen.io/accountnujen/pen/bGMKrwQ I have a text replacement happening after the box-one leaves. Is there any way to specify this text in the tweenFromTo itself. That is, I want to get something like this: let animate = gsap .timeline({ paused: true }) .addLabel("t1") .to(".one-box", 0.25, { y: 30, autoAlpha: 0 }) .call(txt, [myparam1, myparam2]) .to(".two-box", 0.25, { y: 0, autoAlpha: 1 }) ........ animate.tweenFromTo("t1", "t3", {[myparam1 = "Wait...", myparam2 = "Gray"]); .... animate.tweenFromTo("t3", "t5", {[myparam1 = "Success!", myparam2 = "Green"]);

I updated my example and added the Animate button. This is what I need to get. I'm just not sure it can all fit in one timeline. For a better understanding, I added a rounding at box-two. That is, box-one disappears and then box-two animates (disappears and reappears with new messages) and then box-one reappears at the end. I tried to do this one via label, but it didn't work. Basically, I can make a separate animation to replace "box-one" with "box-two", then an animation to update "box-two", and at the end an animation to replace "box-two" with "box-one". But I thought I could fit it all into two animations: disappearing and appearing

I have 2 separate animations for hiding and appearing. I don't want them to overlap when they appear, so I need the first block to appear after 0.15 seconds when I return. I prescribed the following code:.reverse(true, 0).delay(0.15); And it works, but only 1 time. The second time it overlaps for some reason. You need to press the buttons: show -> hide ->show -> hide. https://codepen.io/accountnujen/pen/gOzzQVe Help me please

https://disk.yandex.ru/i/QHUxuwHmkLsneg Thanks for your help, but I managed to break both buttons

Hello. I have a function that animates a button to add an item to cart. If the user has not selected the color of the item, the button will be animated. The problem is that there are multiple buttons on the page and I can't use tween.restart() because I can't pass in restart() the button that needs to be restarted. If I use the animation directly in function(elem) {gsap.to.....}, then the animation breaks when I double click (on the second click when the animation hasn't finished yet). Try a quick double click on the "add to cart" button. https://jsfiddle.net/6c3ok48e/4/ If there was a version of the code where I do this: let tween = gsap.timeline() .to(:obj,0.15, {scale:0.5, opacity: 0}).... tween.restart({obj:this}) then maybe this problem wouldn't have happened. I understand that this problem is caused by overwriting the animation. Can you tell me if there is any way to solve this problem?

more than enough. Thank you! You have no idea what kind of face I was sitting with when I saw this strange animation behavior.

Apparently I found a bug. It's really, really weird. So weird that I doubt it's even a bug. I tried to find a mention of this bug on Google, but I found nothing. SO... I actually recorded this bug on video: https://disk.yandex.ru/i/auE3Yt8DiGK57g but here is the text version: If you specify a font size of 2.8vw (in other sizes it happens too, but with a different probability) and a screen width of 600px, the 'y:0' animation will be executed as 'transform: translate(0%, -50%)' Here's the code https://jsfiddle.net/fLno0mq3/ How can this be?

Hello. On low screen resolutions I will have a completely different header, so I don't need the scrollTrigger animation. I understand that I have to write conditions in "onRefresh", but I don't understand what exactly I have to write there. If I make disable(), then I can't make enable() because there's nowhere to do it. Here is code: https://jsfiddle.net/3dm1xnp5/

Cool. Last question: Tell me, how much better is the first option than the second? // first let tl = gsap.timeline({paused: true, repeat: 1,yoyo: true,repeatDelay: 1}) .to(msg, 0.25, {autoAlpha: 1,y: -40,ease: Expo.inOut}, "<"); function showMsg(message) { msg.innerText = message; tl.restart(); } //second function showMsg(message) { msg.innerText = message; gsap.timeline({repeat: 1,yoyo: true,repeatDelay: 1}) .to(msg, 0.25, {autoAlpha: 1,y: -40,ease: Expo.inOut}, "<"); } Or do they put the same load on the system? The first one is declared and restarted, and the second animation is prescribed immediately in the function and repeated.

ok. If I want to make a universal animation and animate different objects with it, how do I do that? function animate(elem) { gsap.timeline({ease: "power1.inOut",repeat: 1,yoyo: true,repeatDelay: 3}) .to(elem, { opacity: 0, scale: 0.5, transformOrigin: "center", duration: 0.3 }) .set(elem, { text: { value: "ДОБАВЛЕНО", delimeter: " " } }) .to(elem, { opacity: 1, scale: 1, transformOrigin: "center", duration: 0.3 }, "<") } I just assumed that it would be convenient to do it this way: declare a "tween" and pass in Restart() (or another action) the object to be animated. I mean something like this: const tl = gsap.timeline({ease: "power1.inOut",paused: true,repeat: 1,yoyo: true,repeatDelay: 3}) .to(?, { opacity: 0, scale: 0.5, transformOrigin: "center", duration: 0.3 }) .set(?, { text: { value: "ДОБАВЛЕНО", delimeter: " " } }) .to(?, { opacity: 1, scale: 1, transformOrigin: "center", duration: 0.3 }); tl.restart({object: ".target"}); p.s. And thank you so much for the solution. I had completely forgotten about the ".set".