Diagonal fill on hover

You’re probably not far off — the key is to avoid trying to animate the clip-path itself. In Storyline, a much simpler approach is to use a separate shape as the diagonal overlay and animate its position/size on hover.

If you’re using Storyline, you can create the effect with a rectangle/parallelogram placed over the button, then use a hover state or layer animation to move the overlay diagonally across the shape. This tends to be more reliable than trying to animate clip-path, especially since Storyline has limited support for CSS-style animations.

Another option is to create the diagonal fill as an SVG and use it as the hover-state graphic. That gives you much more control over the angle and appearance while keeping the interaction relatively lightweight.

I’d definitely avoid going too far down the CSS/child-div route if this is being built natively in Storyline — you’ll likely spend more time fighting the tool than building the effect. 🙂