I want to create a blend where an svg shape is a mask for a fixed background, which can move on mouse move
like this https://purebase.co/
any tips on how to achieve this? not sure it’s doable with webflow’s native clipping/blending capabilities?
Hi @kecap,
I’m really not a pro with interactions but I tried to recreate the effect on the link you provided, you can check the preview link here: https://preview.webflow.com/preview/testing-interactions-2a8292?utm_medium=preview_link&utm_source=designer&utm_content=testing-interactions-2a8292&preview=6b288a472aa8d65abf9bd22be3b5119a&workflow=preview
Here’s the live site: https://testing-interactions-2a8292.webflow.io/
I just used a background image, the SVG within an HTML embed which I put inside a div (‘Right’), I then added a ‘Mouse move over element’ interaction and then used a ‘Move’ action on the background image.
I’m sure there are better ways to do this and you’ll have to experiment with some of the settings but I hope this points you in the right direction!