Svg Distortion processes an image using the svg filter <feImage> causing a displacement map created with <feDisplacementMap>.
Depth Factor: define the amount of displacement
- Static: simply apply the image distortion effect without transitions
- Animated: produce the effect repeatedly
- Rollover: generate the effect as the cursor passes over the element
- Scroll: apply the animation effect only when the item is displayed at the scroll
Here a working example