question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blink. Reverse animation go to final frame and return.

See original GitHub issue

Hi:

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:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
braamgeniscommented, Mar 18, 2019

I had the same issue. A simple workaround that worked in my case, is to set animation.completed = false; before calling animation.play(); again. That prevents animation.reset() from being called inside animation.play(). For example:

var animation = anime({
    targets: '.animated-item',
    easing = 'linear',
    opacity: [ 0, 1 ],
});
animation.play();

then when you want to play it backwards:

animation.reverse();
animation.completed = false;
animation.play();

This has the side effect of prevent the begin callback from firing on the reverse play, but in my case I could use the changeBegin callback instead. It may cause other side effects so your mileage may vary. I think the ideal fix is probably @jnordberg’s PR above.

4reactions
juliangarniercommented, Jul 25, 2019

Fixed in v3.1.0!

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found