Jump to content
Search Community

I can't reverse() with a delay of 2 times

qqignatqq test
Moderator Tag

Recommended Posts

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.

Help me please

See the Pen gOzzQVe by accountnujen (@accountnujen) on CodePen

Link to comment
Share on other sites

Hi,

 

This is the simplest approach I can think of for this:

const tl = gsap.timeline({ paused: true })
  .to(".one-box", { y: 20, autoAlpha: 0, duration: 0.25 })
  .to(".two-box", { y: 0, autoAlpha: 1, duration: 0.25 }, 0.15);

document.querySelector(".btn1").addEventListener("click", function (e) {
  tl.play();
});

document.querySelector(".btn2").addEventListener("click", function (e) {
  tl.reverse();
});

Is having both animations in a single timeline an option?

 

The other alternative is to create two timelines, if you have more complex animations, and add those inside another timeline and position them in order to get the sequence you want. Yet another alternative is using a delayed call in order to wait some amount of time to play/reverse another GSAP instance.

 

Let us know if this works for you.

 

Happy Tweening!

Link to comment
Share on other sites

3 hours ago, Rodrigo said:

Is having both animations in a single timeline an option?

 

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

Link to comment
Share on other sites

Ahh... The plot thickens!!! :D

 

Does this works better in the last update of your codepen?

document.querySelector(".btn2").addEventListener("click", function (e) {
  console.log(2);
  showboxtwo.reverse();
  gsap.delayedCall(0.15, () => hideboxone.reverse());
});

Happy Tweening!

Link to comment
Share on other sites

2 hours ago, Rodrigo said:

Ahh... The plot thickens!!! :D

 

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:

See the Pen bGMKrwQ by accountnujen (@accountnujen) on CodePen

 

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"]);         

 

Link to comment
Share on other sites

6 minutes ago, Rodrigo said:

Just use any callback event you want there and it'll work.

 

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

 

Link to comment
Share on other sites

Hi,

 

Sorry I should've been more explicit. The docs links I shared above point to the fact that you can do this:

animate.tweenFromTo("t1", "t3", {
  onStart: txt, onStartParams: ["Wait...", "Gray"],
  onComplete: txt, onCompleteParams: ["Wait...", "Gray"]
});
animate.tweenFromTo("t3", "t5", {
  onStart: txt, onStartParams: ["Success!", "Green"],
  onComplete: txt, onCompleteParams: ["Success!", "Green"]
});

Basically use a regular config object in your setup, even duration and easing as well.

 

Happy Tweening!

Link to comment
Share on other sites

5 minutes ago, Rodrigo said:

Sorry I should've been more explicit. The docs links I shared above point to the fact that you can do this:

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"]);

 

Link to comment
Share on other sites

You don't need the call instance between your tweens:

  .addLabel("t3")
  .to(".two-box", 0.25, { y: 30, autoAlpha: 0 }) // hide BOX
  .to(".two-box", 0.25, { y: 0, autoAlpha: 1 }) // show BOX
  .addLabel("t5");

Adding the onStart and onComplete callbacks in the previous example was just to show you that in a tweenFromTo instance you can add basically the same configuration object you add in a regular tween (check the docs). What you add in there should depend on the specific setup you have.

 

Now considering the need to update the code after a specific animation, I do believe that you should keep the call instance in your timeline and create a specific callback for each text-change situation so those functions can grab the parameters you need on a specific moment:

// You can update these whenever you want
const params = {
  text: "Wait...",
  color: "#687388",
};

const txt = () => {
  //Here use params.text and params.color
};

const tl = gsap.timeline({ paused: true })
  .addLabel("t1")
  .to(".one-box", 0.25, { y: 30, autoAlpha: 0 })
  .call(txt)
  .to(".two-box", 0.25, { y: 0, autoAlpha: 1 })
  .addLabel("t3")
  .to(".two-box", 0.25, { y: 30, autoAlpha: 0 })
  .call(txt)
  .to(".two-box", 0.25, { y: 0, autoAlpha: 1 })
  .addLabel("t5");

And just use tweenFromTo without any configuration object, just indicating the labels.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

On 10/4/2022 at 11:49 PM, Rodrigo said:

Now considering the need to update the code after a specific animation, I do believe that you should keep the call instance in your timeline and create a specific callback for each text-change situation so those functions can grab the parameters you need on a specific moment:

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...