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. 🙂

Seb that is perfect, thank you for taking the time to do that. I think I was 75% of the way there but would have never got there so thank you!

You will find some parameters in the js, such as speed, colors, easing, scale, and starting position, that you will need to adjust to your needs.