Blink. Reverse animation go to final frame and return.
See original GitHub issueHi:
I have this code:
<div style="background-color: black; position: absolute; width: 100px; height: 100px;"></div>
<script>
var div = document.querySelector('div');
var animacion = anime({
targets: div,
opacity: [0,1],
duration: 2000,
easing: 'linear',
begin: function(anim) {
console.log('begin');
if (anim.direction === 'normal') {
div.style.display = 'block';
}
},
complete: function(anim) {
console.log('complete');
if (anim.direction === 'reverse') {
div.style.display = 'none';
}
}
});
</script>
If enter to the page and let animation end, then execute the backward function, the element blink. That happends rarely. For example, when the window explorer is maximized, happen, but when is small, not.
Thanks.
Here a GIF: https://drive.google.com/file/d/1Xd7rSGrlaLlFE3xNOJqJWzR_MRp0-IBw/view?usp=sharing
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Reverse or Rewind Timeline Animations Flash Tutorial
Learn how to script reverse animations or manually reverse them in Flash CS3, CS4, CS5, or CS8000. This ActionScript 3.0 trick may save...
Read more >Playing frames in reverse - Animate - Adobe Support Community
Select the range of frames/layers again, right click and select "Reverse Frames". Now you have a mirror "image" of your initial animation.
Read more >How can I play my animation in reverse on hover in Adobe ...
Select all animation frames from timeline, then cut & paste inside the new MClip (do this by double-clicking it to edit the MClip,...
Read more >How to Play Reverse Frames Flash on AS3 - Synonym
Position your mouse cursor over "Frame 1," then click your left mouse button to select Frame 1. Press the "F9" key on your...
Read more >An Interactive Guide to CSS Transitions - Josh W Comeau
Try scrubbing with the timeline; notice how drastic the movement is in the first few frames, and how subtle it becomes towards the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I had the same issue. A simple workaround that worked in my case, is to set
animation.completed = false;
before callinganimation.play();
again. That preventsanimation.reset()
from being called insideanimation.play()
. For example:then when you want to play it backwards:
This has the side effect of prevent the
begin
callback from firing on the reverse play, but in my case I could use thechangeBegin
callback instead. It may cause other side effects so your mileage may vary. I think the ideal fix is probably @jnordberg’s PR above.Fixed in v3.1.0!