pixofield / keyshapejs Goto Github PK

Hello

The first thing to say is that I love Keyshape and say that its simplicity is making it very popular in our agency. Great job.

Now. I'm used to working with Lottie. And it has the ability to access a specific frame of an animation. This way you can have different phases of an animation in just one file.

Keyshape JS allows you to do something similar?

Hi! I love Keyshape, it reminds me a lot Hype but for SVGs! Something I miss very much is the ability to control each timeline using the API and not just the main one.

I found a way to do that, exporting the animation in CSS, but would be awesome to have it built in:

https://css-tricks.com/restart-css-animation/#other-javascript

https://css-tricks.com/controlling-css-animations-transitions-javascript/

i noticed this code
var isWebkit = navigator.vendor.match(/apple/i);
causes errors in older browsers due to .vendor browser support.
I myself changed it to this...
var isWebkit = /webkit/.test( navigator.userAgent );
which i believe is more compatible with older browsers.

Hello,
I am liking keyshapejs a lot so far.
My only question before i use it is...
Is it possible to have events/trigger during the timeline.
So if the timeline reaches a certain time, there will be a trigger of some code which can then control the timeline.

Example: If the timeline reaches 500, it will run some code to check something and either return back to 0 on the timeline or continue.

It'd be really helpful to see how this library can be used, ideally a 'simple' and 'kitchen sink' type example.

I have a blur applied to my SVG and using KeyshapeJS to animate it. Everything works great, and with amazing performance, even in Firefox which is usually a culprit in that regards. Although nothing happens in Safari. Probably because of the -webkit-filter prefix needed for Safari.

macOS Mojave 10.14.6
Safari 14.1.2

In visual studio code vue3 / vite app is not working. CDATA is all underlined in editor. I guess xml is not supported in vue. Any solutions? I was interested in seeing how the reactivity would have worked with the svg. That would be real cool.

I’m curious if keyshapejs has any unique functionality, or if it would be possible to use the web animation API? That way, you would not need a custom JS library?

See:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

Exported KeyshapeJS animations are a little difficult to use in my setup and involve some manual work to reorganise.

I'd like the option to export the JSON/JS animate instructions separately from the SVG for a couple of reasons:

• My build pipeline doesn't support CDATA tags in svg
• I'd like to load the KeyshapeJS dependancy and instructions manually and have total manual control over the animation.

hello,
I am using it for a very basic animation, mostly just postion, opacity, fillcolor and size changes.
I am needing to make all the files as small as possible. Would you recommend a way to remove unused functions from the main keyshapejs file?