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

Feature request: opening and closing animation options #5

Closed
ajmeese7 opened this issue Aug 31, 2019 · 3 comments
Closed

Feature request: opening and closing animation options #5

ajmeese7 opened this issue Aug 31, 2019 · 3 comments
Labels
enhancement New feature or request

Comments

@ajmeese7
Copy link
Contributor

It would be neat if there could be things like sliding in from the right, left, top, and bottom for opening then sliding out for closing. Basically something like this but with options instead of the one preset method.

It could be implemented with an openingAnimation and closingAnimation option, with things like slideInLeft and possibly an option for timings, making it an object parameter like openingAnimation= { animation: "slideInLeft", time: 400 } with a default amount like 400. The default could be fadeIn for openingAnimation and fadeOut for closingAnimation.

I have already implemented a small version of this in my project, where I replaced the code of @keyframes insert-right with the following to make it actually insert from the bottom:

from {
    transform: rotateX(-70deg);
    transform-origin: bottom;
}
to {
    transform: rotateX(0deg);
    transform-origin: bottom;
}

If there was official support for this, it would make customization much easier. This actually ties in with my next issue I will create. Don't hesitate to clarify any confusions, I know this is a lot in one issue.

@Glagan
Copy link
Owner

Glagan commented Aug 31, 2019

I made a todo list locally and it was on my list, adding more animations and even custom animations.
I don't know exactly how to do it right now, since my current implementation is not that great but I will look into it :)

@Glagan Glagan added the enhancement New feature or request label Sep 1, 2019
Glagan added a commit that referenced this issue Sep 3, 2019
Added animations usable with the new option
Renamed closeFadeout to closeAnimated to reflect the last changes
Delete functions that where being called once
@Glagan
Copy link
Owner

Glagan commented Sep 3, 2019

I added an insertAnimation and removeAnimation option, they are kind of simple but do the work.
By simple I mean it won't be as fancy as your example, which has delayed animations.

The library is tied to the animationEnd event, that's why I didn't look to add delayed animations, I don't know how It would works.
Still, you can try for yourself in the live demo or in the videos I will put in the release.

If you want the library to be able to have more complex animation like your example, just tell me and i'll look at what I can do, it would be good to have such nice animations :)

@ajmeese7
Copy link
Contributor Author

ajmeese7 commented Sep 5, 2019

Haven't messed with it yet but I'm about to. Looks pretty damn good to me! Love the release clips. Thanks for the excellent project maintenance. I leave in a few days but I wish you the best of luck in the future until I am back at a computer to bug you with more requests ;)

@ajmeese7 ajmeese7 closed this as completed Sep 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants