scroll trigger svg clip path 😧

[choma03]

Please help me, I can’t find a solution to this problem.

It is necessary to implement an infinite svg so that when scrolling, each subsequent svg inherits the clip path . Now I

only have the first SVG with clip path, the next ones ignore the clip path. help me please))

See the Pen jORqYdO by choma-og (@choma-og) on CodePen

[mvaneijgen]

Hi @choma03 welcome to the forum!

 

Yes you're copying the #country path, but this doesn't inherit the clipPath that is outside of it. If you put your use elements inside the clipPath it already looks more like you want to. The clipPath is what gets cut from the background image. It doesn't draw your path element at all certainly not seeing it is in a <defs> element.

 

I've written a post that explains some gotchas with clipPahts, maks, ect. Maybe interesting for you 

 

 

The animation isn't infinite at the moment, you could check if you could line everything up and then call .restart() on your tween, so that it looks like it is infinate or you could look in to the Seamlessly loop elements along the x-axis, but I don't know if this will work for SVG elements. 

 

Also if this is the effect that needs to happen, just a white image with transparent letters cut out of it would also work and will probably be much easier to handle or look in to  creating transparent text with -webkit-background-clip: text;  -webkit-text-fill-color: transparent; https://cssgradient.io/blog/css-gradient-text/

 

Hope it helps and happy tweening! 

 

See the Pen VwNaQdR?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[choma03]

Thank you very much!! but tell me how to call restart() correctly so as not to include a lot of use

[mvaneijgen]

I don't know. This is something you have to figure out and is probably taking a lot of trial and error. 

 

Again, also explore the other other solutions I've suggested. Just transparent .png with the Seamlessly loop elements along the x-axis will probably a lot easier to handle. 

[choma03]

Thanks again for the quick response. I found a solution for infinity)) have a nice day!