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! 😉

[jackkemmish]

Hey @xavierfoucrier. Did you get anywhere with this, would love to see an example!

[xavierfoucrier]

Unfortunately, nothing I could share 😿

My question is quite old, but if I remember well I coded a custom plugin for that.
Follow the way native components are written and you should be able to this.

In addition, search inside new topics, probably some developers already shared their own experience.
Good luck! 😉

[jackkemmish]

No worries at all!

Glad to hear you cracked it though. I'll have a snoop around to see if there's any inspiration for what I'm after 🙏

Thanks for the quick reply!