How to build a custom clip path transition?

[xavierfoucrier]

Hello everyone!

Pretty new to use SwiperJS in my projects, it is a great slider and well tree-shakeable with webpack.

I am trying to build a custom "clip path" transition, but looks like there is no documentation about how to achieve custom transitions. What I am trying to achieve is:

• 1 big slide per view (full screen format)
• only images in all my slides + text over images (like title/subtitle)
• doing a clip-path transition with a circle shape (my main goal)
• being able to position the circle shape where I want on the slide (right bottom, or middle, etc.)
• having a "loopable" slider (being able to go backward/forward and play clip-path transition in both directions)

Thanks a lot for your feedback! 😉

[xavierfoucrier]

@nolimits4web up. Thanks 😉

[linonetwo]

You can write a custom plugin, assign custom css in setTranslate(), see existed plugin for example

swiper/src/components/effect-coverflow/effect-coverflow.js

Line 5 in c7327d4

setTranslate() {

[xavierfoucrier]

Simple as that, OK thanks for the answer! 😉