A couple of questions

[gbayarri]

Hi, first off, thanks for putting your code in GitHub. It's being really useful for my project. However, I have some questions about how to proceed in order to integrate the timeline in a bigger project:

• I haven't found any function for create / delete keyframe(s). What I do is getModel() -> edit object -> setModel(). Is this the correct way?
• Is there some function to play the timeline? What I'm doing is to play / pause via setInterval(), but maybe you have some function I couldn't find.
• When playing the timeline, how do I know that the cursor is in a keyframe in order to interact with the stage? There is some way to detect it, or I have to check it iteratively comparing the cursor position with all the keyframes?
• Can I zoom the timeline directly from the wheel mouse instead of through a button?
• Do you have any online example apart from the live demo? In the animator repository I haven't found a functionally example.

Thanks!

[ievgennaida]

"Manage keyframes"

You can manipulate a model directly

Is there some function to play the timeline?

Usually animation containers (ex: svg) has an event that time has changed. You can use this to "play" and fully synchronise the timeline. If you are having custom player than you can use own implementation of the "play".

When playing the timeline, how do I know that the cursor is in a keyframe in order to interact with the stage? There is some way to detect it, or I have to check it iteratively comparing the cursor position with all the keyframes?

You have time position and also model with all keyframes. You can have some tolerance + analyse all keyframes.

Can I zoom the timeline directly from the wheel mouse instead of through a button?
Try ctrl or shift and wheel.

Do you have any online example apart from the live demo?

Component is not tested yet or incorporated to the big project I believe. Please feel free to create MRs.

[gbayarri]

Thank you so much for your answers.

At this moment I've started to integrate the timeline in a Vue app working on top of Electron JS and everything seems to work properly.

[gbayarri]

Hi, sorry for reopen the issue, but I have some more questions:

• Can I select more than one keyframe clicking them? By default, when I click a keyframe, the current one is deselected. Is there any way to disable that behavior?
• I built a player, but when I play the timeline and the cursor reaches the end of the visible part of the timeline, it keeps running out of the screen. I would like to develop some system to control that and move the timeline in consequence for having always visible the cursor. But for doing that, I need to know the total length of the timeline (in milliseconds, if possible), and I'm stuck here. If I do a console.log() of the timeline object, I get this _currentPos property with the data I need (snapVal / val, 6800ms in this case):

But if I do a console.log() of this __currentPos_ property, I get **null**. My question is basically, how can I know the size in milliseconds of the timeline?

• Can I totally disable the interaction mode? There are the zoom mode, the pan mode and the selection mode. But not a disable mode. Is it possible?

Thanks in advance!

[ievgennaida]

Hello @gbayarri
Could you please provide the use cases?
Knowing a reason I will be able to suggest something.

1. Regards the keyframes multi-select you can use select multiple by mouse selection rectangle and also by ctrl + click a keyframe. It's not possible at the moment to turn off the toggle functionality. Please describe a bit better what would you expect with the reason.

2. Please note: currentPos is private property (as all properties are prefixed with ""), try to use only "public" events, properties, and functions.
   Please check the newly published version. I have added a demo with a player and method to keep the timeline within bounds. See moveTimelineIntoTheBounds in the index.html v2.2.3. Please note: this is just a draft and it has bugs. Because of that reason, it's not incorporated into the component by itself but added to the demo. This can be used as a starting point. I will be able to check a bit better maybe next week, but please describe also all the expected aspects.

3. How would you move the timeline in disabled mode? What is the reason to add this mode?
   Nevertheless, I have added a new noninteractive pan mode and none mode. See the demo for the details.

[gbayarri]

Thanks @ievgennaida

I think these improvements and functions are exactly what I needed.

Regarding to the point 3 I agree wit you. Probably what I really wanted is the new "pan mode with keyframe selection" interaction mode you recently added.

I have another question related with the styles. Is it possible to style groups of keyframes? Something like that:

As you see, there would be two different groups with different colors for the keyframes and the transition between them.

Thanks!

[ievgennaida]

Hello @gbayarri,
It's possible now to change style of the keyframe, but not the style of the entire the group. For the keyframe see the typescript definitions. Group styling I can check next week.

[ievgennaida]

@gbayarri I have published a basic example of the requested feature where you can separately style a specific group.
See the attached demo.

If you are having any feature requests I would appreciate the input and a vision of the designed features while some of them can be incorporated.

BR.

[gbayarri]

Hi, @ievgennaida

Thank you so much. I will integrate this new version in my code. I've taken a look to your changes and maybe it will take me some time, but it's exactly what I needed.

As for future requests, is there some protocol to follow? Do you need a more accurate description? More images explaining the desired behavior?

Thanks again :)

[ievgennaida]

@gbayarri I cannot support a sense of the constant feature implementation, but just want to avoid some simple things being implemented outside of the lib. I am not using this project for any real project so that is why I am wondering what is missing for the real use-cases and will appreciate such input. BR