Indeed, it does! Thanks for taking the time and especially thank you for the detailed answer

from clip-path-polygon.

Hi Sebastian,

Sorry for a late response but time around Christmas and New Year is quite busy :)

Thanks to you I discovered one bug related to passing options, I'll fix it soon.

Regarding your question, I made transitions working on Chrome, unfortunately I couldn't have forced Firefox to cooperate yet.

Will keep you updated.

Thanks again!
Karol

from clip-path-polygon.

I'm going to use this lib on my project and the transition support is a must. I was wondering whether you've got any updates on this feature, else I could submit a pull request provided that I find a solution.

from clip-path-polygon.

Hi @gtsop,

I haven't progressed with this issue any further.
Your contribution would be highly appreciated! :)

Notice: I will be unreachable for next couple of days.

Thanks!
Karol

from clip-path-polygon.

@andrusieczko

I ended up using a brute force method (lazy me), and it works with a barely acceptable performance penalty. I pre-calculate all intermediate clip points, cache the DOM Element, cache the options object and use an interval to call .clipPath() within the required transition time.

However, while trying to find a better solution I came across this which is obviously better. Haven't tried implementing it yet, just sharing it here to give a lead

from clip-path-polygon.

Hi @gtsop,

Thanks for sharing!

I'll try to take a look at that this weekend.

Cheers,
Karol

from clip-path-polygon.

Is there something new regarding this issue? @andrusieczko

from clip-path-polygon.

Hi all,

There are a couple of things to consider.

Chrome

@sebastiangrochocki's solution works well in Chrome:

JS:

let pointsFrom = [[350, 0], [0, 350], [350, 350]];
let pointsTo = [[0, 0], [0, 350], [350, 0]];
$('#myClipPathDiv').clipPath(pointsFrom);

$(".animatebutton").mouseover(function() {
  $('#myClipPathDiv').clipPath(points, pointsTo);
});
$(".animatebutton").mouseout(function() {
  $('#myClipPathDiv').clipPath(points, pointsFrom);
});

HTML:

<div style="width: 350px; height: 350px; padding: 10px">
  <div id="myClipPathDiv"></div>
</div>
<span id="animatebutton">Animate!</span>

CSS:

#myClipPathDiv {
  transition: clip-path 1s;
  width: 100%;
  height: 100%;
  background-color: green;
}

Firefox

Unfortunately, the situation with Firefox is a bit different...
Firefox doesn't support transform in indirectly rendered things like clippath (source: https://bugzilla.mozilla.org/show_bug.cgi?id=1118710#c13).

However, they support Synchronized Multimedia Integration Language (SMIL).
Unfortunately, Chrome 45 deprecated SMIL in favor of CSS animations and Web animations (source: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL).

This is how you can achieve the desired result with SMIL in Firefox:

JS:

$('#mask').clipPath([[350, 0], [0, 350], [350, 350]], {
  svgDefId: 'myClipPathSvg'
});

HTML:

<div style="width: 350px; height: 350px; padding: 10px">
  <div id="myClipPathDiv"></div>
</div>
<span id="animatebutton">Animate!</span>

<svg width="0" height="0" style="position: absolute; visibility: hidden; width: 0px; height: 0px;">
  <defs>
    <clipPath id="myClipPathSvg">
      <polygon points="350 0, 0 350, 350 350">
        <animate attributeName="points" fill="freeze" from="350 0, 0 350, 350 350" to="0 0, 0 350, 350 0" dur="1s" begin="animatebutton.mouseover"></animate>
        <animate attributeName="points" fill="freeze" from="0 0, 0 350, 350 0" to="350 0, 0 350, 350 350" dur="1s" begin="animatebutton.mouseout"></animate>
      </polygon>
    </clipPath>
  </defs>
</svg>

CSS:

#myClipPathDiv {
  width: 100%;
  height: 100%;
  background-color: green;
}

TL;DR

Solution

Having said all of that, you'd probably need to implement two different solutions for Chrome and Firefox (or, to be more precise, WebKit/Blink and Gecko).

I will not add this feature to the library itself as it would increase the complexity of it.

I'm sorry I hadn't resolved it earlier.

We might look at Web Animations in the future.

@sebastiangrochocki, @gtsop, @manniL: does it answer your questions?

from clip-path-polygon.

@andrusieczko I'm good with that answer, thanks 👍

from clip-path-polygon.