animate-css
Make backout exits and entrances use a variable
Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Currently the backout exits use hardcoded pixel translations. This has 2 drawbacks:
- It won't work for very large resolutions
- It creates a time gap between the
animationendevent and the UX of when the animation ends for smaller elements.
Consider I have an element of fixed width 500px, inside it I slide an element to the left, it will be translated to -2000px. The first 20% of the animation time is spent on scaling, after that the remaining 80% is spent on moving the item. This means that after 0.2 seconds of movement the item is no longer visible (overflow hidden).
Suppose when the animation ends I want to start another animation, like something sliding in from the right, this will start very late because half of both animations are not visible
Describe the solution you'd like A clear and concise description of what you want to happen.
- Configure the pixel values using variables so that they can be overridden.
- Default to using viewport relative units so that it'll work on large resolutions. (this is optional and not strictly related, just something I noticed when reviewing the source code)
Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.
Current alternative is to use setInterval to trigger the next animation early and remove the previous element mid animation.
Additional context Add any other context or screenshots about the feature request here.
I'm happy to make a PR.
Nope, turns out priorities changed and I forgot about this one...
Let us know if you still want to PR so we can work on it. I'm gonna be free in the next few weeks.
Please go ahead then! Thanks I'm advance 😊
Thanks, will add this on v5 🚀