Animated Path Clippers

[Acorn]

Originally, I wanted to pack a lot of thumbnails together but use HighSlide to show the fuller images; a thing that Xara cannot achieve easily.
I did a lot of JavaScript coding to then discover CSS clip-path.
The bonus is the means to animate the hover as well.

The example file is just using simple path shapes.
The fun comes when you use SVG shapes as well.

CSS - Path Clippers.xar

The clipped paths align with the presented shape so there is none of the usual overlapping that rectangular DIVs/SPANs show.

There are four ways to develop further:

1. Build up a further collection of polygons and ellipses.
2. Add in specific keyframes for different classes.
3. Add in a dusting of SVG shapes.
4. Experiment with customised paths, which have to use absolute values and not percentages.

The current CSS code is in Website > HTML Code (head).

Acorn

[gwpriester]

Wow! But can you show us a practical use for this?

[Acorn]

Wow! But can you show us a practical use for this?

Well Gary, you can stack a clutch of triangles/hexagons/squares together into a mosaic, each shows a part of a different image.
I assume you did notice most had a Photo pop-up to the fuller image?

You can use handcrafted insets to create different rectangle sizes and positioning so the key part of the image is showing in the cropped thumbnail.
This allows for a fully random patchwork of a photo collection. I would cheat a little and simply have lots of overlapping thumbnails.
You would need to include a CSS line of z-index: 100; to bring the animated image to be topmost.

Replace the CSS code with this:

[class*="-clip"]:hover {
-clip-path: circle(45%);
animation: spotlight 4.37s ease-in-out 6 alternate;
}


@keyframes spotlight {
0% { clip-path: circle(100% at 50% 50%); opacity: 0.25; z-index: 100;}
10% { clip-path: circle(10% at 50% 50%); opacity: 1;}
25% { clip-path: circle(25% at 50% 50%); }
50% { clip-path: circle(20% at 12% 84%); }
75% { clip-path: circle(20% at 93% 51%); }
100% { clip-path: circle(20% at -30% 20%); }
}

The animation can be hidden or replaced with other effects.
Try remove the animation phrase and replacing with another clip-path:

[class*="-clip"]:hover {
clip-path: circle(45%);
}

I left this in with a minus sign in front, which needs to be removed.

The clip-path shape is still a Xara object so you can add in other fills and transparencies.
It need not open a larger image, it can be a Link to a pop-up layer.

It works with text so you could use an top 10% polygon to show a heading and a hover to reveal the entire paragraph:

.accordion-clip {
clip-path: polygon(0% 0%,100% 0%, 100% 10%, 0% 10%);
}
.accordion-clip:hover {
clip-path: polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);
background-color: white;
z-index: 100;
}

This allows for a simple accordion of vertical stacked texts. You could get a horizontal only by moving each text area the width of the previous heading, almost a button presentation.
It make a Hamburger Menu the easier thing ever or ever a mega-menu of buttons, each with their own sub-menus.

Acorn

[gwpriester]

Brilliant!

[Acorn]

For those interested in developing your own clip paths, you can start with this: https://codepen.io/stoumann/pen/abZxoOM.

Once you have designed one you can save it locally as a Preset.
The when you tweak the control positions, you can hover over the Animation preview.
You would use the CSS clip-paths for the ClassName using the Preset code and its hover using the hover code in the same style i have been presenting.

Upload some of your designs.

Acorn

[Initiostar]

@ Acorn

I had a read up on clip-path and gave it a play; separated the clip-path and animation and using your template, I can create additional clip-paths (per the attached) CSS - Path Clippers-Ideas.xar

I tried to use a simple transition for a hover, but this failed. I must be missing something here?

Also with new a document, do I have to invoke jQuery and or Xara animation CSS, or something else?

I have used a photo with transparency in my examples as a background, but I doubt that is an issue; the animations should be at the front. I followed these links to better understand clip-paths. https://css-tricks.com/animating-with-clip-path/ | https://ishadeed.com/article/clip-path/


Gary

[Acorn]

Gary

square-circle fails as you gapped the hover, use:
.square-circle:hover { ...

The heptagon-clip has an extra preceding closing brace.

No jQuery.
No ani.css If you so add Mouse-over animations, you may get some conflicts.
Just what you type, which you now see is important. Add a typo and the whole CSS phrase is ignored.
I do the same all the time so I use Notepad++ and Language: CSS to help troubleshoot as well as browser > F12.

The sequencing of the CSS is also crucial.

Under-images are fine. As clip-path removal allows them to be clicked, it is very useful indeed to add click events to the under-images.

The links are fine but can be a tad overpowering.

Acorn

[Initiostar]

Many thanks Acorn: I should be more careful! I use Notepad++, but should have added Language CSS and the mistakes become clear. All now works as expected

All very useful and thanks for sharing.

Gary