Default to 'animation-fill-mode: none'

[97Yates05]

What I mean by that is that an element cannot return to its original position after the animation is over.The alternate option also animates once on return. For example, after moving 50px to the left, I need the element to return to its original position immediately, which I can only do manually in the Complete callback.

[cameralibre]

@97Yates05 There isn't enough information in this issue for others to provide you much help.

Please fill in the prompts in the body text of your issue to make it easier, (eg: A clear and concise description of what the problem is.)

Anime.js almost certainly can do whatever it is you're trying to do. You can read the anime.js documentation for help (it sounds like you want to set direction: alternate)

Documentation: Animation Parameters

[97Yates05]

@cameralibre The problem has been updated, please pay attention.The sample code is as follows

anime({
  target: '#element', 
  translateY:50px,
  duration:1500,
  complete:()=>{
    anime.set({
       translateY:0,
    });
  }
})

[cameralibre]

That information is a lot more useful, thanks.

An alternative could be to use keyframes rather than using a callback:

anime({
  targets: '#element', 
  keyframes: [
      { translateY: '50px',  duration: 1500 },
      { translateY: '0',  duration: 0 }
  ]
})

see also codepen version

But it sounds like you are making a feature request for anime to provide an option like CSS' animation-fill-mode - is that right?

[97Yates05]

Yes, I expect the animation-fill-mode property to be none.Animejs, however, are all forward by default.

[cameralibre]

So there are two things you're suggesting:

1. Provide an animationFillMode option
2. Make animationFillMode: none the default in anime.js

The first seems feasible, though you'll need to explain more clearly in what contexts setting an animationFillMode option is preferable or necessary, rather than using the 'manual' approaches we listed above.

As for the second suggestion, (making none the default), it might be difficult to convince people - personally, I like animation-fill-mode being set to forwards, as I predominantly use anime.js for timelines. (But I don't develop anime, so I'm not someone you need to convince 🙂️) Again, you'll need to provide context and clear examples of why it should be that way.

In order to make it clearer to people developing anime.js, I would also suggest editing the title of this issue to something like Default to 'animation-fill-mode: none'. The current title, 'Why don't element go back to the original place after animation? Isn't that normal behavior' makes the issue sound like a usage problem rather than a feature request.