Jump to content
Search Community

Save values, animate and reverse to saved vaules

ZajeliMiGuzik test
Moderator Tag

Recommended Posts

Hello GreenSock community!

Is there any way to save values before animation is started?
I want to make animation start when click the button and reverse back to (saved) values when click again.

Currently i just have correct visual effect but something destroy my margins. I can't find any solution that will work for me.

See the Pen MWKMQGZ by Baracode (@Baracode) on CodePen

Link to comment
Share on other sites

Yes you can create a timeline and set its initial option with paused as true. Then on click you can play that animation and on another click reverse the animation using some variable which will determine if the menu is opened or closed.

 

const menu_tl= gsap.timeline({pasued: true})

menu_tl.to(menu, {duration:0.5, xPercent:100})

// Further tweens ....;

 

const isOpen = false;

const btn = document.getElementById('menu-btn');

btn.addEventListener('click', ()=> {

 if isOpen {

  menu_tl.reverse();

   isOpen = false;

 }

 else {

  menu_tl.play();

   isOpen = true;

 }

});

 

 

Link to comment
Share on other sites

Hey ZajeliMiGuzik and welcome to the GreenSock forums. 

 

I think you'd greatly benefit from reading the most common GSAP mistakes article as you made a few of them :) 

 

 

1 hour ago, ZajeliMiGuzik said:

I don't know why in codepen button wont animate back. 

That's because you have multiple errors in your code. The first is this:

// Invalid
if isOpen {

// Valid
if (isOpen) {

You can use the developer tools console (F12) to fix errors like that and the others that it gives.

 

It's not clear what sort of animation you're wanting or what the issue is in the above demo that you provided due to the errors. I encourage you to fix the errors then let us know so that we can take a look again.

  • Like 2
Link to comment
Share on other sites

 

2 hours ago, ZachSaucier said:

That's because you have multiple errors in your code. The first is this:


// Invalid
if isOpen {

// Valid
if (isOpen) {

Oh! That's the code I suggested to him. Actually, I often switch between python and js, that was a silly mistake. And he had an example codepen demo but deleted it later.

Link to comment
Share on other sites

1 hour ago, ZajeliMiGuzik said:

As You can se when we open and close menu, hit refresh page my icon is not at the same starting position.

It is because you are not animating it (#menuTBar, #menuBBar) back to the original position as when it was freshly loaded, instead it moves slightly downwards in the else part.

Link to comment
Share on other sites

33 minutes ago, anshul said:

It is because you are not animating it (#menuTBar, #menuBBar) back to the original position as when it was freshly loaded, instead it moves slightly downwards in the else part.

Sure, that was I already notices nad where my question comes from. I don't know the way to store values from start > animate to others > and then backward to stored values.

Link to comment
Share on other sites

On 7/31/2020 at 3:18 PM, ZachSaucier said:

Hey Zajeli. Please create a minimal demo on CodePen with all extra parts stripped out if you'd like our help debugging. It's pretty hard for us to figure out what's going wrong on a live site that we can't edit ourselves.

 


Sorry for some late. I'm already updated my post with working CodePen demo.

Link to comment
Share on other sites

@ZajeliMiGuzik You could make several improvements to your code. As it is, you're using the old syntax and the timing is messed up if people click quickly right after another. Here's how I'd write it:

const anim = gsap.timeline({defaults: {ease: "power4.inOut"}, paused: true})
  .to(menuTBar, {y: 3.1, x: -0.4, rotation: -45})
  .to(menuBBar, {y: -3, x: 0.4, rotation: 45}, 0);

button.addEventListener("click", function() {
  if (button.value === "") {
    anim.play();
    button.value = "opened";
  } else {
    anim.reverse();
    button.value = "";
  }
});

Many of these changes are covered in our most common GSAP mistakes article:

Some other are covered in my article on animating efficiently.

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...