Setting additional options

[michaelrafailyk]

I am considering adding options:

1. Associating positional keys with parent of element instead of element (optional). It will allow synchronizing animations of different elements located in the same parent. Implementation can be different and it's hard to decide what's better and more convenient. I put here 3 possible versions.

<div data-animation="opacity: {-50vh: 1, 0: 0}" data-options="animation-keys: parent"></div>

<div data-animation="opacity: {-50vh: 1, 0: 0}, options: {keys: parent}"></div>

<div data-animation="opacity: {-50vh(parent): 1, 0(parent): 0}"></div>

2. Setting min-width of viewport at which data-sticky, data-animation and data-classes will work. Like a @media (min-width) {...} in CSS.

<div data-options="viewport-min-width: 1024px"></div>

3. Make a classes of animations and describe it aside in JavaScript.

<div data-animation="anim1 anim2"></div>

Questions that i faced:

1. Should i make one more data-options attribute or trying to add new features to existing attributes?
2. Should data-options be applied to all data-sticky, data-animation and data-classes attributes? Like a keys: parent instead of animation-keys: parent.