Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Reversing" a reveal animation #2

Open
gillesdm opened this issue Jan 13, 2020 · 1 comment
Open

"Reversing" a reveal animation #2

gillesdm opened this issue Jan 13, 2020 · 1 comment

Comments

@gillesdm
Copy link

I can't seem to figure out how to "reverse" an animation.
Currently, I am trying to use this to open and close a full-screen menu. Opening it works perfectly fine, but creating a second RevealFx with reversed properties breaks the whole thing. (I don't get any errors, but the menu would not open anymore).

I was wondering if there was a way to do the same animation, but in reverse.

main.js:

var mainMenu = document.querySelector("#main-menu");

  var menuOpenReveal = new RevealFx(mainMenu, {
    layers: 1,
    isContentHidden: true,
    revealSettings: {
      bgColors: ["#1B1C21"],
      duration: 600,
      delay: 0,
      easing: "easeInOutExpo",
      direction: "bt",
      onStart: function(contentEl, revealerEl) {
        contentEl.style.opacity = 0;
      },
      onHalfway: function(contentEl, revealerEl) {
        contentEl.style.opacity = 1;
      }
    }
  });

I run the menuOpenReveal.reveal() on click of a button in my header.

Thanks for the library by the way, really love how good and smooth it is! ❤️

@akhil0001
Copy link
Owner

Hey @gillesdm , sorry for late reply and thanks for your kind words.
Will start looking into the issue and get back to you on this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants