javascriptcssanime.jsweb-animations

How to support vendor prefixes with anime.js

I am animating the clip path which works great until I get to safari, I need the -webkit- prefix.

I know I can animate this using css, but I need to dynamically allocate variables into the clip path for the location. Something that cannot be done in plain old css.

Here is my anime.js object

anime({
    targets: '.contact-area',
    clipPath: [`circle(0% at ${coords.centerX}px ${coords.centerY}px)`, `circle(140% at ${coords.centerX}px ${coords.centerY}px)`],
    duration: 350,
    easing: 'easeInOutQuint'
});

Idealy i would live anime.js to support this out of the box, maybe i'm missing something.

I can't find anything of this nature in the documentation or online, so if there are any work arounds any one could think of i'm open to ideas. I'm using anime.js for other aspect of the site (animated logo and such) so i would like to stick with it if possible.

Solution

  • Use full CSS property name and value surrounded by quotes.

    In your case:

    anime({
    targets: '.contact-area',
    "-webkit-clip-path": "your-css-clip-path-property-value-here",
    duration: 350,
    easing: 'easeInOutQuint'
});