Update function combined with timeline?

[AndrewDubya]

From the docs that I've read, it sounds like setting the update function in a timeline animation sets it globally for the Anime instance. Is that correct?

I want to add custom code (such as setting display: none/block, or in the future, setting filters, etc) to some animations in a complex timeline, but when I've tried adding a custom update function, it didn't seem to work that way.

Is there a way to apply custom js to a timeline animation? Or would it be easy for me to write some custom code to do this?

Example of what I'd like to do:

timeline.add({
  el: some_element,
  easing: 'linear',
  color: '#ff0000',
  start: 0,
  end: 1,
  update: (val, el) => {
    if (val <= 0) el.style.display = 'none';
    else el.style.display = 'block';
  },
}, 1500);

[juliangarnier]

Hard to give you a more precise answer but here is how update functions should works in a timeline:

Update function defined in anime.timeline({ update: () => {} }); will be triggered on every tick until all the animations of the timeline have finished playing.

Update function defined in anime.timeline().add({ update: () => {} }); should will be triggered on every tick of the current animation (like in your exemple).

[AndrewDubya]

Cool, I think that's all I need to implement the features that I want.

Quick question: Is it called if users are seeking around it?

I'm building a designer app, so there's a good chance that (for example) the display hidden/block will be triggered at 5s-6s, and a user might seek from 8s to 1s, which means the timeline won't tick through that time period.

Sorry if that isn't clear. My goal is to hide elements when they're not in view, so another element in the same place with lower z-index can be selected.

Thanks for everything, I've been using AnimeJS for a couple years and absolutely love it!

[different55]

Did a test, for me it didn't call the update callback on the first seek(), but it did for every one after that. It might not have that quirk if it was already animating before being paused, it might be that I'm doing something particularly quirky.

[andomain]

@different55 I am seeing exactly the same behaviour. The first time I call .seek() the callback does not run but after that it does. Similarly if I play/pause the timeline then seek it works. Interestingly the .change() callback does run on the first seek.