Anime: Animating the Property Offset of an SVG Gradient

Created on 8 Sep 2017  路  5Comments  路  Source: juliangarnier/anime

Well .. as the name 'offset' is taken by the animating properties it seems impossible to me to animate it per the usual way.

bug enhancement help wanted

Most helpful comment

Offset can relate to many dimensions: xOffset, yOffset, timeOffset. So maybe in the next major update renaming offset to timeOffset would be a way to solve this.

All 5 comments

Yes, that's the downside of having a single object for both animatable properties and settings.
Prior to 2.x there weren't too much "locked" properties.
I might change some of the property names, or change the API style in the future.

Any suggestions are welcome.

Maybe changing it to this style:

css: { offset: x, height: x,... }
html: { offset: x, height: x,... }

or this one:

css-offset: x,
tag-offset: x / html-offset: x

^ this style doesn't have to be the main way to declare these kind of properties; the current way works pretty dandy. Just as another notation way. Love the way it is.
I got a workaround to get this problem to work now too. (I used an external Object and an event to update the offset per jQuery)

_Can't really help with the code though. Never really used Github to make Pull Requests(i suppose thats how you call code submissions right?)_

Offset can relate to many dimensions: xOffset, yOffset, timeOffset. So maybe in the next major update renaming offset to timeOffset would be a way to solve this.

Would it make sense to add a prefix to the property that could also be used consistently across the other settings properties, to prevent other possible name conflicts? Something like animOffset?

The offset property has been replaced by timelineOffset in V3.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

littlee picture littlee  路  3Comments

LiveLikeCounter picture LiveLikeCounter  路  3Comments

KEYHAN-A picture KEYHAN-A  路  3Comments

PierBover picture PierBover  路  6Comments

jackedgson picture jackedgson  路  3Comments